Wood-Roots:blogHOMEJavascript201208/17GalleryViewの大きな画像にリンクを設置するカスタマイズJavascript2013.03.27追記カスタマイズしたJavascriptファイルをGitHubで公開しました。下記の改修例はpanel_animationオプションをfadeだけしか考慮していませんでしたが、fade,slide,clossfadeすべてでリンクが機能するようになっています。GitHubを見る限りリンクを設置したいという要望は議論されていたようですが、反映にはいたっていないようです(作者の方が対応しきれてないっぽい)。GalleryViewは見た目も美しいギャラリー用のjQueryプラグインですが、バージョンアップしてからデザイン性は進化したもののカスタマイズ性が低くなりました。大きな画像にリンクを設置することができなくなった(旧バージョンもできなかったかも?)のが非常に不満でしたので、そこを改善するためのカスタマイズを行いました。同じ悩みを持っている人は他にもいるようです。galleryviewのjavascriptについ下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。HTMLは特に修正する点はありません。imgに対してリンクを設置するだけです。/></a></ul>jquery.galleryview-3.0-dev.jsを以下のように修正します。img',this.$el);//509行目あたりに追加_img.fadeIn();//以下の行を足します。1枚目の画像を読み込んだ時にリンクを設置します。'"></a>');}//526行目あたりに追加.attr('src',gvImage.src.panel)//以下の行を追加。画像自体にdata-link属性でリンク先を保持します。.attr('data-link',gvImage.href);//600行目あたりに追加//今回はpanel_animationがfadeのものに適用させてますが、それ以外のcrossfadeやslideに適用させる場合はその部分(caseの中)に書いてください。コメントをキャンセルメールアドレスが公開されることはありません。PMずっと解決できなくて困っていました!初心者なのですごく助かります!ありがとうございます!もう一歩なんですがどうしても一枚目の画像しかリンクが飛びません;よろしければ解決策をお願い致します。AMマシュー様コメントいただきありがとうございます。実際に設置されたコードを見ないと正確な原因は分からないのですが、jQueryのバージョンが違ったり(jQuery1.7.1で確認しています)、Javascriptエラーが発生しているのかもしれません。よろしければ改造して設置したサンプルをアップしましたので、こちらのJSファイルと比較してみるといいかもしれません。https://wood-roots.com/sample/galleryview/demos/default.htmlまた、JSファイルそのものは以下のURLよりダウンロードできますのでそのままご利用いただいてもかまいません。PM画像にリンクを張るところで苦労してます。できれば前後のコードを書いていただけると正確にコード挿入するところがわかりますので、ありがたいです。当方初心者で挿入位置に迷ってます。PMjquery.galleryview-3.0-dev.jsにhttps://wood-roots.com/sample/galleryview/js/jquery.galleryview-3.0-dev.jsのコードと同じようになるように書き足したり、修正をしたのですが、画像へのリンクを張ってアップすると白い画面で何も表示されませんでした。したらよいでしょうか?アドバイスをお願いいたします。様コメントありがとうございます。真っ白ということは大きなエラーだと思うのですが、たとえばCSSのリンクを忘れているとか、DEMOページのJSをそのまま使ったのであればpanel_animationオプションをfade以外にしているとかではないでしょうか。現状では判断できないので、もし可能であれば設置したページを実際に見せていただけると解決策をアドバイスできるかと思います。AM回答ありがとうございます。現状見れる状態でアップしているアドレスです。http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/javascript/daibana.htmlこちらの状態を、拡大画像をクリックでリンクでリンクに飛ぶようにしたいと思っています。フレームページに組み込むつもりですので、フレームページを開いたときにフレーム内へ表示されないようにしたいとも思っております。12月1日中に何とか形にしたいと思っておりますのでアドバイスをよろしくお願いいたします。様ソースコードを見せていただき、現時点で何点か気になる点をお伝えします。・HTMLのDOCTYPE宣言が2行ありますが、HTML4.01かXHTML1.0の一方でないといけません。・galleryview-3.0-dev.jsが私が用意したものではありません。開発者様のデフォルトのものそのままです。なっていますが、そのためにクリックイベントがバッティングしているのかもしれません。falseにしてみてください。frameへ飛ばすのであればpanel.children().wrap(...としてaタグを記述しているところにtarget属性をあわせて書けばフレーム内へのリンクとなります。フレームの設置ページがGalleryviewを設置しているページとは違う場合(つまりgalleryview.html→shopping.htmlに飛びつつshopping.html内のiframeを書き換える、みたいな)はGalleryviewのカスタマイズではなくなります(GET値を取得してiframeのsrcにセットする、みたいな感じでしょうか)。私の力不足で大変恐縮ではございますが、「○月○日までに」と言われましてもお答えしかねる場合がございます点ご了承ください。PMたびたびすみません。気ばっかり焦って不快な思いをさせて申し訳ないです。ファイルの方を指摘していただいた点に気を付けて再度アップいたしました。画像は表示されるようになりましたが、リンクの方がついていません。再度アドバイスをよろしくお願いいたします。PMたびたび失礼します。画像へリンクを貼った一つ目の画像が表示されていません。お忙し中ありがとうございます。アドバイスをよろしくお願いいたします。私が指摘した箇所が直っていないように見えますので何が悪いのかは判断できません。・galleryview-3.0-dev.jsが私が用意したものではありません。開発者様のデフォルトのものそのままです。なっていますが、そのためにクリックイベントがバッティングしているのかもしれません。falseにしてみてください。合わせて以下の点にも問題があります。・DOCTYPE宣言はHTMLの1行目に記述しないといけません。改行が入って2行目に記述してあります。これによりmarginやpaddingなどに影響が出るケースがあります。PM作ってるうちにぐちゃぐちゃになったので作り直してみました。しましたら、画像は表示されリンクも貼ったのですが、リンク切れの表示が出てしまいます。true上記の行が何行目か大体の行数を教えていただけませんでしょうか?なお、ファイルを作成しなおしたときに、作られるフォルダー上のファイルのコードを書き直せばよいのでしょうか?当方、初心者に近いので、よろしくお願いいたします。詳しく検証する時間がないので予想になってしまいますが、画像類を「daibana1.files」というフォルダに設置していますが、フォルダ名に「.」(ドット)を使わないように変更してみてください。拡張子以外でドットを使用するといろいろ問題が起きる可能性があります(使わない前提で書かれているスクリプトが多いので)。trueこれはHTML内の$(function(){})で書いている部分の中にあります。PMアドバイスありがとうございます。Bargain”のところにリンクははれていますがページが表示されません。何かを間違っているのでしょうか?お忙しいところ申し訳ごぜいませんが、アドバイスをよろしくお願いいたします。PMアドをはるの忘れてました。様リンクが飛ばない原因が分かりました。GalleryViewのJSファイル内に_img.wrap(‘‘);という記述がありますが、これだと../daibana2.files/リンク先というふうにリンクが貼られます。../daibana2.files/http://item.rakuten.co.jp/gainabazar/c/0000026140/となり、リンク切れとなります。_img.wrap(‘‘);に直してみてください。Viewのjsでよいのでしょうか?そのファイル内に//if(_img.attr(‘data-link’)){_img.wrap(‘‘);}上記コードしか見つけれないのですが・・・。変更するのはdaibana2/jquery.galleryview-3.0-dev.jsというファイルです。変更する箇所は_img.wrap(‘‘);であってます。これを_img.wrap(‘‘);にするだけです。PMお忙しい中早々のご回答ありがとうございます。おかげでできるようになりましたが、当方IEの6、Windows8ですが、Windows7のIE9で確認をしたところ、リンクが飛ばずにエラーになってしまします。どこか改善しないといけないのでしょうか?たびたびすみませんが、アドバイスをよろしくお願いいたします。PM新たな疑問が出てきました。http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/rakutenfremu.htmlフレームページに組み込めましたが、クリックしたときにフレーム内でページが開いてしまい。フレーム外でページを開くことができません。アドバイスをよろしくお願いいたします。様HTMLで見落としていましたが、1行目のDOCTYPE宣言の記述がおかしいです(昔は有効だったのかもしれません。同様の記述はあるようですが。)に変更してみてください。フレーム内で使う場合はtarget指定をすればいいので、_img.wrap(‘‘);を_img.wrap(‘‘);にすればフレームの外でリンクが変更されます。PMDOCTYPE宣言の記述を教えていただけませんでしょうか?_img.wrap(‘‘);を_img.wrap(‘‘);上記は二つのコードに変化がないように思うのですが・・・。お忙しい中すみません。PMすいませんタグが消えてました。“http://www.w3.org/TR/html4/loose.dtd”>※最初と最後の<>は半角にしてください。target指定_img.wrap(‘‘);※最後にtargetというのを追加しているとなります。修正してみたのですが、リンクがうまく開かないのとクリックしてページが表示されなくなりました。フレームだけのページだとうまくいきましたが、楽天の商品ページに組み込むとうまくいきませんでした。すみませんがアドバイスをお願いいたします。PMまた、新たな難問が・・・。お忙しいところすみませんが、最初の画像にはリンクを貼ることができましたが、2個目、3個目の画像にリンクを貼っているのですが、ページが表示されませんの状態になってしまいます。PMprinn様jquery.galleryview-3.0-dev.js内の613行目あたりにif(panel.children().attr(‘data-link’)){panel.children().wrap(‘‘);}という記述があります。これをif(panel.children().attr(‘data-link’)){panel.children().wrap(‘‘);}に変更してみてください。これで解決すると思います。AM夜遅くにすみません。うまくリンクは飛ぶようになりましたが、target=”_top”にしていますが、フレーム内に表示されます。夜中にすみませんが、アドバイスをお願いいたします。AM614行目あたりにpanel.children().wrap(‘‘);という記述があるのでこれを同様にpanel.children().wrap(‘‘);としてください。AM大変ありがとうございました。思い通りに出来上がりました。感謝してもしきれないくらいです。多大に時間を割いていただいてありがとうございます。お体をご自愛くださいませ。AM大変参考になりました。ありがとうございます。purinnさんのやりとりをみながら、同様に実装してみましたが、下記の3点を解消したいので教えてください。11枚目のリンクが飛ばない(ポインターマーク矢印)作成したHTMLを、更新ボタンを押し1枚目の初期表示ではポインターが手のマークになりません。(2枚目からリンク可)なお、NEXTやPREVをすると1枚目もリンク可能になります。2IE8ではshow_filmstripが不透明表示にならないサンプルをIE8で見たところ発見しました。IE6,IE7はOK!3大きな画面にカーソルをのせている時にスライドを停止したい。画像にオンマウス⇒スライドを停止。画像にアウトマウス⇒スライドを始動。様コメントいただきありがとうございます。11枚目のリンクが飛ばない(ポインターマーク矢印)私の環境では1枚目のリンクも正常に設置できましたので、特定のブラウザによって起きるかもしれません(JSなのでOSとかサーバに関係する問題ではないと思われます)。よろしければブラウザの種類とバージョンをお伝えいただきますと解決が早いかも知れません。1枚目の画像に対するリンクは//509行目あたりに追加_img.fadeIn();//以下の行を足します。1枚目の画像を読み込んだ時にリンクを設置します。data-link属性を保持させるのは後ほどの処理で//data(‘link’)のほうが今っぽいですがどこかでclone(false)が走っているのかdataが受け継がれなかったif(_img.attr(‘data-link’)){_img.wrap(‘‘);}という部分で行なっています。2IE8ではshow_filmstripが不透明表示にならない気付いてませんでしたが、これはGalleryView本体でも発生する現象のようです。根が深い問題で、jQuery本体の不具合と言ってもいいかもしれません。ようにfilterという属性を使っています。して属性を付加しています。そのため透過処理が効かないという問題が発生しているようです。使いません(なので正常に動作する)。IE7モードとして動作させるぐらいしか思いつきません。いい解決策が見出だせず申し訳ありません。3大きな画面にカーソルをのせている時にスライドを停止したい。{...}というファンクションの一番最後にdom.gv_panelWrap.bind(‘mouseenter.galleryview’,function(){self.stopSlideshow(true);}).bind(‘mouseleave.galleryview’,function(){self.startSlideshow(true);});と足してみてください。大きな画像にmouseenterしたときにストップし、mouseleave時に再度スタートするようにしています。※autoplay:trueの前提で考えてますのでautoplay:falseの場合はmouseleave時に再生がスタートされるという問題があります。厳密にやる場合は現在が再生中かどうかを判定してstopSlideshowなのかstartSlideshowなのかを区別する必要があると思われます。回答ありがとうございます。私の環境では1枚目のリンクも正常に設置できましたので、特定のブラウザによって起きるかもしれません(JSなのでOSとかサーバに関係する問題ではないと思われます)。よろしければブ>ラウザの種類とバージョンをお伝えいただきますと解決が早いかも知れません。//以下の行を足します。1枚目の画像を読み込んだ時にリンクを設置します。}>という部分で行なっています。この部分の記述漏れなどはないでしょうか?記述は問題ありませんでした。確認はローカル環境で行っております。リンクの使用可否は、ブラウザ環境に依存するのでしょうか?解決方法ございましたらご教授ください。気付いてませんでしたが、これはGalleryView本体でも発生する現象のようです。根が深い問題で、jQuery本体の不具合と言ってもいいかもしれません。ようにfilterという属性を使っています。して属性を付加しています。そのため透過処理が効かないという問題が発生しているようです。使いません(なので正常に動作する)。IE7モードとして動作させるぐらいしか思いつきません。いい解決策が見出だせず申し訳ありません。3大きな画面にカーソルをのせている時にスライドを停止したい。});>と足してみてください。大きな画像にmouseenterしたときにストップし、mouseleave時に再度スタートするようにしています。>※autoplay:trueの前提で考えてますのでautoplay:falseの場合はmouseleave時に再生がスタートされるという問題があります。厳密にやる場合は現在が再生中かどうかを判定して>stopSlideshowなのかstartSlideshowなのかを区別する必要があると思われます。autoplay:trueの前提ですので完璧な回答です。ありがとうございました。様1枚目がリンクにならない問題ですが、どうもこちらでは再現できません・・・・と言ってもIETesterでの確認なのでまともな環境とは言えないかもしれません(環境を用意できるとしてもVirtualPCになってしまいますが)もしかしたら1枚目にリンクを貼るwrapの処理をsetTimeoutでずらすとうまくいくかも知れません。PMGalleryViewの画像にリンクを付ける方法を探していてここにたどり着きました。‘slide’,に変えると一枚目の画像しかリンクが飛ばなくなってしまいます。様コメントいただきありがとうございます。‘fade’内にしか書いていません。‘slide’内に追加してみてください。});//以下を追加するif(panel.children().attr(‘data-link’)){panel.children().wrap(‘‘);}break;となります。AM管理人様すばらしいです。貴重な回答ありがとうございました。今後もためになる情報を期待しつつ、ブログチェックさせて頂きますね。最新のjquery.galleryview-3.0-dev.jsではなく、jquery.galleryview-3.0.min.jsを使っております。同様に大きい画像にリンクを貼りたいのですが、htmlにタグを入れるとサムネイルにリンクが設定されてしまう状態で困っております。こちらの記事にあるような項目がjquery.galleryview-3.0.min.jsには見当たらず、もしわかるようでしたら教えていただきたいのですが・・・。PMいじ様コメントありがとうございます。「jquery.galleryview-3.0.min.js」というのは改行やコメントをなくした圧縮版ですのでカスタマイズには向きません。参考にされているURLのGalleryView.jsは旧バージョンのもので、最新バージョンとは大きく異なり同様の方法ではカスタマイズはできません。他のプラグインを使うか最新版のGalleryView.jsを使用することをおすすめします。PMお世話になります。galleryviewの大画像にリンクを貼りたく、こちらを使わせていただいております。その中で、一部のリンクを外部リンク(target=”_blank”)にしたいのですが、うまくいかず困っています。お忙しい中恐縮ですが、アドバイスをいただけますでしょうか。様コメントありがとうございます。target=”_blank”にしたい場合は//600行目あたりに追加panel.children().wrap(‘‘);という部分がaタグで囲っている部分ですのでpanel.children().wrap(‘‘);とすれば実現できます。AM管理人様ご返信ありがとうございます。試してみたのですが、こちらですと全てのリンクにtarget=”_blank”がついてしまうと思います。一部のリンクだけに適用したいので、できればhtml上で、target=”_blank”と記述したものが反映されると良いのですが可能でしょうか?宜しくお願いいたします。様それぞれのtarget属性の内容を引き継ぐためには、target属性の内容を保持する必要があります。null;のような感じでtarget属性を保持し、if(panel.children().attr(‘data-link’)){...}の部分でtarget属性によってaタグのフォーマットを書き換える(ifやswitchを使って)とすればいけるのではないでしょうか。PM管理人様お世話になります。アドバイスありがとうございました。null;を追加、そしてaタグの記述部分を下記のように変更しました。if(panel.children().attr(‘target’)){panel.children().wrap(‘‘);}break;ですがうまく動きません。シンタックスエラーは無いようですが作り方に問題があるでしょうか。