Xoops/Myalbum-Pで「jQuery lightBox」を利用する方法 の変更点

*Myalbum-Pで「jQuery lightBox」を利用する方法 [#x599ba20]

こんな感じになります。

[[FlatEight Myalbum-P>http://www.flateight.com/modules/myalbum/]]

#contents

**「jQuery lightBox」をダウンロード [#m0d9a508]
[[jQuery lightBox>http://leandrovieira.com/projects/jquery/lightbox/]]

解凍したものを

{XOOPS_ROOT_PATH}/commonにlightboxという名前で配置。

**{XOOPS_ROOT_PATH}/common/lightbox/js/jquery.lightbox-0.5.min.jsを編集 [#x2caae15]
下記ファイルのパスをフルパスに変更する。

 images/lightbox-ico-loading.gif
 images/lightbox-btn-prev.gif
 images/lightbox-btn-next.gif
 images/lightbox-btn-close.gif
 images/lightbox-blank.gif
 
 例）http://www.hogehoge.com/images/lightbox-ico-loading.gif

**使用中のテーマのtheme.htmlの編集 [#ua284439]
使用中のテーマのtheme.htmlの</head>の上に
 <{php}>
 if(if(ereg("/modules/myalbum/",$_SERVER[SCRIPT_NAME]) ){
 echo <<<EOM
 　<script type="text/javascript" src="http://www.hogehoge.com/common/lightbox/js/jquery-1.2.6.min.js"></script>
   <link href="http://www.hogehoge.com/common/lightbox/js/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="http://www.hogehoge.com/common/lightbox/js/jquery.lightbox-0.5.min.js"></script>
   <script type="text/javascript">  
   <!--
   $(function() {
     $('a[@href$=".jpeg"], a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"], a[@href$=".JPEG"], a[@href$=".JPG"], a[@href$=".GIF"], a[@href$=".PNG"]').lightBox();
   });
   -->
   </script>
 EOM;
 }
 <{/php}>

**{XOOPS_ROOT_PATH}/modules/myalbum/template/myalbum_photo.htmlを修正 [#c84f71d2]
 -      <a href="<{$photo.ahref_photo}>" target="_blank" onClick="window.open('<{$photo.ahref_photo}>','','width=<{$photo.window_x}>,height=<{$photo.window_y}>');return(false);"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>
 +      <a href="<{$photo.ahref_photo}>" rel="lightbox"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>


**{XOOPS_ROOT_PATH}/modules/myalbum/template/myalbum_photo_in_list.htmlを修正 [#k54cb66b]
 -        <a href='<{$mod_url}>/photo.php?lid=<{$photo.lid}>'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>
 +        <a href="<{$photo.ahref_photo}>" rel="lightbox"><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>


いないかもしれませんが、Monotoolsと共存させている人はこんな感じで
[[jQueryとMootoolsを共存させる方法>http://www.flateight.com/modules/bwiki/index.php?cmd=read&page=Xoops%2FjQuery%A4%C8Mootools%A4%F2%B6%A6%C2%B8%A4%B5%A4%BB%A4%EB%CA%FD%CB%A1%A1%A3&word=jquery]]