FadeSlideShow size

**kent101** · 09-27-2013, 02:56 PM

Hi

I'm using your FadeSlideShow to display some photos. The images in the code are set in pixels. Is there a way to set the size in percentage? I've made a liquid website and when it is displayed on smaller screens....I want my FadeSlideShow to scale accordingly.

Code:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "image1", //ID of blank DIV on page to house Slideshow
	dimensions: [690, 340], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["img/main_image_home_01.jpg",],
		["img/main_image_home_02.jpg",],
		["img/main_image_home_03.jpg",],
		["img/main_image_home_04.jpg",],
		["img/main_image_home_05.jpg",],
		["img/main_image_home_06.jpg",],
		["img/main_image_home_07.jpg",]
		 //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

I have the DIV:
<div id="fadeshow1"></div>
in my body. I need this DIV to scale 100% to it's parent div.
Is this possible?

Thanks for your help
K

**jscheuer1** · 09-27-2013, 04:24 PM

Use this unofficial version of the script (right click and 'Save As'):

fadeslideshowresp.js

It allows you to do like:

Code:

var mygallery=new fadeSlideShow({
 wrapperid: "image1", //ID of blank DIV on page to house Slideshow
 dimensions: ['100%', 340], //width, height of gallery in jQuery css dimensional valuesimage
 imagearray: [
 ["img/main_image_home_01.jpg",],
 ["img/main_image_home_02.jpg . . .

Set it just like that, with the second dimension set to the native height. But that's only part of it. You also have to setup an oninit and styles to go with it.

I just did this for someone a little while ago. Following that, you should setup your on page code like so:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "image1", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%', 340], //width, height of gallery in jQuery css dimensional values
	imagearray: [
		["img/main_image_home_01.jpg",],
		["img/main_image_home_02.jpg",],
		["img/main_image_home_03.jpg",],
		["img/main_image_home_04.jpg",],
		["img/main_image_home_05.jpg",],
		["img/main_image_home_06.jpg",],
		["img/main_image_home_07.jpg",]	//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "ondemand",
	//this code resizes the show based upon width of the parent div
	oninit: function(){
		var g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
		$wrap.height($wrap.width() * 340 / 690); //ratio for images (native dimensions height / width)
		if(!$wrap.data('descwidthsetup')){
			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({descwidthsetup: 'setup'});
		$wrap.trigger('mouseleave');
		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: ""
});

Notice the highlighted line. The red numbers are the native height / native width - that's needed to establish the ratio for resizing the container/images.

You will also need styles for the page like:

Code:

.gallerylayer img { /* make slide images scalable */
	height: auto !important;
	width: 100% !important;
	vertical-align: bottom;
	max-width: none;
}

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

Now, any of this might need to be tweaked for your specific page.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

For more info on this technique, see the original thread:

http://www.dynamicdrive.com/forums/s...idth-Slideshow

Demo (if it's still up):

http://www.digitalprecision.ca/newindex.php

**kent101** · 09-30-2013, 10:23 AM

Hi

Thanks for getting back to me. I tried your suggestion but the images aren't showing up. Can you take a quick look at my test link and see where I am going wrong?

http://www.ajna.ie/testing2/page1.html

Thanks again for your help.
K

**jscheuer1** · 09-30-2013, 05:48 PM

I had no idea that having no descriptions at all would break this, but it does. Use:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "image1", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%', 340], //width, height of gallery in jQuery css dimensional values
	imagearray: [
		["img/main_image_home_01.jpg",],
		["img/main_image_home_02.jpg",],
		["img/main_image_home_03.jpg",],
		["img/main_image_home_04.jpg",],
		["img/main_image_home_05.jpg",],
		["img/main_image_home_06.jpg",],
		["img/main_image_home_07.jpg",]	//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "ondemand",
	//this code resizes the show based upon width of the parent div
	oninit: function(){
		var g = this, s = g.setting, $wrap = s.$wrapperdiv;
		$wrap.height($wrap.width() * 340 / 690); //ratio for images (native dimensions height / width)
		if(!s.$descpanel || !s.$descpanel.length){
			if(!$wrap.data('descwidthsetup')){
				jQuery(window).resize(function(){s.oninit.apply(g);});
				$wrap.data('descwidthsetup', true);
			}
			return;
		}
		var $desc = s.$descpanel, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
		if(!$wrap.data('descwidthsetup')){
			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({descwidthsetup: 'setup'});
		$wrap.trigger('mouseleave');
		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: ""
});

That way if you get descriptions, it will still work, and works without them as well now.

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

One thing I noticed though after I fixed it is that the page isn't really all that fluid or responsive. Nothing else gets bigger when I resize the page, even the slideshow container gets no taller. As a result, as the images stretch proportionately to fit a wider page, they're cropped off at the bottom. Fortunately this doesn't really look all that bad with these images. But it might be disturbing to you since you know how they're "supposed" to look.

Oh, and I just noticed as well, more disturbingly, that as the slideshow container gets really narrow, since it doesn't get any shorter, the images get black borders top and/or bottom. Again this isn't horrible, but is worse than the cropping that I noticed at first. You can fix that by giving the slideshow div a min-width of 678px.