ExtraButtons navbut alternate image

[karasulas]

1) Script Title: ExtraButtons

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...deslideshow.js

3) Describe problem:

Hi there,

Firstly I want to thank you for providing Ultimate Fade-In Slideshow which I've used recently, very wonderful!

I've just started to implement ExtraButtons into my website, and am excited about the results. I want to know please, how can I make it so that instead of the navbuts changing opacity when clicked on, they change image instead?
I'm happy with the second image being a separate file, or to be a hidden half of the same image (a la "CSS Image Rollover") - whatever it takes!

Thanks in advance,
Alexander Karasulas

[jscheuer1]

You can set it up any way you like. Using CSS rollovers (often called sprites) like you mention is more efficient. If using separate images, the ones not seen as the page loads should be preloaded.

What you want to do is use the optional onbeforeslide function, see:

http://home.comcast.net/~jscheuer1/s...tons_usage.htm

about halfway down where it's explained a bit. In fact, if using sprites you could use the example one:

onbeforeslide: function(index){
	var lng = this.setting.imagearray.length;
	this.setting.$nav.removeClass('highlight').each(function(i){
		if(i % lng === index){
			this.className += ' highlight';
		}
	});
}

Then in your stylesheet you could have something like:

.navbut {background-position: 0 0; width: 25px; height: 25px; float: left; margin-right: 2px;}
.navbut.highlight {background-position: 0 26px;}

or whatever it takes to shift the background image over to its active state. The above should work with navbuts like:

<div class="navbut" style="background-image: url(sprite0.gif);"></div>

and a 25x50 sprite0.gif like:

Attachment 4488

You could have a spite#.gif for each navbut so that each one could be unique. Or you could use the same sprite for all with only colors, no text and use ordinary text in the div (which would show over the background image) to differentiate them.

You can also have the navbuts' HTML generated automatically, as long as you can figure out how to get the desired url for each. Following the above theme, defining an extra buttons pend value and using sprite#.gif for each button, that would be:

navbut: '<div class="navbut" style="background-image: url(sprite%i.gif);"></div>'

If you want to use text numbers in the buttons, you could have just on sprite and do like:

navbut: '<div class="navbut" style="background-image: url(sprite.gif);"> %c</div>'

[karasulas]

Thanks for that! I'm having a little trouble with it - the navbut.highlight state is not showing. It makes the whole div disappear! You can see what happens here:

www.happytobevisuals.com/index2.php

It doesn't seem to matter what I do with the stylesheet - the problem doesn't lie there.

Here's the sylesheet segment if it helps:

.navbut {
	background-position: 0 0;
	width: 18px;
	height: 18px;
	margin: 4px;
	float: left;
	}

.navbut.highlight{
	background-position: 0 18;
	}

So maybe I've messed up in implementing the onbeforeslide bit?

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [846, 101], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images2/slide1.png", "", "", ""],
		["images2/slide2.png", "", "", ""],
		["images2/slide3.png", "", "", ""],
		["images2/slide4.png", "", "", ""],
		["images2/slide5.png", "", "", ""],
		["images2/slide6.png", "", "_new", ""]
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	extrabuttons: {pend: '.bob', nextprevresume: false, navfade: 1, navbutonly: true},
	navbut: '<a href="javascript:void(#%i)"><div class="navbut" style="background-image: url(images2/fadeshow_navbut.png);"></div></a>',

onbeforeslide: function(index){
	var lng = this.setting.imagearray.length;
	this.setting.$nav.removeClass('highlight').each(function(i){
		if(i % lng === index){
			this.className += 'highlight';
		}
	});
},

onpauseplayswitch: function(pauseplaybuts){
        	var ppstatus = this.setting.$togglerdiv.find('.pauseplaystatus');
		if(pauseplaybuts.hasClass('running')){
			ppstatus.html('running');
		} else {
			ppstatus.html('paused');
		}
	},	togglerid: "fadeshow1toggler"
})

</script>

Here's the fadeshow toggler div:

<div id="fadeshow1toggler" style="width: 100%; text-align: center;"><span class="bob"></span></div>

Also, see how the navbuts are lining up vertically? I'm not sure why that's happening, do you have any ideas? (They were sitting nicely beside each other like I asked them to before I started trying to use onbeforeslide)

Thanks so much!
Alexander Karasulas

[jscheuer1]

Yep, the onbeforeslide has a typo here:

onbeforeslide: function(index){
	var lng = this.setting.imagearray.length;
	this.setting.$nav.removeClass('highlight').each(function(i){
		if(i % lng === index){
			this.className += 'highlight';
		}
	});
},

Should be (added space in added class name):

onbeforeslide: function(index){
	var lng = this.setting.imagearray.length;
	this.setting.$nav.removeClass('highlight').each(function(i){
		if(i % lng === index){
			this.className += ' highlight';
		}
	});
},

And there are other problems, this:

	navbut: '<a href="javascript:void(#%i)"><div class="navbut" style="background-image: url(images2/fadeshow_navbut.png);"></div></a>',

should be:

	navbut: '<div style="background-image: url(images2/fadeshow_navbut.png);"></div>',

The css should be:

.navbut {
	background-position: 0 0;
	width: 18px;
	height: 18px;
	margin: 4px;
	float: left;
}
.navbut.highlight{
	background-position: 0 18px;
}
#fadeshow1 {
	clear: left;
}

And this:

<div id="fadeshow1toggler"><img width="100px"><span class="bob"></span></div>
<div style="width: 846px; height: 101px;"><div id="fadeshow1"></div></div>

should be:

<div id="fadeshow1toggler"><div class="bob"></div></div>
<div style="width: 846px; height: 101px;"><div id="fadeshow1"></div></div>

[karasulas]

Thank you so much sir! Works perfectly! Very wonderful

That feels good

Gratefully,
Alexander Karasulas