【Javascript】GalleryViewの大きな画像にリンクを設置するカスタマイズ | Wood-Roots:blog

ステキ情報を載せてくださってありがとうございます♪
すごく役立ちました～！

• ふもも
• 2012年8月28日 11:39 AM

解決しました！！！
ありがとうございます（*＞＜*）

• ヤト
• 2012年9月21日 3:21 PM

ずっと解決できなくて困っていました！
初心者なのですごく助かります！ありがとうございます！
もう一歩なんですがどうしても一枚目の画像しかリンクが飛びません；
よろしければ解決策をお願い致します。

• マシュー
• 2012年11月3日 8:35 AM

マシュー様

コメントいただきありがとうございます。
実際に設置されたコードを見ないと正確な原因は分からないのですが、jQueryのバージョンが違ったり（jQuery1.7.1で確認しています）、Javascriptエラーが発生しているのかもしれません。

もしよろしければ改造して設置したサンプルをアップしましたので、こちらのJSファイルと比較してみるといいかもしれません。
https://wood-roots.com/sample/galleryview/demos/default.html

また、JSファイルそのものは以下のURLよりダウンロードできますのでそのままご利用いただいてもかまいません。
https://wood-roots.com/sample/galleryview/js/jquery.galleryview-3.0-dev.js

• 管理人
• 2012年11月4日 2:04 PM

画像にリンクを張るところで苦労してます。
できれば前後のコードを書いていただけると正確にコード挿入するところがわかりますので、ありがたいです。

当方初心者で挿入位置に迷ってます。

• purinn
• 2012年11月29日 3:20 PM

jquery.galleryview-3.0-dev.jsに
https://wood-roots.com/sample/galleryview/js/jquery.galleryview-3.0-dev.js
のコードと同じようになるように書き足したり、修正をしたのですが、画像へのリンクを張ってアップすると白い画面で何も表示されませんでした。

どうしたらよいでしょうか？
アドバイスをお願いいたします。

• purinn
• 2012年11月29日 6:49 PM

purinn 様
コメントありがとうございます。

真っ白ということは大きなエラーだと思うのですが、たとえばCSSのリンクを忘れているとか、DEMOページのJSをそのまま使ったのであればpanel_animationオプションをfade以外にしているとかではないでしょうか。

現状では判断できないので、もし可能であれば設置したページを実際に見せていただけると解決策をアドバイスできるかと思います。

• 管理人
• 2012年11月30日 1:54 AM

回答ありがとうございます。
現状見れる状態でアップしているアドレスです。

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/javascript/daibana.html

こちらの状態を、拡大画像をクリックでリンクでリンクに飛ぶようにしたいと思っています。

また、フレームページに組み込むつもりですので、フレームページを開いたときにフレーム内へ表示されないようにしたいとも思っております。
12月1日中に何とか形にしたいと思っておりますのでアドバイスをよろしくお願いいたします。

• purinn
• 2012年11月30日 10:27 AM

purinn 様
ソースコードを見せていただき、現時点で何点か気になる点をお伝えします。

・HTMLのDOCTYPE宣言が2行ありますが、HTML4.01かXHTML1.0の一方でないといけません。
・galleryview-3.0-dev.jsが私が用意したものではありません。開発者様のデフォルトのものそのままです。
・pan_images: true となっていますが、そのためにクリックイベントがバッティングしているのかもしれません。falseにしてみてください。

