Thickbox のつづき | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

Thickbox のつづき

Thickboxを自分で挑戦してみようと思っている方へヒントです


Thickboxって画像フォルダで使われている、新しいウィンドウで立ち上がらないで背景が暗くなって画面が出てくる、あれのことです?


↓これがThickboxです↓                   ↓これもThickboxです↓(混んでいると出にくいです)


水元公園2    You Tube




では、ヒントです


画像フォルダのページでソースを見ると・・・・
それらしい .js が2つ
それをプラグインに書いて呼び出します
ついでにCSSを開いて関係あると思われるCSSを
自分のCSSにコピペ


記事を書くときに


1枚だけの場合は・・・・


<a class="thickbox" href="http://stat.ameba.jp/user_images/37/48/10000.jpg " target="_blank"><img height="12" alt="" src="http://stat.ameba.jp/user_images/37/48/10000_s.jpg " width="12" border="0" /></a>


class="thickbox"を付け加えます


写真をグループ化して表示するには・・・・


<a class="thickbox" rel="001" href="http://stat.ameba.jp/user_images/37/48/10000.jpg " target="_blank"><img height="12" alt="" src="http://stat.ameba.jp/user_images/37/48/10000_s.jpg " width="12" border="0" /></a>


class="thickbox" rel="001"を付け加えます
"001"の部分はなんでもかまいません"001"が付いている画像がグループ化されます


以上で動くはず




なんですが、・・・・・


たぶん、ココから先で戸惑ってしまうと思います
私がそうでした


ためしにソースを覗いてみてください
プレビューを確認では問題ないのですが・・・・
投稿したあとでソースを見ると


<a class="thickbox" rel="001" href="http://hama-sush-jp.pro/public/image/displayimage.do?imagePath=/user_images/37/48/10000.jpg " target="_blank"><img height="12" alt="" src="http://stat.ameba.jp/user_images/37/48/10000_s.jpg " width="12" border="0" /></a>


こうなっているはずです


赤字部分のように画像のURLが置き換えられているんです
このおかげで画像を呼び出すことができないんです


私の場合はjavascriptで無理やりURLを元に戻しています・・・・


あっ・・・といって

ソースを見てもなおっていませんよ・・・・

でも、・・・・・ 書き換えているんです・・・・・




早く公開できるようにがんばります