スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



バナーリンクフリー      こちらもどうぞ    

訪問有り難う御座いました。




-------- [--] :    スポンサー広告        [記事編集] ▲TOP▲

興味有る方にLightbox設置手順

Lightbox plus設置手順

※写真をどう拡大表現するか設定したものを簡単に書いてみました。
 下記リンク先に詳細が書かれていますが合わせて確認頂けば簡単に処理できると考えます。
---------- Lightbox plus 』ダウンロードサイトのリンクは下部に------
           ----------ダウンロードサイト----------
※あくまでもご紹介です。自己責任でお願い致します。
・・・不慣れの方はテンプレートの複製を作成しておきましょう!!・・・

≫同一タブ内で写真を拡大表示されたい方は【続き】をどうぞ!!≪

管理者

早速手順を簡単に

1、上記ダウンロードサイトからダウンロードしてください。(3.2MB)
2,ダウンロードファイルを解凍します。ightbox_sample.zipを解凍ソフトで解凍
Book-0001.jpg
3,解凍するとsampleファイル内には下記ファイルが有ります。
  赤丸印ファイルを使用しますが他は不要ですので削除してください。
Book-0002.jpg
4,resourceファイル内の画像(下記PNG・GIF画像)をアップロードする。
  写真と同じ様にブログにアップします。
 各画像のパスをテキストエデッタ等にメモっておきましょう。(URL・・・)
Book-0003.jpg
5,下記は不要ファイルですので削除してください。
Book-0004.jpg
6,メモったパスを使い下図CSSファイルを書き換えます。(エデッタで開き最下部に在ります)
注意 " ’; :等 削除しないように!!すべて残すこと誤って削除しないように注意してください。
◆lighboxの書き換え2ファイル
Book-0005.jpg
◆lighbox_plusの書き換え
・アップロード画像とimgを間違いのないように注意しましょう。
lighbox_plus.jpg
赤下線部分を書き換えましょう。終了すればアップロードする。

◆lighbox_plus_miniの書き換え
lightbox_plus_mini.jpg
赤線部分を書き換えましょう。終了すればアップロードする。

注意部分
         ★★★CSSファイルminiを設定すること。★★★
Book2-0003.jpg


アップロードした画面(FC2ブログ)下図
Book1-0001.jpg


ブログテンプレートにスプリクトを追加します。

■HTMLに書き込めばOK(注意事項は図を確認してください)
Book1-0002.jpg

最後にFC2ブログの「テンプレートの設定」メニューでテンプレートのHTMLを編集します。
・次の2行を追加します。各行共に頭に < を付けてください。
 1行目 script type="text/javascript" src="【アップロードした「lightbox_plus_mini.js」ファイルのURL】">
 2行目 /script>
ブログ表示上【 < 】を頭に付けると表示されませんのでお手数ですがコピーしてから付けてください。
 


最後に環境設定

・ブログの環境設定をしてください。FC2ブログの場合は
  管理ページ⇒環境設定⇒ブログの設定⇒投稿の設定⇒画像のリンク
   元画像にリンクさせてに設定




      -----別窓を開かず画像を拡大表示する方法 - 使い方-----

例)
"http://blog-imgs-50.fc2.com/m/i/t/mituminesan/IMG_0086.jpg" rel="lightbox[roadtrip]"
roadtripはグループ名ですのでお好きな名称を付けてグループ化してください。
target="_blank"をrel="lightbox"に書き換えれば拡大します。

又、グループ化して表示したければrel="lightbox[グループ名]"で表示します。
  表示順番は#・・12345と順番番号を付加してやります。

「lightbox_plus.js」ファイルは
そのままでは関連ファイルが同一ディレクトリにないと動かせません。

この記事では応用が利くよう、
関連ファイルが別ディレクトリでも動かせる方法を紹介しています。

また、「lightbox_plus.js」配布元のLightbox Plusには、
その他のカスタマイズ例も紹介されていますので参照してください。。

この説明で解りにくい場合は
多々ネットで紹介されていますので参照してください。
 
参考させて頂いたブログ
・アクアラングウエスタンver.9.2様 URLリンクは  アクアラングウエスタンver.9.2
・ExSEO Blog様 URLリンクは  ExSEO Blog

☆---------------------------------------☆---------------------------------------☆

以上で指定した写真が拡大表示されます。
   特定の写真やまとめて拡大表示にご使用ください。
   環境設定で元画像にリンクさせてに設定
   アップロードは大きいサイズが優位です。fc2ブログ最大500kb以内で大きいサイズで登録しましょう。

単独表示例  May J  元画像は114KB (1220 x 914)で登録(アップロード)
f52132588eace8.jpg

グループ表示事例は、私の前の記事の写真で確認し同様であれば設定成功です。

追記
IE8では正常な表示が出来ない様です。
 なんともIE嫌いな私は・・・ファイヤーフォックスが一般WEB用、ブログはグーグル使用してます。
 IE8の私のPCも意図した表示になりませんね。
 設定変更:ツール→互換表示の設定→互換表示ですべてのWebサイトを表示する。
 ダメですね・・・拡大表示するが意図した表示ではないです。
 IEは遅い、問題多し、拡張機能が少ない・・・でも一番使われているのは理由が?

まあ・・・あまり考えず 大好きな May Jでも聞いてみますか・・・
     バラード系はとても良いですよ
懐かしい曲ですが・・・


 管理者




バナーリンクフリー      こちらもどうぞ    

訪問有り難う御座いました。




2013-08-18 [日] :    その他 トラックバック : [0] :    コメント :[0] :     [記事編集] ▲TOP▲
コメントの投稿
非公開コメント

« next  ホーム  prev »

 /\/\安 常 処 順/\/\  




記事・リンク・検索


プルダウン 降 順 昇 順 年 別

10月 |2017年11月| 12月
- - - 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 - -


≪★≪≪≪≪≪☆≫≫≫≫≫★≫



全 記 事 表 示


山域・山名別索引

ブログ開始前山行記録―非登載

お気に入りブログ


---参考閲覧させて頂いております---

山行データが豊富/正確で写真が素晴らしい

奥利根の山々のデータと写真が凄い




-----時々参加させてもらいます。-----

気象情報(みなかみ町)

現 在 時 刻


関東週間天気予報




群馬の雨雲の動き


プロフィール


とっしゃん

Author:とっしゃん


・大きな病気をしてしまい健康管理の為
 25年ぶりに始めた里山散歩記録。
 山々の美しさ、健康に感謝して・・・
 時には頑張ってメジャーな山へ
・写真撮影勉強中・・撮影枚数と感性が・
 残念ながら極端に乏しい様です。

ブロとも申請フォーム


とっしゃんブログ友達になる

メール(管理者のみ閲覧)






来訪者数


どうぞ、またのお越しを

QR コード

QR

今日は?


四 字 熟 語

文字クイックで次へ


カーソルONで読みと意味表示

私も愛用 此からは必須

虫除けはやっぱりハッカ油100%
汗の脱臭・余ったらお風呂で清涼感を!!
■虫除けはこれ

高度計付時計・・・良さそう


当方使用 スントオールブラックは電池が短命 私のオールブラックと変わらない

広  告


無理せず楽しい山行を!!

ホームページへ戻る
⌒*⌒*⌒*⌒*⌒*⌒*⌒*⌒*⌒*⌒*⌒ 
///無理のない計画・安全装備・健康管理///
    マナーを守り楽しい山行

・余裕を持った計画・行動を心掛ける。
・季節に合った服装・装備の点検。
・地図・コンパスは持参しましょう。

オヤジ応援団

Mayj.



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。