また、frameへ飛ばすのであれば
panel.children().wrap(…
としてaタグを記述しているところにtarget属性をあわせて書けばフレーム内へのリンクとなります。

フレームの設置ページがGalleryviewを設置しているページとは違う場合（つまりgalleryview.html→shopping.htmlに飛びつつshopping.html内のiframeを書き換える、みたいな）はGalleryviewのカスタマイズではなくなります（GET値を取得してiframeのsrcにセットする、みたいな感じでしょうか）。

—–
私の力不足で大変恐縮ではございますが、「○月○日までに」と言われましてもお答えしかねる場合がございます点ご了承ください。

• 管理人
• 2012年11月30日 12:33 PM

たびたびすみません。
失礼しました。
気ばっかり焦って不快な思いをさせて申し訳ないです。

ファイルの方を指摘していただいた点に気を付けて再度アップいたしました。
画像は表示されるようになりましたが、リンクの方がついていません。
再度アドバイスをよろしくお願いいたします。

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/javascript/daibana.html

• purinn
• 2012年11月30日 1:03 PM

たびたび失礼します。
追記です。
画像へリンクを貼った一つ目の画像が表示されていません。

お忙し中ありがとうございます。
アドバイスをよろしくお願いいたします。

• purinn
• 2012年11月30日 1:06 PM

purinn 様
私が指摘した箇所が直っていないように見えますので何が悪いのかは判断できません。

・galleryview-3.0-dev.jsが私が用意したものではありません。開発者様のデフォルトのものそのままです。
・pan_images: true となっていますが、そのためにクリックイベントがバッティングしているのかもしれません。falseにしてみてください。

また、合わせて以下の点にも問題があります。

・DOCTYPE宣言はHTMLの1行目に記述しないといけません。改行が入って2行目に記述してあります。これによりmarginやpaddingなどに影響が出るケースがあります。

• 管理人
• 2012年11月30日 2:45 PM

作ってるうちにぐちゃぐちゃになったので作り直してみました。
そうしましたら、画像は表示されリンクも貼ったのですが、リンク切れの表示が出てしまいます。

再度アドバイスをお願いできますでしょうか？

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/basesample/daibana1.html

• purinn
• 2012年11月30日 3:13 PM

・pan_images: true
上記の行が何行目か大体の行数を教えていただけませんでしょうか？

なお、ファイルを作成しなおしたときに、作られるフォルダー上のファイルのコードを書き直せばよいのでしょうか？

当方、初心者に近いので、よろしくお願いいたします。よろしくお願いいたします。

• purinn
• 2012年11月30日 4:05 PM

purinn 様

詳しく検証する時間がないので予想になってしまいますが、画像類を「daibana1.files」というフォルダに設置していますが、フォルダ名に「.」（ドット）を使わないように変更してみてください。拡張子以外でドットを使用するといろいろ問題が起きる可能性があります（使わない前提で書かれているスクリプトが多いので）。

・pan_images: true

これはHTML内の$(function(){})で書いている部分の中にあります。

• 管理人
• 2012年11月30日 4:37 PM

アドバイスありがとうございます。
さっそく、フォルダ名を変更してみましたが、リンクをはった”winter　Bargain”のところにリンクははれていますがページが表示されません。
何かを間違っているのでしょうか？

お忙しいところ申し訳ごぜいませんが、アドバイスをよろしくお願いいたします。

• purinn
• 2012年11月30日 5:05 PM

アドをはるの忘れてました。

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/basesample/daibana2.html

• purinn
• 2012年11月30日 5:08 PM

purinn　様

リンクが飛ばない原因が分かりました。

GalleryViewのJSファイル内に

_img.wrap(‘‘);

という記述がありますが、これだと

../daibana2.files/リンク先

というふうにリンクが貼られます。今の貼り方ですと。

../daibana2.files/http://item.rakuten.co.jp/gainabazar/c/0000026140/

となり、リンク切れとなります。

_img.wrap(‘‘);

に直してみてください。

• 管理人
• 2012年11月30日 5:15 PM

初歩的質問で申し訳ございませんが、変更するファイルは、開いているHTMLファイルについているGallery Viewのjsでよいのでしょうか？

そのファイル内に//
                        if(_img.attr(‘data-link’)){
                            _img.wrap(‘‘);
                        }    
上記コードしか見つけれないのですが・・・。
変更するファイルを間違っているのでしょうか？

• purinn
• 2012年11月30日 6:03 PM

prinn 様

変更するのは
daibana2/jquery.galleryview-3.0-dev.js
というファイルです。

変更する箇所は

_img.wrap(‘‘);

であってます。これを

_img.wrap(‘‘);

にするだけです。

• 管理人
• 2012年11月30日 6:09 PM

お忙しい中早々のご回答ありがとうございます。

おかげでできるようになりましたが、当方IEの6、Windows８ですが、Windows7のIE9で確認をしたところ、リンクが飛ばずにエラーになってしまします。

どこか改善しないといけないのでしょうか？

たびたびすみませんが、アドバイスをよろしくお願いいたします。

• purinn
• 2012年11月30日 6:20 PM

新たな疑問が出てきました。
何度もすみません。

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/rakutenfremu.html

フレームページに組み込めましたが、クリックしたときにフレーム内でページが開いてしまい。フレーム外でページを開くことができません。

アドバイスをよろしくお願いいたします。

• purinn
• 2012年11月30日 6:41 PM

prinn　様

HTMLで見落としていましたが、1行目のDOCTYPE宣言の記述がおかしいです（昔は有効だったのかもしれません。同様の記述はあるようですが。）

に変更してみてください。

フレーム内で使う場合はtarget指定をすればいいので、

_img.wrap(‘‘);

を

_img.wrap(‘‘);

にすればフレームの外でリンクが変更されます。

• 管理人
• 2012年11月30日 6:51 PM

DOCTYPE宣言の記述を教えていただけませんでしょうか？

_img.wrap(‘‘);

を

_img.wrap(‘‘);

上記は二つのコードに変化がないように思うのですが・・・。

お忙しい中すみません。
よろしくお願いいたします。

• purinn
• 2012年11月30日 6:59 PM

すいませんタグが消えてました。

1行目のDOCTYPE宣言

＜!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”＞

※最初と最後の＜＞は半角にしてください。

target指定
_img.wrap(‘‘);

※最後にtargetというのを追加している

となります。

• 管理人
• 2012年11月30日 7:34 PM

お世話になりっぱなしですが、
修正してみたのですが、リンクがうまく開かないのとクリックしてページが表示されなくなりました。
フレームだけのページだとうまくいきましたが、楽天の商品ページに組み込むとうまくいきませんでした。

たびたびすみませんがアドバイスをお願いいたします。

http://item.rakuten.co.jp/gainabazar/a35jb170/

• purinn
• 2012年12月1日 1:48 PM

また、新たな難問が・・・。
お忙しいところすみませんが、最初の画像にはリンクを貼ることができましたが、2個目、3個目の画像にリンクを貼っているのですが、ページが表示されませんの状態になってしまいます。

すべての画像でリンクを機能させるのはできないのでしょうか？

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/rakutenfremu.html

• purinn
• 2012年12月1日 5:59 PM

prinn様

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(‘‘);
                    }

