SgtLegend,
Since you’ll probably need to see it to help, here is my code…
slideshow.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
</head>
<body>
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2>Slide one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec pretium arcu non velit. Phasellus adipiscing auctor
lorem. Curabitur in urna ut purus consequat sollicitudin.
Phasellus ut diam. Cras magna libero, tempor id, venenatis
sit amet, venenatis et, dui.
</p>
</li>
<li id="slide-two">
<h2>Slide two</h2>
<p>
Nam ac nibh sit amet augue ultricies sagittis. Donec sit
amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
nisi condimentum urna, sit amet molestie odio dolor non lectus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</p>
</li>
<li id="slide-three">
<h2>Slide three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse adipiscing dui a nibh. Integer tristique lorem
vitae massa. Etiam dapibus, eros sit amet euismod semper,
felis erat congue lacus, sed aliquam metus libero sed elit.
</p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li><a href="#slide-one">Slide one</a></li>
<li><a href="#slide-two">Slide two</a></li>
<li><a href="#slide-three">Slide three</a></li>
</ul>
</div>
</body>
</html>
slideshow.css
I’ll assume you don’t need to see this…
slideshow.js
$slideshow = {
context: false,
tabs: false,
timeout: 1000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs
fx: 'scrollLeft', // the slide effect to use
init: function() {
// set the context to help speed up selectors/improve performance
this.context = $('#slideshow');
// set tabs to current hard coded navigation items
this.tabs = $('ul.slides-nav li', this.context);
// remove hard coded navigation items from DOM
// because they aren't hooked up to jQuery cycle
this.tabs.remove();
// prepare slideshow and jQuery cycle tabs
this.prepareSlideshow();
},
prepareSlideshow: function() {
// initialise the jquery cycle plugin -
// for information on the options set below go to:
// [JQuery Cycle Plugin - Option Reference](http://malsup.com/jquery/cycle/options.html)
$("div.slides > ul", $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $("ul.slides-nav", $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
// return markup from hardcoded tabs for use as jQuery cycle tabs
// (attaches necessary jQuery cycle events to tabs)
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
// get the active tab
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
// if there is an active tab
if(activeTab.length) {
// remove active styling from all other tabs
$slideshow.tabs.removeClass('on');
// add active styling to active button
activeTab.parent().addClass('on');
}
}
};
$(function() {
// initialise the slideshow when the DOM is ready
$slideshow.init();
});
If I take the following line out of my HTML, then the page and tabs display, but there is no automated “slide show”…
<script type="text/javascript" src="js/jquery.min.js"></script>
If I put that line back in, then I just the page appears, and the tabs disappear and there is still no “slide show”.
I even tried using a direct link to JQuery like this, but same issue…
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
Hope that is enough to help…
Thanks,
Debbie
