Xoops/jQueryとMootoolsを共存させる方法。 の変更点

*jQueryとMootoolsを共存させる方法。 [#dfe42f17]

#contents

XoopsのテーマにMootoolsを使ってスライドショーを設置したときの事

もともとPopnUpBlogを使わせてもらっていて、~
いつのバージョンからかjQueryを使用している為に~
PopnUpBlogのjQueryとスライドショーのMootoolsが共存できなかった

これは本当に困った。。。(..;

調べてみると、やり方があるようで、~
&color(Red){ライブラリを読み込む順番が大切らしい。};~

**環境 [#f4912ed1]
-XOOPS Cube Legacy 2.1.7

-PopnUpBlog 3.25

-GnaviD3 0.90

**これが重要 [#r847e943]
 まずjQueryを読み込む。
      ↓
 jQuery.noConflict();でライブラリ同士の衝突を回避させます。
 jQueryを通常通り$()で使用するとエラーになる。
 下記のように変数に代入しておく事でj$("var")などどして使用できるようにする。
 var j$ = jQuery;
      ↓
 Mootoolsを読み込む

**modules/popnupblog/index.php [#e50b28d2]
 $xoops_module_header = 
   '<link rel="stylesheet" type="text/css" media="screen,tv,print" href="style.css" />
   <!-- jQuery -->
   <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
   <!-- markItUp! -->
   <script type="text/javascript" src="js/markitup/jquery.markitup.pack.js"></script>
   <!-- markItUp! toolbar settings -->
   <script type="text/javascript" src="js/markitup/sets/bbcode/set.js"></script>
   <!-- markItUp! skin -->
   <link rel="stylesheet" type="text/css" href="js/markitup/skins/simple/style.css" />
   <!--  markItUp! toolbar skin -->
   <link rel="stylesheet" type="text/css" href="js/markitup/sets/bbcode/style.css" />
   <!-- For JQuery lightbox plugin -->
   <link href="js/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
 ------- 追加　-------
   <script type="text/javascript"> 
   <!-- 
   jQuery.noConflict(); 
   var j$ = jQuery;
   -->
   </script> 
 ------- 追加　-------
 
 ------- "$"の前にjを追加 -------
  <script type="text/javascript">  
  <!--
  j$(function() {
    j$(\'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>

**modules/popnupblog/edit.php [#l5da36bb]
 $ vi modules/popnupblog/edit.php
 377                 $xoopsTpl->assign( 'xoops_module_header',
 378                   '<link rel="stylesheet" type="text/css" media="screen,tv,print" href="style.css" />
 379                   <!-- jQuery -->
 380                   <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
 381                   <!-- markItUp! -->
 382                   <script type="text/javascript" src="js/markitup/jquery.markitup.pack.js"></script>
 383                   <!-- markItUp! toolbar settings -->
 384                   <script type="text/javascript" src="js/markitup/sets/bbcode/set.js"></script>
 385                   <!-- markItUp! skin -->
 386                   <link rel="stylesheet" type="text/css" href="js/markitup/skins/simple/style.css" />
 387                   <!--  markItUp! toolbar skin -->
 388                   <link rel="stylesheet" type="text/css" href="js/markitup/sets/bbcode/style.css" />
 -------------- 追加 --------------
 389 <script type="text/javascript"> 
 390 <!-- 
 391 jQuery.noConflict(); 
 392 var j$ = jQuery;
 393 -->
 394 </script> 
 -------------- 追加 --------------

**Xoopsのテンプレート編集 [#wa7ef233]
 管理者メニュー → 互換レンダーシステム → テンプレートファイル管理
defaultテンプレートしかない場合は、複製してから複製したものを編集。

***popnupblog_submit.html [#o1023e8e]
 <script type="text/javascript">
 <!--
 $(document).ready(function() {
 	// Add markItUp! to your textarea in one line
 	// $('textarea').markItUp( { Settings }, { OptionalExtraSettings } );
 	$('#markItUp').markItUp(mySettings);
 	
 	// by makinosuke @ 2008.12.28
 	$('#markItUp').css({width: ($('#markItUpMarkItUp').css({width: '100%'}).width() - 12) + 'px'});
 	
 });
 -->
 </script>
 
      ↓
 
 <script type="text/javascript">
 <!--
 j$(document).ready(function() {
	// Add markItUp! to your textarea in one line
	// $('textarea').markItUp( { Settings }, { OptionalExtraSettings } );
	j$('#markItUp').markItUp(mySettings);
	
	// by makinosuke @ 2008.12.28
	j$('#markItUp').css({width: (j$('#markItUpMarkItUp').css({width: '100%'}).width() - 12) + 'px'});
	
 });
 -->
 </script>

修正後、新しいテンプレートセットを適応する。
 管理者メニュー → 互換モジュール → 全般設定 → デフォルトのテンプレート・セット


*GnaviD3のprototypeとも問題あり(..; [#deceffc7]
MootoolsとPrototypeの共存は無理みたい。。。

どうするか。。。

GnaviD3の地図を表示させた時だけ問題があるようです。

仕方ないので、地図を表示する時だけライブラリを読み込まないように力技で修正。(^^;
 <{php}>
 if($_GET["page"]!="map"){
   echo '<script src="http://www.flateight.com/themes/natural2/css/mootools.release.83.js" type="text/javascript"></script>';
   echo '<script src="http://www.flateight.com/themes/natural2/css/timed.slideshow.js" type="text/javascript"></script>';
 }
 <{/php}>
 
代わりに地図を表示する時は、通常の画像（スライドショーしない）を表示するよう修正。
 <{php}>
 if($_GET["page"]=="map"){
 	echo '<div id="header_discription">';
 	echo '</div>';
 }else{
 	echo '<div class="timedSlideshow jdSlideshow" id="mySlideshow"></div>';
 }
 <{/php}>