编辑“ImpressPages/jQuery替代标准函数库”

本条目旨在介绍怎样将[[ImpressPages]] [[CMS]]中默认使用的标准函数库替换成[[jQuery]]库，然后举例说明将默认的光箱效果更改成ColorBox。

如果你打算将jQuery运用到菜单显示或者其他功能上的话，你也许需要事先阅读以下本条目。


*'''第一步，移除默认的标准函数库'''
在主题文件中'''main.php'''头部中找到下行代码，将其删除：
 <link rel="stylesheet" href="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/css/lightbox.css" type="text/css" 
 media="screen" /> 
再在'''main.php'''文件的底部找到下面的代码，并且将其删除：
<pre>
<!-- popups -->
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/prototype.js"></script> 
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/scriptaculous.js?
 load=effects,builder"></script> 
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/lightbox.js"></script> 
<script type="text/javascript">   
// <![CDATA[   
LightboxOptions.fileLoadingImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>' + 'js/lightbox/images/loading.gif';   
LightboxOptions.fileBottomNavCloseImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>'
+ 'js/lightbox/images/closelabel.gif';   //]]>
</script> 
<!-- popups --> 
</pre>


*'''第二步，添加jQuery和Fancybox文件'''
点击下面的链接，下载文档，然后解压至主题目录'''ip_theme/ip_default'''中。

[http://www.impresspages.org/file/jquery_lightbox.zip jQuery lightbox(.zip)]

最终的文件夹层次结构如下：
**fancybox
***...
***许多其他文件
***...
**...
**main.php
**...
**prototype.js
**...

'''注意：''' 在该文件夹结构中我们看到，有'''prototype.js'''文件，这个本是默认的标准函数库中使用的，在这里继续使用，是因为ImpressPages核心的功能还需要使用一些prototype库（默认的标准函数库）中的函数，而这个新的'''prototype.js'''文件已经经过修改，与jQuery不会产生冲突。


*'''第三步，在模板中包含必要的文件'''

在'''main.php'''文件的<head>部分，添加下面代码：
<pre>
<link href="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> 
<script src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/jquery/jquery.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/prototype.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.fancybox-1.3.4.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.easing-1.3.pack.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {   
  $("a[rel^=lightbox]").addClass('jquery-lightbox'); //为jQuery添加类  
  $("a[rel^=lightbox]").attr('rel', ''); //移除无关的属性   
  $("a.jquery-lightbox").fancybox({     
      'titlePosition' : 'over',     
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {       
        return '<span id="fancybox-title-over">' + (currentIndex + 1)           
          + ' / ' + currentArray.length + ' ' + title + '</span>';     
      }   
   }); 
}); 
</script> 

</pre>


==参考来源==
*http://www.impresspages.org/docs/working-with-themes/jquery-instead-of-prototype/

[[category:ImpressPages]]