asked on
Opening JQuery Accordion on different slides.
I have a JQuery Accordion menu on my site but i'm struggling to open the Accordion on anything other than slide 1.
There's a line in the .js file (attached):
var $firstSlide = $slides.filter(':first');
I have tried setting this to 'second', '2', 'slide2' ....with no joy.
I have also attached the Accordion code for the HTML page
Any ideas how I can get this to work?
There's a line in the .js file (attached):
var $firstSlide = $slides.filter(':first');
I have tried setting this to 'second', '2', 'slide2' ....with no joy.
I have also attached the Accordion code for the HTML page
Any ideas how I can get this to work?
ul id="accordion1">
<li class="slide1">
<div class="slide_handle"><div></div></div>
<div class="slide_content">
<a class="image" href="http://www.iris-technology.co.uk/"><img alt="Iris Technology" width="703" height="253" src="images/wide-satelitte.jpg" /></a>
</div>
</li>
<li class="slide2">
<div class="slide_handle"><div></div></div>
<div class="slide_content">
<a class="image" href="AutomotiveOEM.html"><img alt="Automotive OEM" width="703" height="253" src="images/wide-car.jpg" /></a>
</div>
</li>
<li class="slide3">
<div class="slide_handle"><div></div></div>
<div class="slide_content">
<a class="image" href="FleetManagement.html"><img alt="Fleet Management" width="703" height="253" src="images/wide-van.jpg" /></a>
</div>
</li>
<li class="slide4">
<div class="slide_handle"><div></div></div>
<div class="slide_content">
<a class="image" href="WhiteLabel.html"><img alt="White Label" width="703" height="253" src="images/wide-plan.jpg" /></a>
</div>
</li>
<li class="slide5">
<div class="slide_handle"><div></div></div>
<div class="slide_content">
<a class="image" href="SoftwarePlatform.html"><img alt="Software Platform" width="703" height="253" src="images/wide-mobile.jpg" /></a>
</div>
</li>
<li class="slide6">
<div class="slide_handle"><div></div></div>
<div class="slide_content">
<a class="image" href="OilAndGas.html"><img alt="Oil & Gas" width="703" height="320" src="images/wide-world.jpg" /></a>
</div>
</li>
</ul>
/*
* Accordionza jQuery Plugin
* Copyright 2010, Geert De Deckere <geert@idoe.be>
*/
(function($) {
// Accordionza version
var version = '1.0.2';
$.fn.accordionza = function(options) {
// Merge all the options (recursively)
var o = $.extend(true, {}, $.fn.accordionza.defaults, options);
// Loop over each accordion
this.each(function() {
// Cache selector operations
var $accordion = $(this);
var $slides = $accordion.children('li');
var $firstSlide = $slides.filter(':first');
var $lastSlide = $slides.filter(':last');
var $activeSlide = $slides.filter('.' + o.classSlideOpened);
// Calculate widths and heights
var width = $accordion.width();
var height = $accordion.height();
var slideMinWidth = (o.slideWidthClosed === false) ? $slides.filter(':not(.' + o.classSlideOpened + '):first').find('.' + o.classHandle + ':first').outerWidth() : o.slideWidthClosed;
var slideMaxWidth = width - ($slides.length - 1) * slideMinWidth;
// Handlers for setInterval and setTimeout
var autoPlayInterval;
var autoPlayTimeout;
// Used for o.pauseOnHover functionality
var autoPlayPaused = false;
// Setup the accordion (wrapper)
$accordion.css({
'position': 'relative',
'overflow': 'hidden'
});
// Setup the slides
$slides.css({
'position': 'absolute',
'top': '0',
'width': slideMaxWidth + 'px',
'height': height + 'px'
});
// Position each slide
$slides.each(function(i) {
// We also store the order for each slide (starting with zero)
// This will come in handy later
$(this).css('left', i * slideMinWidth + 'px').data('order', i);
});
// Hide the captions
$('.' + o.classCaption, $slides).css('top', height + 'px');
// Start autoplaying
function startAutoPlay() {
// Make sure we don't start a double interval
stopAutoPlay();
autoPlayInterval = setInterval(function() {
// If not temporarily paused, trigger the next slide
if ( ! autoPlayPaused) {
nextSlide().trigger('slide');
}
}, o.slideDelay);
}
// Stop autoplaying
function stopAutoPlay() {
clearInterval(autoPlayInterval);
}
// Pause autoplaying for a while
function pauseAutoPlay(delay) {
// Set the default delay value
if (delay === undefined) {
var delay = o.autoRestartDelay;
}
stopAutoPlay();
// If the delay has been set to false (or 0),
// we won't restart autoplaying the slides.
if (delay === false) {
return;
}
// Clear any possible previous calls to this function
clearTimeout(autoPlayTimeout);
// Note: on top of the delay value below, you have to add the default o.slideDelay time
// to get the actual time the next slide gets triggered. This is because setInterval() in
// startAutoPlay() waits one delay iteration before starting.
autoPlayTimeout = setTimeout(function() {
startAutoPlay();
}, delay);
}
// Returns the previous slide
function prevSlide(loop) {
if (loop === undefined) {
var loop = true;
}
var $prevSlide = $activeSlide.prev();
if ($prevSlide.length) {
return $prevSlide;
} else if (loop) {
return $lastSlide;
} else {
return $activeSlide;
}
}
// Returns the next slide
function nextSlide(loop) {
if (loop === undefined) {
var loop = true;
}
var $nextSlide = $activeSlide.next();
if ($nextSlide.length) {
return $nextSlide;
} else if (loop) {
return $firstSlide;
} else {
return $activeSlide;
}
}
// Some slide was activated by the user
$slides.bind(o.slideTrigger, function() {
pauseAutoPlay();
$(this).trigger('slide');
});
// Some slide was activated
$slides.bind('slide', function() {
// Ignore clicks on an already opened slide
if ($(this).hasClass(o.classSlideOpened)) {
return;
}
// Switch the classSlideOpened
$activeSlide.removeClass(o.classSlideOpened);
$(this).addClass(o.classSlideOpened);
// Move all following slides to the right, and all preceding slides to the left
$slides.filter(':gt(' + $(this).data('order') + ')').each(function() {
$(this).stop(true).animate({left: slideMaxWidth + ($(this).data('order') - 1) * slideMinWidth + 'px'}, o.slideSpeed, o.slideEasing);
}).end().filter(':lt(' + ($(this).data('order') + 1) + ')').each(function() {
$(this).stop(true).animate({left: $(this).data('order') * slideMinWidth + 'px'}, o.slideSpeed, o.slideEasing);
});
// Hide the old caption, show the new one
$('.' + o.classCaption, $activeSlide).stop(true).animate({top: height + 'px'}, o.captionSpeed, o.captionEasing);
// Note: using delay() here from jQuery 1.4 instead of the "animate({opacity:0},delay)" trick from http://www.learningjquery.com/2007/01/effect-delay-trick
// Using opacity here would cause PNG transparency to break in IE
$('.' + o.classCaption, $(this)).stop(true).delay(o.captionDelay).animate({top: height - o.captionHeight + 'px'}, o.captionSpeed, o.captionEasing);
// User-defined callbacks
if ($.isFunction(o.onSlideClose)) {
o.onSlideClose.call($activeSlide);
}
if ($.isFunction(o.onSlideOpen)) {
o.onSlideOpen.call($(this));
}
// Custom event hook
$.event.trigger('accordionza_slide');
// Voilà, we've got a new open slide
$activeSlide = $(this);
});
// Animate and toggle the caption
$slides.find('.' + o.classCaptionToggle).click(function() {
pauseAutoPlay();
// Find the caption this classCaptionToggle instance belongs to
// Note: we don't assume classCaptionToggle is an ancestor of the caption
var $caption = $(this).closest('li').find('.' + o.classCaption);
if ( ! $activeSlide.hasClass(o.classCaptionCollapsed)) {
// Move the caption down
$caption.stop(true).animate({top: height - o.captionHeightClosed + 'px'}, o.captionSpeed, o.captionEasing);
} else {
// Move the caption back up
$caption.stop(true).animate({top: height - o.captionHeight + 'px'}, o.captionSpeed, o.captionEasing);
}
$activeSlide.toggleClass(o.classCaptionCollapsed);
});
// Keyboard navigation
if (o.navKey) {
$(document.documentElement).keyup(function(event) {
// Left arrow key
if (event.which == 37) {
prevSlide().trigger(o.slideTrigger);
// Right arrow key
} else if (event.which == 39) {
nextSlide().trigger(o.slideTrigger);
}
});
}
// Open up the start slide.
// Note: this code needs to come after the 'slide' binding to $slides.
if ($activeSlide.length) {
// If a slide with the classSlideOpened exists,
// we trigger the previous one so the correct slide opens up.
prevSlide().trigger('slide');
} else {
// If no slide with the classSlideOpened is found,
// we open up the first slide.
$lastSlide.addClass(o.classSlideOpened);
$activeSlide = $lastSlide;
$firstSlide.trigger('slide');
}
// Start autoplaying
if (o.autoPlay) {
// Temporarily pause the slideshow on hover
if (o.pauseOnHover) {
$accordion.mouseenter(function() {
autoPlayPaused = true;
}).mouseleave(function() {
autoPlayPaused = false;
});
}
startAutoPlay();
}
});
// Make chainable
return this;
};
// The complete list of default options
$.fn.accordionza.defaults = {
autoPlay: false,
autoRestartDelay: false,
captionDelay: 0,
captionEasing: 'swing',
captionHeight: 50,
captionHeightClosed: 0,
captionSpeed: 500,
classSlideOpened: 'slide_opened',
classCaption: 'slide_caption',
classCaptionCollapsed: 'slide_caption_collapsed',
classCaptionToggle: 'slide_caption_toggle',
classHandle: 'slide_handle',
navKey: false,
onSlideClose: null,
onSlideOpen: null,
pauseOnHover: false,
slideDelay: 5000,
slideEasing: 'swing',
slideSpeed: 500,
slideTrigger: 'click',
slideWidthClosed: false
};
})(jQuery);
JavaScript
Last Comment
Greg Alexander