我正在尝试将官方 jQuery Accordion 插件与另一个名为“GallerificPlus”(Gallerific 和 Lightbox 合二为一)的 JQ 插件相结合。 不幸的是，它对我不起作用。 GallerificPlus 是不起作用的那个， Accordion 工作正常。 Firebug 没有报告任何错误，所以这可以是任何东西。真令人沮丧。
<!-- these are the includes for Gallerific PLus -->
<link href="{$workspace}/css/gallerificPlus.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$workspace}/js/functions.js"></script>
<script type="text/javascript" src="{$workspace}/js/gallerificPlus.js"></script>
<script type="text/javascript">
document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
<!-- These are the includes for accordion -->
<link href="{$workspace}/css/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!--[if lt IE 7]>
<link href="{$workspace}/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" />
<![endif]-->
<script type="text/javascript" src="{$workspace}/js/jquery-scrollTo.js"></script>
<script type="text/javascript" src="{$workspace}/js/accordion.js"></script>
<xsl:choose>
<xsl:when test="data/resort-view/entry/rooms/item">
<ul id="accordion">
<xsl:for-each select="data/resort-view/entry/rooms/item">
<li>
<!-- this is the clickable part of the accordion -->
<a href="?section=recent" class="heading">Click me to open the image gallery</a>
<!-- here begins the accordion part that is hidden -->
<ul id="view-the-room">
<div id="resort-view">
<div id="resort-view-details">
<!-- this is the gallerificPlus part which doesnt work -->
<div id="resort-view-img">
<div id="wrapper-for-img">
<div id="gallery" class="content">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="resort-view-thumbs">
<div id="thumbs" class="navigation">
<div id="navigation" class="navigation">
<ul class="thumbs noscript">
<!-- lightbox image thumbs -->
<xsl:if test="room-img-01/filename/text()">
<li>
<a class="thumb" href="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-001}"
original="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-001}"
title="" description="">
<img src="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-001}" class="img resort-view-thumbnail" alt="" />
</a>
</li>
</xsl:if>
<xsl:if test="room-img-02/filename/text()">
<li>
<a class="thumb" href="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-002}"
original="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-002}"
title="" description="">
<img src="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-002}" class="img resort-view-thumbnail" alt="" />
</a>
</li>
</xsl:if>
</ul>
</div>
</div> <!-- end thumbs -->
</div> <!-- end resort view thumbs-->
</div><!-- end resortview image -->
</div> <!-- end resortview-details-->
</div><!-- end resort-view -->
</ul>
</li>
</xsl:for-each>
</ul>
</xsl:when>
下面是一些自定义 Accordion 部分并添加功能的JS GallerificPlus。
// some custom JS for accordion and the JS needed for GallerificPlus
$(document).ready(function() {
var gallery = $('#gallery').galleriffic('#navigation', {
delay: 5500,
numThumbs: 12,
preloadAhead: 40, // Set to -1 to preload all images
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
titleContainerSel: '#image-title',
descContainerSel: '#image-desc',
downloadLinkSel: '#download-link',
fixedNavigation: true,
galleryKeyboardNav: true,
autoPlay: false
});
gallery.onFadeOut = function() {
$('#details').fadeOut('fast');
};
gallery.onFadeIn = function() {
$('#details').fadeIn('fast');
};
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
这是使用的代码。 我希望有人可以提供一些提示来解决这个问题。
谢谢
最佳答案
我发现了问题....
显然页面上只能有 1 个 GallerificPlus 画廊... 所以我想这会导致 id 冲突
关于javascript - 将 jQuery Accordion 与 GallerificPlus 结合使用时发生冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3984140/