Code for scalable images in fadeSlideShow

[More2Do]

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 there a way to modify the existing code that would allow images in a Fade Slideshow to scale in a responsive website?

Thanks!

[jscheuer1]

responsive website

is a vague term. Generally it means you get different dimensions and/or layout for different resolutions, but exactly how that plays out depends upon the template/scheme you're using to achieve that. You can set in css (all display images in a slideshow are in two script created div elements with a class of 'gallerylayer'):

.gallerylayer img {
	max-width: 300px;
	max-height: 200px;
}

And I suppose you could use media queries/qualifiers and/or javascript to test for the res and have different ones for different resolutions.

I'm not sure if the slideshow would be responsive to that or not (the best chance would of course be if these styles are set before the page is parsed), but if not, it could be made to be easily enough. You would presumably also want to set the width and height for the slideshow accordingly (the dimensions property in the new fadeSlideShow call on the page):

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l . . .

That would probably have to be done via javascript.

If you more or less know what you're doing, that should be enough (assuming, like I say, that the slideshow is responsive to the max-width/height style declarations). In any case, if you get it setup and it's still not working, let me have a look at it (post a link to a live demo). In the meantime, I will do a quick check to see if the script is responsive to max-width/height, I seem to recall that it is, not 100% sure though.

OK, I just tested that, and that much (being responsive to max-width/height) works.

[More2Do]

Hi John,

Thanks for your reply. Code-wise, I think I'm a bit over my head on this one. I'm building a "responsive" website, which allows the webpage to be resized for different viewports (i.e., ipads, mobile phones, desktop models). I'm able to use a css script (img class="scalable") for all of the static images in the site, but not sure how to make it work for the slideshow. The site can be found at: http://www.ianzitidesign.com/test/index-fluid.html

Any help greatly appreciated!

[jscheuer1]

OK, well let's see .scalable is:

/*Utility Rules for images. Scalable class makes images scale with window size.*/
img.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	vertical-align: bottom;
}

That means that the images will never be any wider than they actually are, but that if where they are is narrower than they are, they will scale down to fit the width. And playing with the demo page you linked to, it appears that width is the primary concern.

First backup what you have, just in case. Then where you have (which only does the gallerylayer divs, there is no id="fadeSlideShow" element):

<!--This code changes the background color from black to white-->
<style type="text/css">
#fadeSlideShow, #fadeSlideShow, .gallerylayer {
	background-color: white !important;
}
</style>
<!--End background color code change-->

Make that (the margin-left for the .descpanelfg selector eliminates the need for all those   characters in the imagearray, and will allow for proper formatting of multi-line descriptions):

<!-- This code changes the background color to white, makes the slide images scalable and moves descriptions to the left -->
<style type="text/css">
#banner, .gallerylayer {
	background-color: white !important;
}
.gallerylayer img {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	vertical-align: bottom;
}
.descpanelfg {
	margin-left: 28px;
}
</style>
<!-- End image scalability, background color change, format descriptions code -->

And for what follows, update jQuery. Change:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

to:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Now what about the slideshow itself? It has:

var mygallery=new fadeSlideShow({
	wrapperid: "banner", //ID of blank DIV on page to house Slideshow
	dimensions: [960, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["image . . .

Here's a rewrite of the script, where you can specify the dimensions as percents or any other valid css dimensional value (right click and 'Save As'):

fadeslideshowresp.js

Oh, and you need the loading image, put it in the same folder as your page (also right click and save as):



And replace the whole var mygallery=new fadeSlideShow({ section with (Notice that since the percent is not a raw number it has to be quoted):

var mygallery=new fadeSlideShow({
	wrapperid: "banner", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%', 350], //width/height of gallery in css dimensional values.
	imagearray: [
		["images/banner_A.jpg", "", "", "Information about banner image A goes here"],
		["images/banner_B.jpg", "", "", "Information about banner image B goes here"],
		["images/banner_C.jpg", "", "", "Information about banner image C goes here"],
		["images/banner_D.jpg", "", "", "Information about banner image D goes here"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
	oninit: function(){
		var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm;
		$wrap.css({height: (h = $wrap.width() * 350 / 960)});
		if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));}
		else{jQuery(window).resize(function(){s.oninit.apply(g);});}
		$wrap.data({mm: function(e){
			var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
			evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
			evt && $wrap.trigger(evt);
			descvis = evt !== 'mouseleave';
			s.ismouseover = true;
		}, ml: function(){descvis = false;}});
		$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
		this.showhidedescpanel('hide', 0);
		$desc.find('div').css({width: $desc.width() - 8});
	},	
	togglerid: ""
})

Notice also the highlighted line with the red 350 / 960, that's the ratio we want to maintain. It's the actual height over the actual width. If those change then they need to be updated there as well. And see that the   characters are no longer needed in the imagearray

The browser cache may need to be cleared and/or the page refreshed to see changes.

[More2Do]

Thanks, John...this is way more complicated than I thought. The slideshow now scales, however, the proportions seem to change in the narrower viewports (iPad, or making the desktop browser window narrower). As a result, the slideshow move down, away from the navigation bar and the bottom of the images are cutting off. Any suggestions?

http://www.ianzitidesign.com/test/index-fluid.html

Jon

[jscheuer1]

You have the updated script, but you're not using it. Change:

<script type="text/javascript" src="Scripts/fadeslideshow.js">
</script>

to:

<script type="text/javascript" src="Scripts/fadeslideshowresp.js">
</script>

I should have mentioned that before, but I thought it was obvious, sorry.

Just a little while ago I edited things in my previous post. The code and styles are a little better, more efficient. But what you currently have works in a local mock up of the page, provided it uses the updated script. And provided you didn't miss anything else that I'm not seeing. I think you got everything else though.

Oh, and you still don't have the loading.gif image. Grab it from my previous post and put it in the same folder as the page. Not having it will not prevent the script from working, but it will make things look odd on load for first time visitors and anyone whose cache no longer contains the slide images.

After taking care of the script src attribute and uploading the loading.gif image, the browser cache may need to be cleared and/or the page refreshed to see changes.

Any further questions or problems, just let me know.

[More2Do]

Hi John,

Sorry, one thing I missed. When I click on the LegacyPTLA logo (home button), the first image in the slideshow has the previous issue (not sized correctly and moved down, away from the navigation bar). Once slide #2 kicks in, the slideshow adjusts to its correct size. It only happens when viewed in smaller view ports. I haven't touched your code since this morning, but I have been editing the css file. Could this be the problem?

http://www.ianzitidesign.com/test/index-fluid.html

[jscheuer1]

OK, replace:

<!-- This code changes the background color from black to white and makes the slide images scalable -->
<style type="text/css">
#banner, .gallerylayer {
	background-color: white !important;
}
.gallerylayer img {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	vertical-align: bottom;
}
.descpanelfg {
	margin-left: 33px;
}
</style>
<!-- End image scalability and background color change code -->

with:

<!-- styles for slideshow -->
<style type="text/css">
#banner, .gallerylayer {
	background-color: white !important; /* change bg color to white */
}
.gallerylayer img { /* make slide images scalable */
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	vertical-align: bottom;
	margin-top: 0 !important; /* ensure a slide image is always at the top of the #banner container */
}
.descpanelfg {
	margin-left: 33px; /* provide left margin for description text */
}
</style>
<!-- End slideshow styles -->

The key part is the overriding margin-top: 0 !important; style for the images, that prevents the first one from appearing too low in the situation you mentioned.

Though not required to fix this, I would also recommend updating to this code for the new fadeSlidShow() call:

var mygallery=new fadeSlideShow({
	wrapperid: "banner", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%', 350], //width/height of gallery in css dimensional values.
	imagearray: [
		["images/banner_A.jpg", "", "", "Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here "],
		["images/banner_B.jpg", "", "", "Information about banner image B goes here"],
		["images/banner_C.jpg", "", "", "Information about banner image C goes here"],
		["images/banner_D.jpg", "", "", "Information about banner image D goes here"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
	oninit: function(){
		var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm,
			$dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
		$wrap.css({height: (h = $wrap.width() * 350 / 960)});
		if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));
		} else {
			jQuery(window).resize(function(){s.oninit.apply(g);});
			function stripwidth($el){
				var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
				el = extras.length, extra = 0, v;
				while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
				return extra;
			}
			s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
		}
		$wrap.data({mm: function(e){
			var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
			evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
			evt && $wrap.trigger(evt);
			descvis = evt !== 'mouseleave';
			s.ismouseover = true;
		}, ml: function(){descvis = false;}});
		$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
		this.showhidedescpanel('hide', 0);
		$dbg.width($desc.width() - s.descwidthminus[0]);
		$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
	},	
	togglerid: ""
})

It is, as I mentioned before more efficient. And it now includes a method to correctly set the width of the description foreground and background divs so that not only are they not too narrow (if switching from a narrower window onload to a wider one via resizing - that part was already working), but also (by taking into account their border, padding, and/or margin - if they have any of those, which they currently do) not too wide, which is important if there is more than one line in a description, or even a line that is the width of the slideshow, as without this fine tuning, part of the ends of long description lines would become hidden on the left.

One final tweak, for now at least, I've updated the main script again to use a loading div (with the background the loading image centered, instead of an img tag which the script would then have to calculate the scalar dimensions of the show to properly center). This allows the loading image to appear centered regardless of the width or height of the scalable slideshow at load time (right click and 'Save As'):

fadeslideshowresp.js

I did this because while testing the problem you mentioned I emptied the cache, which caused the loading image to appear briefly as the slide images loaded. It was off center low, just like the image was, and the css that fixed that for slide image did not correct things for the loading image.

[More2Do]

John, this works beautifully...I'm back in business. Thank you so much for your support! -Jon

[More2Do]

Hi John,

Sorry, I just noticed one more issue. On slide #1, the peekaboo option shows the content for all four slides. Any fix for this?

Thanks, as always!