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

Myalbum-Pで「jQuery lightBox」を利用する方法 †

こんな感じになります。

FlatEight Myalbum-P

「jQuery lightBox」をダウンロード †

jQuery lightBox

解凍したものを

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

{XOOPS_ROOT_PATH}/common/lightbox/js/jquery.lightbox-0.5.min.jsを編集 †

下記ファイルのパスをフルパスに変更する。

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の編集 †

使用中のテーマの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を修正 †

-      <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を修正 †

-        <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を共存させる方法