画像をポップアップ 「jQuery Image Flyout」設置方法

このブログでも画像を表示させるときに時々使っております「jQuery Flyout」という手法(左の画像をクリックしてください。ポップアップで大きく表示されます。)、たまにどのように設置するのかとのご質問をいただくことがあります。

「jQuery Flyout」については以前記事にしたことがあるのですが、使い方の備忘録ゆえ、設置方法は書いておりませんでした。
ご質問をいただく度にメールで説明していたのですが、今後同様の質問があった場合にこちらの記事へ誘導できるように記事にしておきたいと思います。

下記よりそれぞれファイルをダウンロードします。
それぞれのリンクを右クリックして「対象をファイルに保存」または「リンク先を保存」でダウンロードできます。
(2014年4月16日現在の最新バージョンで記事を書いています。)
2014041601.gif
 jQuery.js

「jQuery」は「1.x」と「2.x」バージョンがあるようですが、「2.x」バージョンはIE6・7・8をサポートしていないようですので「1.x」バージョンの方にしています。

2014041603.gif
 jQuery easing.jp

2014041602.gif
 jQuery image-flyout.js

FC2ではファイルをアップロードする場合、ファイル名にスラッシュやピリオドが入っているものは使えません。
ダウンロードしたファイルは「jquery-1.11.0.min.js」などのようにピリオドが入っていますので、それぞれ「.」の部分を「(ハイフン)」や「_(アンダーバー)」に変更してください。
拡張子が見えるようにしている場合は「.js」も表示されていますが、これは拡張子ですのでそのままで。(→「jquery-1-11-0-min.js」などに。)
他の2つのファイルも同様に名前を変更しておいてください。

2014041604.gifこれらをファイルのアップロード画面でアップロードします。

2014041605.gif「テンプレートの設定」→「HTML編集」で「</head>」を探し、その直前の行に下記を挿入します。

下記赤字URL部分はそれぞれアップロードしたURLです。
(「ファイル管理画面」の「ファイル情報」欄で確認できます。)

<script type="text/javascript" src="http://blog-imgs-x.fc2.com/x/y/z/abcdefg/jquery-1_11_0_min.js"></script>
<script type="text/javascript" src="http://blog-imgs-x.fc2.com/x/y/z/abcdefg/jquery-easing-1-3.js"></script>
<script type="text/javascript" src="http://blog-imgs-x.fc2.com/x/y/z/abcdefg/jquery-flyout-1-2-min.js"></script>
<script type="text/javascript">
$(function() {
$('div#gallery a').flyout();
});
</script>


2014041606.gifこんな感じになります。
←このテンプレートサンプルではバージョンは違いますが、すでに(初期の状態で)「jQuery」が組み込まれていますので(赤色点線部分)そちらを使用することにして、ダウンロードしたjQueryファイルは使っておりません。
テンプレートにjQueryが使われていない場合は「jquery-1_11_0_min.js」の行も挿入してください。

2014041607.gif「テンプレートの設定」→「CSS編集」で、一番の下の部分に下記を挿入してください。

.gallery { position:relative; border:1px solid #; background-color:#; margin-top:20px; width:280px; }
.gallery ul { margin:10px 0; padding:0 0 0 10px; list-style:none; }
.gallery li { display:inline; margin:0; padding:0 10px 0 0; height:1px;}
.gallery a { display:inline; margin:0; padding:0;}
.gallery img { position:relative; margin:0; border:1px solid #ccc; }
#loader { border:8px solid #333;}


2014041610.jpg主な数値の対応箇所は左の画像の通りです。
いろいろと数値やスタイルを変えてみて、お好みの装飾(?)にしてくださいね。


使い方は通常通り画像を挿入して上下を赤字のタグを記入します。

<div id="gallery" class="gallery">
<a href="https://blog-imgs-45.fc2.com/s/a/k/sakuraxren/10101110.jpg" target="_blank"><img src="https://blog-imgs-45.fc2.com/s/a/k/sakuraxren/10101110s.jpg" alt="10101110.jpg" border="0" width="200" height="133" /></a>
</div>



関連記事

4 Comments

sudachi  

お手数をお掛けしました。

れん様~こんばんは。

早速の掲載有難うございました。
ブログでは簡単に書くだけで HTML、CSS、は開けたことがありません。難しそうですが頑張ってみます。
表示は見やすくて良いですが簡単ではなさそうですね。
有難うございました。

2014/04/19 (Sat) 00:21 | EDIT | REPLY |   

れん  

sudachi様

sudachiさん、こんにちは。

ここで説明しているテンプレートサンプル(HTML編集・CSS編集)はsudachiさんが今使っておられるテンプレートを使っています。
ですので、これらの画像の通りに設置していただければ大丈夫かと思います。

もしもわからないところがあればいつでもご連絡くださいね。

2014/04/19 (Sat) 13:53 | EDIT | REPLY |   

はんのすず  

初めてコメントさせていただきます

訪問者リストから、れんさんのブログにたどりつきました。ここにはイイナーと思う記事ばかりでした。もっと早く知りたかったです。これからもよろしくお願いします。
jQuery Flyout、さっそく試してみましたがうまく動作しません。サムネイルをクリックしてから大きい画像表示、画像クリックではもとに戻りません。デンプレートはph-shell2です。
実は昨夜はtooltipのもやってみたのですがだめでした。れんさまのブログ記事をそのままコピペしてみてもです。画像をクリックしなければ大きい画像がでません。このときのテンプレートはph-simple2のコピーです。基礎知識もなく、原因がよくわかりません。
ご相談したくてコメントしました。よろしくお願いします。

2015/07/06 (Mon) 13:55 | REPLY |   

れん  

はんのすず 様

はんのすず 様、ご訪問いただきありがとうございます。

はんのすず様の使用されたテンプレートをダウンロードして試してみました。
私が記事にしたままでは、Flyoutの方は使えるには使えたのですが、表示がちょっとおかしかったり、上手く動かなかったり、挙動不審でした。
このテンプレートの何かと相性が悪いのかもしれません。

解決方法がわかりましたのでお知らせいたします。
jQueryの記述を少し変えるとできるようになりました。
$(function() {
$('div#gallery a').flyout();
});

の部分を
(function($){
$('div#gallery a').flyout();
})(jQuery);

に変更すると支障なく使えるようになりました。

tooltipの方は試してみたところ一発で使えました。
ひょっとしたら、jQuery本体を二重で設置していませんか?
Flyoutとtooltipの両方にjQuery本体を使っていますが、こちらはFlyoutの説明のものかtooltipの説明のもののどちらかのみでOKですので、二重で設置している場合は片方を削除してください。

ph-shell2は
http://sakuraxren.blog103.fc2.com/?template=ph-shell2-x&index

ph-simple2は
http://sakuraxren.blog103.fc2.com/?template=ph-simple2-x&index

の「sample」の記事(7月4日の記事)でご確認ください。

「▼ READ MORE ▼」をクリックしていただくと、どこに何を設置すればよいかわかるようにしています。

同じ作者様のテンプレートですので、ph-shell2もph-simple2も同じ部分に同じものを設置してください。

もしも不明な点などございましたら、お手数ですがまたご連絡くださいね。

なお、このプレビューは1ページ目しか見れないと思いますので、新しく記事をアップしていき、このsampleの記事が2ページ目に流れてしまった時には私が表示しているテンプレートでしか見れなくなりますのでご了承お願い致します。

記事にパスワードをかけておりますので、パスワードははんのすず様のブログにご報告に参ります。

2015/07/06 (Mon) 18:33 | EDIT | REPLY |   

Post a comment