に変更してみてください。これで解決すると思います。

• 管理人
• 2012年12月2日 12:17 AM

夜遅くにすみません。
うまくリンクは飛ぶようになりましたが、

target=”_top”

にしていますが、フレーム内に表示されます。

夜中にすみませんが、アドバイスをお願いいたします。

• purinn
• 2012年12月2日 12:27 AM

614行目あたりに

panel.children().wrap(‘‘);

という記述があるのでこれを同様に

panel.children().wrap(‘‘);

としてください。

• 管理人
• 2012年12月2日 12:32 AM

大変ありがとうございました。
思い通りに出来上がりました。

感謝してもしきれないくらいです。

多大に時間を割いていただいてありがとうございます。

どうかお体をご自愛くださいませ。

• purinn
• 2012年12月2日 12:50 AM

大変参考になりました。ありがとうございます。

purinnさんのやりとりをみながら、同様に実装してみましたが、下記の３点を解消したいので教えてください。

①１枚目のリンクが飛ばない（ポインターマーク矢印）
作成したＨＴＭＬを、更新ボタンを押し１枚目の初期表示ではポインターが手のマークになりません。（２枚目からリンク可）なお、ＮＥＸＴやＰＲＥＶをすると１枚目もリンク可能になります。

②ＩＥ８ではshow_filmstripが不透明表示にならない
サンプルをＩＥ８で見たところ発見しました。
ＩＥ６，ＩＥ７はＯＫ！

