Hi All
I'm trying to combine the official jQuery accordion plugin with another JQ plugin called 'GallerificPlus' (Gallerific & Lightbox in 1). Unfortunately it doesn't work for me. The GallerificPlus is the one that doesn't work, the accordion works fine. Firebug reports no errors, so this could be anything. It's really frustrating.
<!-- 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>
Here's some JS that customizes a part of the accordion and adds the functionality for 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;
});
});
This is the code is used. I hope someone can give some tips to solve this issue.
Thanks