Can the Ultimate Fade-in slideshow work with DOM Image Rollover v3.0?

[javajones]

1) Script Title:
Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
Is it possible to have your slideshow set up to showcase black and white images, then when the user mouses over the image, it calls the color version of the image to respond much like the DOM Image Rollover v3.0? I'm wondering if the two can be combined, or if there might even be a way to use the "description" setting to overlay the color photos using an img=source as opposed to text?

I would love to know how to achieve that effect within the slideshow itself. Thank you to anyone who may be able to help!

Cheers

[jscheuer1]

Sure. It would be easier if you had a naming convention. Like:

bw_whatever.jpg - for the black and white version

and:

whatever.jpg - for the color version

Do you already have the images and are they kind of like that, with just a little difference between the filename for each set? If you do, we can tweak what follows to conform to it. For now I'm going to write it as though the files are named as in the example above.

So for the init of the slideshow, put like:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [470, 502], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
			["bw_whatever.jpg"],
			["bw_next.jpg"],
			["bw_another.jpg"],
			["bw_yet_another.jpg"] //<--no trailing comma after very last image element!
		],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: "",
	oninit: function(){
		var $ = jQuery, s = this.setting, w = s.$wrapperdiv.get(0), i, re = /bw_/, m, operaVersion = 7;
		s.$gallerylayers.find('img').each(function(){
			$(this).addClass('domroll ' + this.src.replace(re, ''));
		});
		(function() {
			if (window.opera) {
				operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
			}
			if (!document.getElementById||operaVersion <7) return;
			var imgarr=w.getElementsByTagName('img');
			var imgPreload=[];
			var imgSrc=[];
			var imgClass=[];
			for (i=0;i<imgarr.length;i++){
				if (imgarr[i].className.indexOf('domroll')!=-1){
					imgSrc[i]=imgarr[i].getAttribute('src');
					imgClass[i]=imgarr[i].className;
					imgPreload[i]=new Image();
					if ((m = imgClass[i].match(/domroll (\S+)/))) {
						imgPreload[i].src = m[1]
					}
					imgarr[i].setAttribute('xsrc', imgSrc[i]);
					imgarr[i].onmouseover=function(){
						this.setAttribute('src', this.className.match(/domroll (\S+)/)[1]);
					}
					imgarr[i].onmouseout=function(){
						this.setAttribute('src', this.getAttribute('xsrc'));
					}
				}
			}
		})();
	}
})

Untested. If there are problems and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Edit: Note: I've corrected this code as per the problem identified in the following two posts in this thread (#3 and #4), so it's now tested and works.

[javajones]

Hi John,

I can't thank you enough for helping me with this. Here's a link to a test page I uploaded on a friend's FTP:

http://www.donnaromanievents.com/ult...n-DOMroll.html

I name all my images in a similar fashion, but for the purpose of testing this out, I adopted your convention exactly using the (bw_) prefix. For some reason the DOM effect doesn't want to work just yet. Any thoughts?

Thank you again for your assistance with this. I really appreciate it.

Jason

[jscheuer1]

Ooops, I made a mistake. Aside from that, you no longer need:

<script src="js/chrisdomroll.js">

/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/

</script>

It could cause problems. So get rid of it. If you need other rollovers, other than those in the show, we can tweak the code in the init for the show to include the entire page. Right now, for the sake of efficiency, it only checks within the show.

But the main problem is that I made a mistake in logic. Where I (now we) have:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [940, 670], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
			["bw_agingwell.jpg"],
			["bw_blossoms.jpg"],
			["bw_desire.jpg"] //no trailing comma after very last image element!
		],
	displaymode: {type:'manual', pause:4000, cycles:0, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: "fadeshow1toggler",
	oninit: function(){
		var $ = jQuery, s = this.setting, w = s.$wrapperdiv.get(0), i, re = /bw_/, m, operaVersion = 0;
		s.$gallerylayers.find('img').each(function(){
			$(this).addClass('dom . . .

That highlighted line should be:

var $ = jQuery, s = this.setting, w = s.$wrapperdiv.get(0), i, re = /bw_/, m, operaVersion = 7;

Taking out the extra script as I mention above and fixing my boo-boo will get it running like a champ.

[javajones]

John, you are the man. THANK YOU so much. This is just the finishing touch I needed for my site. I appreciate all your help. I hope I can return the favor one day ...

Cheers,
Jason

[jscheuer1]

You're welcome. I was playing around with this a bit more and found this much more efficient method:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [940, 670], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
			["bw_agingwell.jpg"],
			["bw_blossoms.jpg"],
			["bw_desire.jpg"] //no trailing comma after very last image element!
		],
	displaymode: {type:'manual', pause:4000, cycles:0, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: "fadeshow1toggler",
	oninit: function(){
		var $ = jQuery, re = /bw_/;
		this.setting.$gallerylayers.find('img').each(function(){
			var im = $(this), orig = im.attr('src'), roll = orig.replace(re, '');
			$(new Image()).bind('load error', function(){
				im.hover(function(){this.src = roll;}, function(){this.src = orig;});
			}).attr('src', roll);
		});
	}
})

[javajones]

Wow that's even better! Thank you for taking so much time on this. I actually ran into a snag with the other code for some reason once I got it on my server, but then I noticed this new post of yours and it fixed it! Problem solved. Thank you again for all your help. Couldn't have done it without you. Once I get my site up I'll be sure to send you the link ...

Take care!