③大きな画面にカーソルをのせている時にスライドを停止したい。
画像にオンマウス⇒スライドを停止。
画像にアウトマウス⇒スライドを始動。

よろしくお願い致します。

• ミカエル
• 2012年12月13日 5:24 PM

ミカエル　様
コメントいただきありがとうございます。

＞ ①１枚目のリンクが飛ばない（ポインターマーク矢印）
私の環境では1枚目のリンクも正常に設置できましたので、特定のブラウザによって起きるかもしれません（JSなのでOSとかサーバに関係する問題ではないと思われます）。よろしければブラウザの種類とバージョンをお伝えいただきますと解決が早いかも知れません。

なお、1枚目の画像に対するリンクは

//509行目あたりに追加
_img.fadeIn();
//以下の行を足します。1枚目の画像を読み込んだ時にリンクを設置します。data-link属性を保持させるのは後ほどの処理で
//data(‘link’)のほうが今っぽいですがどこかでclone(false)が走っているのかdataが受け継がれなかった
if(_img.attr(‘data-link’)){
_img.wrap(‘‘);
}

という部分で行なっています。この部分の記述漏れなどはないでしょうか？

＞　②ＩＥ８ではshow_filmstripが不透明表示にならない
気付いてませんでしたが、これはGalleryView本体でも発生する現象のようです。ちょっと根が深い問題で、jQuery本体の不具合と言ってもいいかもしれません。
透過の処理はIEの場合 filter:alpha(opacity=40) のようにfilterという属性を使っています。ただ、IE8以降では -ms-filter とベンダープレフィックスが必要なのですが、jQueryは単に filter として属性を付加しています。そのため透過処理が効かないという問題が発生しているようです。
なおIE9以降は opacity プロパティが有効なので filter は使いません（なので正常に動作する）。

対処法としては X-UA-Compatible でIE7モードとして動作させるぐらいしか思いつきません。いい解決策が見出だせず申し訳ありません。

＞ ③大きな画面にカーソルをのせている時にスライドを停止したい。
850行目あたりから始まる

bindActions: function() {…}

というファンクションの一番最後に

    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なのかを区別する必要があると思われます。

• 管理人
• 2012年12月14日 8:53 PM

管理人　様
回答ありがとうございます。

＞ ①１枚目のリンクが飛ばない（ポインターマーク矢印）
＞ 私の環境では1枚目のリンクも正常に設置できましたので、特定のブラウザによって起きるかもしれません（JSなのでOSとかサーバに関係する問題ではないと思われます）。よろしければブ＞ラウザの種類とバージョンをお伝えいただきますと解決が早いかも知れません。
＞なお、1枚目の画像に対するリンクは
＞//509行目あたりに追加
＞_img.fadeIn();
＞ //以下の行を足します。1枚目の画像を読み込んだ時にリンクを設置します。data-link属性を保持させるのは後ほどの処理で
＞//data(‘link’)のほうが今っぽいですがどこかでclone(false)が走っているのかdataが受け継がれなかった
＞if(_img.attr(‘data-link’)){
＞ _img.wrap(‘‘);
＞ }
＞という部分で行なっています。この部分の記述漏れなどはないでしょうか？

記述は問題ありませんでした。
ブラウザの確認を行ったところ

ｉｅ９(ﾊﾞｰｼﾞｮﾝ:9.0.8112.16421)　⇒　○
ｉｅ８(ﾊﾞｰｼﾞｮﾝ:8.0.7601.17514)　⇒　×
ｉｅ６(ﾊﾞｰｼﾞｮﾝ:6.0.2900.5512 )　⇒　×

