GalleryViewの大きな画像にリンクを設置するカスタマイズ

GalleryView - Default Demo

2013.03.27追記
カスタマイズしたJavascriptファイルをGitHubで公開しました。
下記の改修例はpanel_animationオプションをfadeだけしか考慮していませんでしたが、fade,slide,clossfadeすべてでリンクが機能するようになっています。
GitHubを見る限りリンクを設置したいという要望は議論されていたようですが、反映にはいたっていないようです(作者の方が対応しきれてないっぽい)。

GalleryViewは見た目も美しいギャラリー用のjQueryプラグインですが、バージョンアップしてからデザイン性は進化したもののカスタマイズ性が低くなりました。

特に大きな画像にリンクを設置することができなくなった(旧バージョンもできなかったかも?)のが非常に不満でしたので、そこを改善するためのカスタマイズを行いました。

同じ悩みを持っている人は他にもいるようです。

galleryviewのjavascriptについ
下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。ご教授願います。

HTMLは特に修正する点はありません。imgに対してリンクを設置するだけです。
(js本体を修正しない場合、以下のようにリンクを設置してしまうとアニメーションが実行されませんのでご注意ください)

jquery.galleryview-3.0-dev.jsを以下のように修正します。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

ふもも さんより
ステキ情報を載せてくださってありがとうございます♪
すごく役立ちました~!
ヤト さんより
解決しました!!!
ありがとうございます(*><*)
マシュー さんより
ずっと解決できなくて困っていました!
初心者なのですごく助かります!ありがとうございます!
もう一歩なんですがどうしても一枚目の画像しかリンクが飛びません;
よろしければ解決策をお願い致します。
管理人 さんより
マシュー様

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

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

また、JSファイルそのものは以下のURLよりダウンロードできますのでそのままご利用いただいてもかまいません。
http://wood-roots.com/sample/galleryview/js/jquery.galleryview-3.0-dev.js
purinn さんより
画像にリンクを張るところで苦労してます。
できれば前後のコードを書いていただけると正確にコード挿入するところがわかりますので、ありがたいです。

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

どうしたらよいでしょうか?
アドバイスをお願いいたします。
管理人 さんより
purinn 様
コメントありがとうございます。

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

現状では判断できないので、もし可能であれば設置したページを実際に見せていただけると解決策をアドバイスできるかと思います。
purinn さんより
回答ありがとうございます。
現状見れる状態でアップしているアドレスです。

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

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

また、フレームページに組み込むつもりですので、フレームページを開いたときにフレーム内へ表示されないようにしたいとも思っております。
12月1日中に何とか形にしたいと思っておりますのでアドバイスをよろしくお願いいたします。
管理人 さんより
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にセットする、みたいな感じでしょうか)。

-----
私の力不足で大変恐縮ではございますが、「○月○日までに」と言われましてもお答えしかねる場合がございます点ご了承ください。
purinn さんより
たびたびすみません。
失礼しました。
気ばっかり焦って不快な思いをさせて申し訳ないです。

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

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/javascript/daibana.html
purinn さんより
たびたび失礼します。
追記です。
画像へリンクを貼った一つ目の画像が表示されていません。

お忙し中ありがとうございます。
アドバイスをよろしくお願いいたします。
管理人 さんより
purinn 様
私が指摘した箇所が直っていないように見えますので何が悪いのかは判断できません。

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

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

・DOCTYPE宣言はHTMLの1行目に記述しないといけません。改行が入って2行目に記述してあります。これによりmarginやpaddingなどに影響が出るケースがあります。
purinn さんより
作ってるうちにぐちゃぐちゃになったので作り直してみました。
そうしましたら、画像は表示されリンクも貼ったのですが、リンク切れの表示が出てしまいます。

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

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/basesample/daibana1.html
purinn さんより
・pan_images: true
上記の行が何行目か大体の行数を教えていただけませんでしょうか?

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

当方、初心者に近いので、よろしくお願いいたします。よろしくお願いいたします。
管理人 さんより
purinn 様

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

・pan_images: true

これはHTML内の$(function(){})で書いている部分の中にあります。
purinn さんより
アドバイスありがとうございます。
さっそく、フォルダ名を変更してみましたが、リンクをはった”winter Bargain”のところにリンクははれていますがページが表示されません。
何かを間違っているのでしょうか?

お忙しいところ申し訳ごぜいませんが、アドバイスをよろしくお願いいたします。
purinn さんより
アドをはるの忘れてました。

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/basesample/daibana2.html
管理人 さんより
purinn 様

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

GalleryViewのJSファイル内に

_img.wrap('<a href="../daibana2.files/' + _img.attr('data-link') + '" rel="nofollow"></a>');

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

../daibana2.files/リンク先

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

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

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

_img.wrap('<a href="' + _img.attr('data-link') + '" rel="nofollow"></a>');

