カテゴリ:   CSS/Jquery
タグ:

※この記事はlightbox2.7.1の導入方法です。
lightbox2-masterの場合は新しく書いたのでこっちをどうそ

---------------------------------------------

わかんなすぎてゲロ吐きそうだった

lightboxっつーのは

2r2rij8

↑これクリックしたときみたいに、ページ遷移させないでフルサイズ表示させるやつな


導入まで

lightbox2
1)http://lokeshdhakar.com/projects/lightbox2/
ここでとりあえずソース一式DLしてくる
まぁここ読めって話なんだけど、

2)lightbox-2.7.1 みたいな圧縮フォルダ落とせると思うので、
解答するとCSS、img、jsのフォルダが3つと、index.html、README.markdownとかいうのが入ってます

3)このうち必要なのは
JSフォルダ
 jquery-1.11.0.min.js
 lightbox.min.js

CSSフォルダ
 lightbox.css

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

このへんをサーバーにうpする。ライブドアブログの場合は画像アップローダであげちゃうとディレクリやらファイル名やらがごっちゃごちゃになるので、ファイルとしてアップするといいと思われます。
とりあえずいっかいアップしたらlightbox.cssの中に書いてあるファイルパスと一致してるかどうか確認しておくのよ。


4)アップが終わったら、ヘッダーあたりに
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>

これを書いとく。jsのurlは自分のブログにアップした時のURLに変更すべし

5)次は自分のブログのCSSに
<link href="css/lightbox.css" rel="stylesheet" /> 

を書く。これもパス変えてるなら修正しておく。


これで準備完了。超簡単やな!



6)実際に使う場合
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
ブログ書くときに、lightboxで表示させたい画像に、まぁこういうタグを書くわけよ

画像っていうかaタグ

これ結構ミソやぞ、imgタグじゃなくてaタグな!

赤字のところが付け加える部分で、"image-1"の部分は好きな単語でおk

同じ単語のものが左右のスライドショーで見られる感じ


簡単カスタマイズ


7)いちいちタグ毎回書くの?????クソめんどくさいんだが????

だよな、俺もそう思った

だからもうここは楽して置換しようぜ、ってことで

ライブドアブログの場合は

ブログ設定 > カスタムJS

のところに

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.article-body-inner a').each(function(i){ //.article-body-inner の中の aタグ探せ
        if( $(this).find('img').length ) {       //そのaタグの中にimgはあるか?
            $(this).attr('data-lightbox','number' + (i+1)); //あるならdate-lightbox="number1"をつけろ
        }
    });
});
</script>


これ書けばテキストリンクなのか画像リンクなのかを判別してlightboxを適用してくれるナイスガイ!

適当に記事書いて、サムネイル化されちゃう画像の場合は勝手にlightboxに毎回してくれるっていうスグレモノよ!!!

こいつぁああああすげええええええええ!!!!

※一応これはi+1で自動で画像ごとに違うナンバリングされて左右のスライドショーにならないようになってます

article-body-innerってタグはもしかしたらテンプレートによって違うかもわからん

とりあえずブログ本文のところのタグ引っ張ってくればおk



参考にさせてもらったブログ
http://black-flag.net/jquery/20110517-3051.html
http://dim5.net/css-framework/using-lightbox.html



 

Comment & Trackbacks

コメント
コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット

関連記事

新着一覧