How to Use Images as Navigation with innerfade Slideshow?
- by Katie
I am very new to JavaScript and only have the most basic understanding of how it works, so please bear with me. :) I'm using the jquery.innerfade.js script to create a slideshow with fade transitions for a website I'm developing, and I have added navigation buttons (which are set as background-images) that navigate between the “slides”. The navigation buttons have three states: default/off, hover, and on (each state is a separate image). I created a separate JavaScript document to set the buttons to “on” when they are clicked. The “hover” state is achieved through the CSS.
Both the slideshow and the navigation buttons work well. There is just one thing I want to add: I would like the appropriate navigation button to display as “on” while the related “slide” is “playing”.
Here's the HTML:
<div id="mainFeature">
<ul id="theFeature">
<li id="the1feature"><a href="#" name="#promo1"><img src="_images/carousel/promo1.jpg" /></a></li>
<li id="the2feature"><a href="#" name="#promo2"><img src="_images/carousel/promo2.jpg" /></a></li>
<li id="the3feature"><a href="#" name="#promo3"><img src="_images/carousel/promo3.jpg" /></a></li>
</ul>
<div id="promonav-con">
<div id="primarypromonav">
<ul class="links">
<li id="the1title" class="promotop"><a rel="1" href="#promo1" class="promo1" id="promo1" onMouseDown="promo1on()"><strong>Botox Cosmetic</strong></a></li>
<li id="the2title" class="promotop"><a rel="2" href="#promo2" class="promo2" id="promo2" onMouseDown="promo2on()"><strong>Promo 2</strong></a></li>
<li id="the3title" class="promotop"><a rel="3" href="#promo3" class="promo3" id="promo3" onMouseDown="promo3on()"><strong>Promo 3</strong></a></li>
</ul>
</div>
</div>
And here is the jquery.innerfade.js, with my changes:
(function($) {
$.fn.innerfade = function(options) {
return this.each(function() {
$.innerfade(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'speed': 'normal',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
this.ifchanger = setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
}
};
$.innerfade.next = function(elements, settings, current, last) {
$(elements[last]).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(this)[0]);
});
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
this.ifchanger = setTimeout((function() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};
})(jQuery);
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}
jQuery(document).ready(function() {
jQuery('ul#theFeature').innerfade({
speed: 1000,
timeout: 7000,
containerheight: '291px'
});
// jQuery('#mainFeature .links').children('li').children('a').attr('href', 'javascript:void(0);');
jQuery('#mainFeature .links').children('li').children('a').click(function() {
clearTimeout(jQuery.innerfade.ifchanger);
for(i=1;i<5;i++) {
jQuery('#the'+i+'feature').css("display", "none");
//jQuery('#the'+i+'title').children('a').css("background-color","#226478");
}
// if(the_widths[(jQuery(this).attr('rel')-1)]==960) {
// jQuery("#vic").hide();
// } else {
// jQuery("#vic").show();
// }
// jQuery('#the'+(jQuery(this).attr('rel'))+'title').css("background-color", "#286a7f");
jQuery('#the'+(jQuery(this).attr('rel'))+'feature').css("display", "block");
clearTimeout(jQuery.innerfade.ifchanger);
});
});
And the separate JavaScript that I created:
function promo1on() {document.getElementById("promo1").className="promo1on"; document.getElementById("promo2").className="promo2"; document.getElementById("promo2").className="promo2"; }
function promo2on() {document.getElementById("promo2").className="promo2on"; document.getElementById("promo1").className="promo1"; document.getElementById("promo3").className="promo3"; }
function promo3on() {document.getElementById("promo3").className="promo3on"; document.getElementById("promo1").className="promo1"; document.getElementById("promo2").className="promo2"; }
And, finally, the CSS:
#mainFeature {float: left; width: 672px; height: 290px; margin: 0 0 9px 0; list-style: none;}
#mainFeature li {list-style: none;}
#mainFeature #theFeature {margin: 0; padding: 0; position: relative;}
#mainFeature #theFeature li {position: absolute; top: 0; left: 0;}
#promonav-con {width: 463px; height: 26px; padding: 0; margin: 0; position: absolute; z-index: 900; top: 407px; left: 283px;}
#primarypromonav {padding: 0; margin: 0;}
#mainFeature .links {padding: 0; margin: 0; list-style: none; position: relative; font-family: arial, verdana, sans-serif; width: 463px; height: 26px;}
#mainFeature .links li.promotop {list-style: none; display: block; float: left; display: inline; margin: 0; padding: 0;}
#mainFeature .links li a {display: block; float: left; display: inline; height: 26px; text-decoration: none; margin: 0; padding: 0; cursor: pointer;}
#mainFeature .links li a strong {margin-left: -9999px;}
#mainFeature .links li a.promo1 {background: url(../_images/carouselnav/promo1.gif); width: 155px;}
#mainFeature .links li:hover a.promo1 {background: url(../_images/carouselnav/promo1_hover.gif); width: 155px;}
#mainFeature .links li a.promo1:hover {background: url(../_images/carouselnav/promo1_hover.gif); width: 155px;}
.promo1on {background: url(../_images/carouselnav/promo1_on.gif); width: 155px;}
#mainFeature .links li a.promo2 {background: url(../_images/carouselnav/promo2.gif); width: 153px;}
#mainFeature .links li:hover a.promo2 {background: url(../_images/carouselnav/promo2_hover.gif); width: 153px;}
#mainFeature .links li a.promo2:hover {background: url(../_images/carouselnav/promo2_hover.gif); width: 153px;}
.promo2on {background: url(../_images/carouselnav/promo2_on.gif); width: 153px;}
#mainFeature .links li a.promo3 {background: url(../_images/carouselnav/promo3.gif); width: 155px;}
#mainFeature .links li:hover a.promo3 {background: url(../_images/carouselnav/promo3_hover.gif); width: 155px;}
#mainFeature .links li a.promo3:hover {background: url(../_images/carouselnav/promo3_hover.gif); width: 155px;}
.promo3on {background: url(../_images/carouselnav/promo3_on.gif); width: 155px;}
Hopefully this makes sense! Again, I'm very new to JavaScript/JQuery, so I apologize if this is a mess. I'm very grateful for any suggestions. Thanks!
