FC2ブログ
2015-04-28(Tue)

写真をポップアップさせる

ブログの画像を新しいタブやウィンドウで開かずにポップアップMonaBoxOpen.gif させたい

サンプル
MIL-SPEC MONKEY スカルマスク大佐
スカル フェイスマスク

【画像 拡大 ポップアップ html "fc2"】でググったら情報出て来た MonaFloorOpen.gif のでやってみた
がポップアップしなかったので…
テンプレートのソースをコピった くま ごめん 謝る

注意ページ読み込み中に画像をクリックするとポップアップせずに画像が開いてしまう

参考にしたサイト
しゃれこうべはしゃべらない
http://tntn3.blog.fc2.com/blog-entry-149.html

以下引用(改)

「Lightbox」っていうJavaScriptなんですね。簡単に説明してゆきます。

流れ
① スクリプト配布元からファイルをDL
② ファイルを一つ、その中を8箇所書き換える
③ ファイルを3つ、画像を4つアップロード※1
④ HTMLに使用するためのコードを4行挿入※2

だけです。

現時点での最新版は2.7ですが関係無いです。

※1※2 そのままだとポップアップしなかったのでソースをコピペしたバージョンに改変


DLしたzipファイルを解凍すると、css、js、imgというフォルダが有ります。

cssフォルダの中の lightbox.css をワードパッドで開きます。

で、次の語句を検索します。

../img/

8ヶ所あります。これをファイルのアップロード先ディレクトリのURLに置き換えます。

FC2 画像ファイルのアップロード先ディレクトリのURL

例えばですね、このブログの場合だと画像ファイルや音声ファイル等、すべて
http://blog-imgs-74-origin.fc2.com/p/i/e/pierre4/
というディレクトリに入ってます。(スラッシュ含む)※3

上のめんべいの写真だと
http://blog-imgs-74-origin.fc2.com/p/i/e/pierre4/menbei_comparison.jpg
の太字の部分がディレクトリですね。これはこのブログ内のファイルならすべて共通です。
なのでこれをコピー(スラッシュ含む)。

そしてlightbox.css内の url(../img/close.png) 等8ヶ所の太字部分をすべて置換します。

つまり url(http://blog-imgs-74.fc2.com/p/i/e/pierre4/ close.png)  みたいになればおkです。

何も考えず Ctrl+H(置換) から置き換えても同じです。※4

で、上書き保存。



③ ソースコピペ版に改変

jsフォルダの中にあるアップロードしたいファイルを改名します。FC2ブログの仕様上、ファイル名に拡張子が入ってるとアップロードできないので。

・jquery-x.x.x.min.js → jquery1_11.js
・lightbox.min.js → lightbox_min.js

に改名。まぁ分かれば好きに変えて良いんですけどね。

そんで
jquery1_11.js
lightbox_min.js
lightbox.css



imgフォルダ内の
close.png
loading.gif
next.png
prev.png

をアップロード。

Lightboxファイルをアップロード




④ ソースコピペ版に改変

FC2の管理画面の場合、左側に テンプレートの設定 という項目があるのでクリック。

中程に 「HTMLを編集」 って窓があります。
そこの <head> を1段改行して、

<script src="http://blog-imgs-74.fc2.com/p/i/e/pierre4/jquery1_11.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<!-- [lightbox] -->
<link href="http://blog-imgs-74.fc2.com/p/i/e/pierre4/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="http://blog-imgs-74.fc2.com/p/i/e/pierre4/lightbox_min.js"></script>
<!-- /[lightbox] -->


を挿入。

http://blog-imgs-74.fc2.com/p/i/e/pierre4/ の部分は各自さっきのcssファイルの置換と同じ要領で書き換え)


そしたら 「更新」 を押して保存。
これで使う前準備は整いました。



あとは画像を貼るときに、Lightboxを使うよー っていう指示を出すだけ。自動では使ってくれないので。まぁ書き換えだけです。

内容を理解しているかどうかはともかくとして、
記事を書くとき「ファイルを挿入」から画像を選ぶと、下のような文字列が挿入されます。

<a href="https://blog-imgs-74.fc2.com/t/n/t/tntn3/DSC_5354.jpg" target="_blank"><img src="https://blog-imgs-74.fc2.com/t/n/t/tntn3/DSC_5354s.jpg" alt="DSC_5354.jpg" border="0" width="400" height="265" /></a>

の太字部分を data-lightbox="group" に置換。"group"の中はどんな文字列でもいいですが、一つの記事で同じ文字列を使うと next と prev 機能が使えます。
グループ
これで使えるはず。

タイトルとか説明(キャプション)を表示したい場合は、

data-lightbox="group" の後ろに title="タイトルやキャプション" を挿入。

<a href="https://blog-imgs-74.fc2.com/p/i/e/pierre4/MSM_Skull_Mask_Multi-wrap_beret.jpg" data-lightbox="group" title="スカルマスク大佐"><img src="https://blog-imgs-74.fc2.com/p/i/e/pierre4/MSM_Skull_Mask_Multi-wrap_berets.jpg" alt="MIL-SPEC MONKEY スカルマスク大佐" border="0" width="135" height="180" /></a>

MIL-SPEC MONKEY スカルマスク大佐

になります

以上引用(改)。


※3 ファイル挿入アイコンFC2 ファイル挿入アイコンファイルアップロードからファイル管理を開くと保存先(ディレクトリ)のURLが分かる

※4 ワードパッドの置換で「すべて置換(A)」を使うと一発で置き換えられる
すべて置換(Lightbox.css)

theme : 写真ブログ
genre : ブログ

tag : ブログ 写真 画像 ポップアップ JavaScript HTML

comment form

管理者にだけメッセージを送る

comment

プロフィール

ピエ★ロ

Author:ピエ★ロ
ピエ★ログへようこそ!
ピエ★ロだな~もよろしく
Twitter使ってます!
このブログをリンクに追加する

pixiv【1432817】
カレンダー
03 | 2019/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
最近の記事
カテゴリー
月別アーカイブ
リンク
  • Favour Light

  • ソニーストア



    アウトドア&スポーツ ナチュラム
    Sony Music Shop

    日々の生活にhappyをプラスする|ハピタス
    RSSフィード
    ブロとも申請フォーム

    この人とブロともになる

    ブログ内検索
     


    ↑クリックお願いします



    Echo Spot


    Etsy


     

    日々の生活にhappyをプラスする|ハピタス