に直してみてください。
purinn さんより
初歩的質問で申し訳ございませんが、変更するファイルは、開いているHTMLファイルについているGallery Viewのjsでよいのでしょうか?

そのファイル内に//
if(_img.attr('data-link')){
_img.wrap('<a href="../daibana2.files/' + _img.attr('data-link') + '" rel="nofollow"></a>');
}
上記コードしか見つけれないのですが・・・。
変更するファイルを間違っているのでしょうか?
管理人 さんより
prinn 様

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

変更する箇所は

_img.wrap('<a href="../daibana2.files/' + _img.attr('data-link') + '" rel="nofollow"></a>');

であってます。これを

_img.wrap('<a href="' + _img.attr('data-link') + '" rel="nofollow"></a>');

にするだけです。
purinn さんより
お忙しい中早々のご回答ありがとうございます。

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

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

たびたびすみませんが、アドバイスをよろしくお願いいたします。
purinn さんより
新たな疑問が出てきました。
何度もすみません。

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

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

アドバイスをよろしくお願いいたします。
管理人 さんより
prinn 様

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



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

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

_img.wrap('<a href="' + _img.attr('data-link') + '" rel="nofollow"></a>');



_img.wrap('<a href="' + _img.attr('data-link') + '" rel="nofollow"></a>');

にすればフレームの外でリンクが変更されます。
purinn さんより
DOCTYPE宣言の記述を教えていただけませんでしょうか?

_img.wrap('<a href="' + _img.attr('data-link') + '" rel="nofollow"></a>');



_img.wrap('<a href="' + _img.attr('data-link') + '" rel="nofollow"></a>');

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

お忙しい中すみません。
よろしくお願いいたします。
管理人 さんより
すいませんタグが消えてました。

1行目のDOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

target指定
_img.wrap('<a href="' + _img.attr('data-link') + '" target="_top" rel="nofollow"></a>');

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

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

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

http://item.rakuten.co.jp/gainabazar/a35jb170/
purinn さんより
また、新たな難問が・・・。
お忙しいところすみませんが、最初の画像にはリンクを貼ることができましたが、2個目、3個目の画像にリンクを貼っているのですが、ページが表示されませんの状態になってしまいます。

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

http://www.rakuten.ne.jp/gold/gainabazar/rakutenivent/rakutenfremu.html
管理人 さんより
prinn様

jquery.galleryview-3.0-dev.js内の613行目あたりに

if(panel.children().attr('data-link')){
panel.children().wrap('<a href="../daibana2.files/' + panel.children().attr('data-link') + '" rel="nofollow"></a>');
}

という記述があります。これを

if(panel.children().attr('data-link')){
panel.children().wrap('<a href="' + panel.children().attr('data-link') + '" target="_top" rel="nofollow"></a>');
}

に変更してみてください。これで解決すると思います。
purinn さんより
夜遅くにすみません。
うまくリンクは飛ぶようになりましたが、

target="_top"

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

夜中にすみませんが、アドバイスをお願いいたします。
管理人 さんより
614行目あたりに

panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"></a>');

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

panel.children().wrap('<a href="' + panel.children().attr('data-link') + '" target="_top"></a>');

としてください。
purinn さんより
大変ありがとうございました。
思い通りに出来上がりました。

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

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

どうかお体をご自愛くださいませ。
ミカエル さんより
大変参考になりました。ありがとうございます。

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

①1枚目のリンクが飛ばない(ポインターマーク矢印)
作成したHTMLを、更新ボタンを押し1枚目の初期表示ではポインターが手のマークになりません。(2枚目からリンク可)なお、NEXTやPREVをすると1枚目もリンク可能になります。

②IE8ではshow_filmstripが不透明表示にならない
サンプルをIE8で見たところ発見しました。
IE6,IE7はOK!

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

よろしくお願い致します。
管理人 さんより
ミカエル 様
コメントいただきありがとうございます。

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

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

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

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


> ②IE8では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なのかを区別する必要があると思われます。
ミカエル さんより
管理人 様
回答ありがとうございます。

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

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

ie9(バージョン:9.0.8112.16421) ⇒ ○
ie8(バージョン:8.0.7601.17514) ⇒ ×
ie6(バージョン:6.0.2900.5512 ) ⇒ ×

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


> ②IE8では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の前提ですので完璧な回答です。
ありがとうございました。
管理人 さんより
ミカエル 様
1枚目がリンクにならない問題ですが、どうもこちらでは再現できません・・・・と言ってもIETesterでの確認なのでまともな環境とは言えないかもしれません(環境を用意できるとしてもVirtualPCになってしまいますが)

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

setTimeout(function(){
if(_img.attr('data-link')){
_img.wrap('<a href="' + _img.attr('data-link') + '"></a>');
}
},10);