尚、確認はローカル環境で行っております。
リンクの使用可否は、ブラウザ環境に依存するのでしょうか？
解決方法ございましたらご教授ください。

＞　②ＩＥ８ではshow_filmstripが不透明表示にならない
＞ 気付いてませんでしたが、これはGalleryView本体でも発生する現象のようです。ちょっと根が深い問題で、jQuery本体の不具合と言ってもいいかもしれません。
＞ 透過の処理はIEの場合 filter:alpha(opacity=40) のようにfilterという属性を使っています。ただ、IE8以降では -ms-filter とベンダープレフィックスが必要なのですが、jQueryは単に ＞filter として属性を付加しています。そのため透過処理が効かないという問題が発生しているようです。
＞ なおIE9以降は opacity プロパティが有効なので filter は使いません（なので正常に動作する）。
＞対処法としては X-UA-Compatible でIE7モードとして動作させるぐらいしか思いつきません。いい解決策が見出だせず申し訳ありません。

了解いたしました。

＞ ③大きな画面にカーソルをのせている時にスライドを停止したい。
＞ 850行目あたりから始まる
＞bindActions: function() {…}
＞というファンクションの一番最後に
＞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なのかを区別する必要があると思われます。

autoplay:trueの前提ですので完璧な回答です。
ありがとうございました。

• ミカエル
• 2012年12月15日 11:33 AM

ミカエル　様
1枚目がリンクにならない問題ですが、どうもこちらでは再現できません・・・・と言ってもIETesterでの確認なのでまともな環境とは言えないかもしれません（環境を用意できるとしてもVirtualPCになってしまいますが）

