nucleusにjqueryのギャラリーエフェクトを色々組み込んでみた。

別のことをしていたはずなのに気が付いたら何か別のことしてた。
前回に引き続き何となく改造？紹介。
長くなったのでたたむ。



○Facebox
※他二種のスクリプトと同居できないようなのでサンプル無しです。すみません('A`)
参考にさせてもらったところ
http://nakachi.org/index.php?itemid=963
http://blog.chibatch.jp/articles/facebox.html
前回組み込んだスポイラーズとの連携がどうかなってどうにかなったため、
��）http://famspam.com/faceboxからパッケージ入手
��）jqueryぶちこんだのと同じフォルダにjsとcssぶちこみ。そこにimagesフォルダを作って中にpngとgifぶちこみ。
��）使用スキンのヘッダに
<link media="screen" rel="stylesheet" type="text/css" href="pass/to/facebox.css" />
<script type="text/javascript" src="pass/to/facebox.js">
の二行を追加。
��）そいでまたヘッダの
(document).ready(function(){
を
jQuery(document).ready(function($){
に書き換え、｝）；で閉じるより前に
$('a[rel*=facebox]').facebox();
の一行を追加。
��）http://japan.nucleuscms.org/wiki/plugins:thumbnailのライトボックス対応版を頂いてきて、ソース内lightboxを全てfaceboxに書き換える。
あとは画像の表示形式をポップアップにすればおけー。

---

○Lightbox（jquery版）
http://www.balupton.com/sandbox/jquery_lightbox/

組み込み方法は
��）上記アドレスからlightboxパッケージ入手
��）jquery.lightbox.jsを開いてfiles行下のパスを書き換え↓
js: {
    lightbox:    'js/jquery.lightbox.js',
    colorBlend:    'js/jquery.color.js'
},
を
js: {
    lightbox:    'jquery.lightbox.js',
    colorBlend:    'jquery.color.js'
},
に。
��）jqueryぶちこんだのと同じフォルダにjquery.lightbox.jsとjquery.color.jsの二種類ぶちこみ。そこにcssとimagesフォルダを作って同名フォルダの中身そのままぶちこみ。
��）使用スキンのヘッダに
<script type="text/javascript" src="pass/to/jquery.lightbox.js">
を追加。
��）http://japan.nucleuscms.org/wiki/plugins:thumbnailのライトボックス対応版の250行目にある

return "<a href=\"".$CONF['MediaURL']
."$imagepath\"
 rel=\"lightbox\">... 

を

return "<a href=\"".$CONF['MediaURL']
."$imagepath\"
 rel=\"lightbox\"
 title=\"$comment\">... 

に書き換え。

---

○Zoomimage
http://eyecon.ro/zoomimage/

組み込み方法は
��）上記アドレスからパッケージを入手
��）jqueryぶちこんだのと同じフォルダにjsフォルダの中身ぶちこみ。そこにcssとimagesフォルダを作って同名フォルダの中身ぶちこみ。
��）使用スキンのヘッダに
<link rel="stylesheet" media="screen" type="text/css" href="pass/to/css/zoomimage.css" />
<script type="text/javascript" src="pass/to/eye.js">
<script type="text/javascript" src="pass/to/utils.js">
<script type="text/javascript" src="pass/to/zoomimage.js">
を追加。
��）ヘッダの
(document).ready(function(){
ないし
jQuery(document).ready(function($){
内、｝）；で閉じるより前に
$('a.lightsGal').zoomimage();
か、
$('a.bwGal').zoomimage({
    border: 20,
    centered: true,
    hideSource: true
など、説明書のアバウトとこに書いてある中からお好みで追加。
��）http://japan.nucleuscms.org/wiki/plugins:thumbnailのライトボックス対応版やっぱり250行目

return "<a href=\"".$CONF['MediaURL']
."$imagepath\"
 rel=\"lightbox\">... 

を

return "<a href=\"".$CONF['MediaURL']
."$imagepath\"
 class=\"４で選んだクラス名（lightsGalとかbwGal'）\"
 title=\"$comment\">... 

に書き換え。

---

[over]スポイラーズとも衝突しない。[/over]
ライトボックスとズームイメージ両方使いたい場合のhttp://japan.nucleuscms.org/wiki/plugins:thumbnailのライトボックス対応版改造？方法は後日記をご覧くだされ。