としてはどうでしょうか?
また、もしかしたらGalleryViewのほかのオプションによる影響があるかもしれませんので、もし可能であればソースコードをどこかにUPしていただくことは可能でしょうか?
dash さんより
GalleryViewの画像にリンクを付ける方法を探していてここにたどり着きました。

http://wood-roots.com/sample/galleryview/js/jquery.galleryview-3.0-dev.js
を使わせていただいてリンクを付けられるようになったのですが、panel_animation: 'fade',

panel_animation: 'slide',
に変えると一枚目の画像しかリンクが飛ばなくなってしまいます。

どこを修正すれば良いか分からないのでアドバイスいただけないでしょうか?
管理人 さんより
dash 様

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

if(panel.children().attr('data-link')){
panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"></a>');
}

という記述を追加していますが、これは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('<a href="' + panel.children().attr('data-link') + '"></a>');
}

break;

となります。
dash さんより
管理人様

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

今後もためになる情報を期待しつつ、ブログチェックさせて頂きますね。
いじ さんより
こんにちは。
最新のjquery.galleryview-3.0-dev.jsではなく、jquery.galleryview-3.0.min.jsを使っております。
同様に大きい画像にリンクを貼りたいのですが、htmlに<a>タグを入れるとサムネイルにリンクが設定されてしまう状態で困っております。
また、こちらの記事にあるような項目がjquery.galleryview-3.0.min.jsには見当たらず、もしわかるようでしたら教えていただきたいのですが・・・。

参考にしたURLはこちらです↓
http://blog.motoo.net/jquery.galleryview/sample_b.html
管理人 さんより
いじ様
コメントありがとうございます。
「jquery.galleryview-3.0.min.js」というのは改行やコメントをなくした圧縮版ですのでカスタマイズには向きません。
また、参考にされているURLのGalleryView.jsは旧バージョンのもので、最新バージョンとは大きく異なり同様の方法ではカスタマイズはできません。
他のプラグインを使うか最新版のGalleryView.jsを使用することをおすすめします。
take さんより
お世話になります。
galleryviewの大画像にリンクを貼りたく、こちらを使わせていただいております。
その中で、一部のリンクを外部リンク(target="_blank")にしたいのですが、うまくいかず困っています。
お忙しい中恐縮ですが、アドバイスをいただけますでしょうか。
よろしくお願いいたします。
管理人 さんより
take 様
コメントありがとうございます。

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

//600行目あたりに追加
panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"></a>');

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

panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"    target="_blank"></a>');

とすれば実現できます。
take さんより
管理人様

ご返信ありがとうございます。
試してみたのですが、こちらですと全てのリンクにtarget="_blank"がついてしまうと思います。
一部のリンクだけに適用したいので、
できればhtml上で、target="_blank"と記述したものが反映されると良いのですが可能でしょうか?
宜しくお願いいたします。
管理人 さんより
>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を使って)とすればいけるのではないでしょうか。
take さんより
管理人様

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

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

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

if(panel.children().attr('data-link')){
panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"></a>');
} else if(panel.children().attr('target')){
panel.children().wrap('<a href="' + panel.children().attr('data-link') + '"></a>');
}
break;

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

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

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

http://codetter.com/?p=976
rin さんより
はじめまして。

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

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

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

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

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

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

どうか何卒宜しくお願い致します・
rin さんより
先ほど投稿させて頂いたものです。


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

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

素晴らしい記事に感謝しております!
koji さんより
お世話になります。

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

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

よろしくお願いいたします。
管理人 さんより
koji さま
コメントありがとうございます。

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

<ul id="myGallery">
         <li><a href="http://www.yahoo.co.jp" target="_blank"><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a>
</ul>

という感じです。

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

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

html のa タグ内を変更し、
コード追記部分の
this.href = img.parent('a').attr('target') || null;

this.target = img.parent('a').attr('target') || null;
として、動作しました。

カスタマイズ、本当にありがとうございました。
hiro さんより
これ凄いですね。
一年半前に探しまわった時にはなかったので、自力で無理矢理リンクつけましたが、動作が怪しかったところでした。(笑) 参考にさせて頂きます。
ボウズ さんより
ありがとうございます!

こういうの探していました。
本当に助かりました。
yamada さんより
リンクを貼る方法探していまして大変助かりました!ありがとうございます!!

こちらのjsで1点気になった点をご質問させて頂いてもよろしいでしょうか。
「panel_animation: 'slide'」に設定した状態で
フォーカスされているサムネイルをクリックすると、GalleryViewの大きな画像のスライド動作がおかしくなるようです(一枚だけ流れていってしまう…)元のデータからこの部分はおかしいようなのですが、もし原因がわかるようでしたら教えていただけると幸いです。
管理人 さんより
> 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文を追加します。

よかったら試してみてください。
yamada さんより
管理人さま

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

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