Я пытаюсь объединить официальный плагин JQuery для аккордеона с другим плагином JQ под названием «GallerificPlus» (Gallerific & Lightbox in 1).
К сожалению, это не работает для меня. GallerificPlus - это тот, который не работает, аккордеон работает отлично. 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>
Вот несколько 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;
});
});
Это код, который используется.
Я надеюсь, что кто-то может дать несколько советов, чтобы решить эту проблему.
Спасибо