カテゴリ:   CSS/Jquery
タグ:

何やら前書いた記事通りにやってもできないんですけど…っていうメッセージをもらったのでちょっと見てみたところ、lightbox2のバージョンが前回とは変わっていて、導入フローがちょっとだけ変わってたみたいです。

ということで再度説明。

■1)lightbox2本体を入手

本家サイトに行ってlightbox2を入手してきます。
http://lokeshdhakar.com/projects/lightbox2/

step1


lightbox2-master.zipというファイルがDLできると思うので、解凍します。




■2)必要なファイルをアップしていきます

必要なファイルは「src」フォルダ内の
step2-1

全部と
step2-2

「dist」フォルダ>「js」フォルダ内の
step2-3

lightbox-plus-jquery.js
step2-4

です。




要するに必要なのは


dist
 └js
  └lightbox-plus-jquery.js

src
 ├css
 | └lightbox.css
 |
 ├js
 | └lightbox.js
 |
 └imgages
    ├close.png
    ├loading.png
    ├next.png
    └prev.png
    
これだけ


■3)livedoorblogにアップしていく

画像/ファイル → ファイル管理 →フォルダを作る
step3

でcss、js、imagesのフォルダをそれぞれつくる


こう
step3-2


そしたらそれぞれのフォルダにさっきのファイルをアップしてく
step3-4

繰り返し

■4)クラス名調べる

とりあえず後で使うので、記事本文のcssのクラス名を調べにいきます。
※lightboxを適用させたい画像が、どのclassに内包されているかを調べます


ブログ設定>カスタマイズ>個別記事ページ
step4-1


その中で<!-- 記事本文 -->~<!-- /記事本文 -->がブログ本文が書かれる個所です。
そのうち<$ArticleBodys$>が本文(画像含む)にあたる個所なので、
<$ArticleBodys$>に最も近いclassを抜けばいいわけです。

なのでこの場合はarticle-body-innerですね。
step4-2

ここは使ってるテンプレートによってクラス名が違う可能性があるので、絶対にarticle-body-innerというわけではないかもしれません。
なので各自ここは調べてください。


■5)ファイルを読み込ませる

では実際に登録したjsやcssを読み込んでいきます。
とりあえずブログ全体に適用させていいだろうということで、カスタムjsから設定していきます。
※いやなら個別にカスタマイズしてください

ブログ設定>カスタムjs>head内に以下を追加
step5-1

<link href="(アップしたlightbox.cssのURL)" rel="stylesheet" />
cssを読み込ませます。URLは各自アップしたURLを記載してください。 


<script src="(アップしたlightbox.jsのURL)"></script>
jsを読み込ませます。URLは各自アップしたURLを記載してください。 



続いてブログ設定>カスタムjs>body内に以下を追加
step5-3

①jqueryを読ませる
<script src="(アップしたlightbox-plus-jquery.jsのURL)"></script>
ここが前のバージョンと一番違うとこですね。headじゃなくてbodyで読ませます。
headじゃ動かないようです


②自動でlightboxを適用されるように記載。詳しくは前回の記事
<script type="text/javascript">
$(function(){
    $('.article-body-inner a').each(function(i){
if( $(this).find('img').length ) {
        $(this).attr('data-lightbox','number' + (i+1));
}
});
});
</script>

※赤字の.article-body-inner aのところがテンプレートによって違う可能性があるので自分のブログのものを入れてください。


デモ用に導入してみた最低限のサンプル
http://blog.livedoor.jp/tylia_elsword-tesuto/archives/8474915.html


これで出来ないなら知らない。
他のコードと競合してんちゃう?


■最後に

cssにせよjsにせよこの手の導入は最低限の知識は必要です。

やりたいことがあるなら、せめて最低限は勉強するべきだし、調べるくせはつけろ
調べてもわからないなら、わかるまで調べろ
何がわからないのか調べて、それでもダメならできるまで試せ

それでも出来ない、分からないならweb周りは絶対に向いてない

テンプレートで我慢しとけ

そして間違ってもこんな事言うな
がんばれ

ブログ書いてる人はお前の母親でもなければ学校の先生でもないって事を理解しろ。

説明しろよ???

何様だよまじで

くそゆとりが死ね




まぁイライラしつつわざわざ図解付きでブログ書いちゃうあたりがぼくツンデレ 

Comment & Trackbacks

コメント

 コメント一覧 (3)

    • 1. おぬん
    • 2016年04月06日 11:56
    • 画像にいちいちタグ付けするのが面倒でいい方法ないかと模索していたとこにいい記事発見!
      なんだかんだデレですねw
    • 2. (名無しのプロゲーマーさん)
    • 2017年07月20日 14:41
    • うんちちちっちちち
    • 3. frogman
    • 2017年12月30日 11:33
    • 5 お世話になりました。
      大変参考になり、無事設置出来ました<(_ _)>
      ありがとうございました。これからも頑張ってください(^▽^)/
コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット

関連記事

新着一覧