もしかしたら1枚目にリンクを貼るwrapの処理をsetTimeoutでずらすとうまくいくかも知れません。if(_img.attr….の部分を丸ごとsetTimeoutで囲って

                        setTimeout(function(){
                            if(_img.attr(‘data-link’)){
                                _img.wrap(‘‘);
                            }
                        },10);

としてはどうでしょうか？
また、もしかしたらGalleryViewのほかのオプションによる影響があるかもしれませんので、もし可能であればソースコードをどこかにUPしていただくことは可能でしょうか？

• 管理人
• 2012年12月19日 7:50 PM

GalleryViewの画像にリンクを付ける方法を探していてここにたどり着きました。

https://wood-roots.com/sample/galleryview/js/jquery.galleryview-3.0-dev.js
を使わせていただいてリンクを付けられるようになったのですが、panel_animation: ‘fade’,
を
panel_animation: ‘slide’,
に変えると一枚目の画像しかリンクが飛ばなくなってしまいます。

どこを修正すれば良いか分からないのでアドバイスいただけないでしょうか？

• dash
• 2013年1月17日 4:47 PM

dash　様

コメントいただきありがとうございます。
613行目あたりに

if(panel.children().attr(‘data-link’)){
                        panel.children().wrap(‘‘);
                    }

という記述を追加していますが、これはcase ‘fade’内にしか書いていません。同様の記述をcase ‘slide’内に追加してみてください。

具体的には
                    dom.gv_panels.eq(this.iterator).animate(
                        { left: oldPanelEnd },
                        { duration: this.opts.transition_speed, easing: this.opts.easing, complete: function(){ $(this).remove(); } }
                    );
                    //以下を追加する
                    if(panel.children().attr(‘data-link’)){
                        panel.children().wrap(‘‘);
                    }
                    
                    break;

となります。

• 管理人
• 2013年1月18日 1:15 AM

管理人様

すばらしいです。バッチリ解決しました。
貴重な回答ありがとうございました。

今後もためになる情報を期待しつつ、ブログチェックさせて頂きますね。

• dash
• 2013年1月18日 12:26 PM

こんにちは。
最新のjquery.galleryview-3.0-dev.jsではなく、jquery.galleryview-3.0.min.jsを使っております。
同様に大きい画像にリンクを貼りたいのですが、htmlにタグを入れるとサムネイルにリンクが設定されてしまう状態で困っております。
また、こちらの記事にあるような項目がjquery.galleryview-3.0.min.jsには見当たらず、もしわかるようでしたら教えていただきたいのですが・・・。

参考にしたURLはこちらです↓
http://blog.motoo.net/jquery.galleryview/sample_b.html

• いじ
• 2013年3月1日 6:39 PM

いじ様
コメントありがとうございます。
「jquery.galleryview-3.0.min.js」というのは改行やコメントをなくした圧縮版ですのでカスタマイズには向きません。
また、参考にされているURLのGalleryView.jsは旧バージョンのもので、最新バージョンとは大きく異なり同様の方法ではカスタマイズはできません。
他のプラグインを使うか最新版のGalleryView.jsを使用することをおすすめします。

• 管理人
• 2013年3月1日 7:49 PM

お世話になります。
galleryviewの大画像にリンクを貼りたく、こちらを使わせていただいております。
その中で、一部のリンクを外部リンク（target=”_blank”）にしたいのですが、うまくいかず困っています。
お忙しい中恐縮ですが、アドバイスをいただけますでしょうか。
よろしくお願いいたします。

• take
• 2013年8月2日 12:00 AM

take　様
コメントありがとうございます。

target=”_blank”にしたい場合は

//600行目あたりに追加
panel.children().wrap(‘‘);

という部分がaタグで囲っている部分ですので

panel.children().wrap(‘‘);

とすれば実現できます。

• 管理人
• 2013年8月2日 12:40 AM

管理人様

ご返信ありがとうございます。
試してみたのですが、こちらですと全てのリンクにtarget=”_blank”がついてしまうと思います。
一部のリンクだけに適用したいので、
できればhtml上で、target=”_blank”と記述したものが反映されると良いのですが可能でしょうか？
宜しくお願いいたします。

• take
• 2013年8月2日 10:58 AM

＞take　様
それぞれのtarget属性の内容を引き継ぐためには、target属性の内容を保持する必要があります。この記事のスクリプトでは一切target属性は考慮していないので、たとえば

this.href = img.parent(‘a’).attr(‘href’) || null;
//追加
this.target = img.parent(‘a’).attr(‘target’) || null;

のような感じでtarget属性を保持し、

if(panel.children().attr(‘data-link’)){…}

の部分でtarget属性によってaタグのフォーマットを書き換える（ifやswitchを使って）とすればいけるのではないでしょうか。

• 管理人
• 2013年8月6日 4:00 PM

管理人様

お世話になります。
アドバイスありがとうございました。
教えていただいたものを基に、

this.target = img.parent(‘a’).attr(‘target’) || null;

を追加、そしてaタグの記述部分を下記のように変更しました。

if(panel.children().attr(‘data-link’)){
    panel.children().wrap(‘‘);
} else if(panel.children().attr(‘target’)){
    panel.children().wrap(‘‘);
}
break;

ですがうまく動きません。
シンタックスエラーは無いようですが作り方に問題があるでしょうか。
たびたび申し訳ございません。
宜しくお願いいたします。

• take
• 2013年8月7日 7:40 PM

take様

this.targetにtarget属性の内容を保持するだけでなく、this.hrefの内容と同じくdata属性などで引き継がないとうまくいきません。

動作未検証ですがdata-target属性としてtargetの内容を保持する方法で考えてみましたので参考にしてみてください。

http://codetter.com/?p=976

• 管理人
• 2013年8月7日 8:57 PM

はじめまして。

お忙しい中大変申し訳ございません。

http://www.rakuten.ne.jp/gold/1stgift/index.html

このページで1枚目のリンクがどうしてもframe内になります。

投稿されている方々の質問に対してご回答されている内容も全て試したつもりですが、うまくいきません。

2枚以降は思い通りなのですが・・・・。

ご教授頂けると非常に助かります。

どうか何卒宜しくお願い致します・

• rin
• 2013年8月8日 8:10 PM

先ほど投稿させて頂いたものです。

記述ミスがあっただけで、うまくいきました。

申し訳ございません。お騒がせいたしました・・・。

素晴らしい記事に感謝しております！

• rin
• 2013年8月8日 8:17 PM

お世話になります。

リンクのtarget がうまくできず、悩んでいます。
管理人様が掲示されているアドレスのjs を反映させてみたのですが、画像自体が表示されなくなってしまいました。

html側では、
data-target=”_blank”とすればよいでしょうか。

よろしくお願いいたします。

• koji
• 2013年10月10日 8:36 AM

koji　さま
コメントありがとうございます。

HTML側はaに対して普段通りtarget属性を追記します。

という感じです。

画像が全く表示されないのはスクリプトがまったく実行されていないということだと思いますので、「;」「}」の抜けや文字コードがHTMLとJSで異なっているなどということはないでしょうか。
また、コンソール上にエラーメッセージが表示されていると思いますので、それを読んでみると解決の糸口がつかめるかもしれません。

• 管理人
• 2013年10月10日 5:58 PM

管理人さま

ご回答ありがとうございました。

html のa タグ内を変更し、
コード追記部分の
this.href = img.parent(‘a’).attr(‘target’) || null;
を
this.target = img.parent(‘a’).attr(‘target’) || null;
として、動作しました。

カスタマイズ、本当にありがとうございました。

• koji
• 2013年10月15日 5:03 PM

これ凄いですね。
一年半前に探しまわった時にはなかったので、自力で無理矢理リンクつけましたが、動作が怪しかったところでした。(笑)　参考にさせて頂きます。

• hiro
• 2013年10月23日 4:12 PM

ありがとうございます！

こういうの探していました。
本当に助かりました。

• ボウズ
• 2014年2月9日 12:10 AM

リンクを貼る方法探していまして大変助かりました！ありがとうございます！！

こちらのjsで1点気になった点をご質問させて頂いてもよろしいでしょうか。
「panel_animation: ‘slide’」に設定した状態で
フォーカスされているサムネイルをクリックすると、GalleryViewの大きな画像のスライド動作がおかしくなるようです（一枚だけ流れていってしまう…）元のデータからこの部分はおかしいようなのですが、もし原因がわかるようでしたら教えていただけると幸いです。

• yamada
• 2014年10月7日 6:15 PM

＞　yamada　様
コメントありがとうございます。
確かにデフォルトのGalleryViewでもカレントのサムネイルをクリックすると変な動きをしますね。

「カレントのサムネイルをクリックしたら何もしない」という処理を足すのが手っ取り早いのではないかと思います。

https://github.com/woodroots/GalleryView/blob/master/js/jquery.galleryview-3.0-dev.js

の923行目あたり
            dom.gv_filmstripWrap.delegate(‘.gv_frame’,’click.galleryview’,function(){
                var el = $(this),
                    i = el.data(‘frameIndex’);
                
                this.navAction = ‘frame’;
                self.showItem(i);
                return false;
            });

がサムネイルクリック時の処理になりますので、
            dom.gv_filmstripWrap.delegate(‘.gv_frame’,’click.galleryview’,function(){
                if($(this).find(‘.current’).size() === 0){
                    var el = $(this),
                    i = el.data(‘frameIndex’);
                    
                    this.navAction = ‘frame’;
                    self.showItem(i);
                }
                return false;
            });

と.currentがない場合のみ処理を行うというif文を追加します。

よかったら試してみてください。

• 管理人
• 2014年10月9日 9:23 PM

管理人さま

丁寧に解説して頂きましてありがとうございます。
無事、animationのslideが変な動作になるのをおさえることができました！
GalleryViewが使いやすくなって本当にうれしいです。

これからもブログの更新を楽しみにしております！

• yamada
• 2014年10月16日 10:32 PM