Results 1 to 5 of 5

Thread: FadeSlideShow size

  1. #1
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default FadeSlideShow size

    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
    Last edited by jscheuer1; 09-27-2013 at 04:26 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 09-28-2013 at 01:10 AM. Reason: add link to original thread where this was done
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-30-2013 at 06:10 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That worked perfectly. Thank you very much for your help!!!!!!!!

Similar Threads

  1. Help with FadeSlideShow
    By farrimondo in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 03-13-2012, 02:54 PM
  2. Replies: 2
    Last Post: 12-14-2011, 04:00 AM
  3. fadeslideshow.js
    By robburne in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-07-2010, 09:01 AM
  4. FadeSlideShow
    By marquezs in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-31-2010, 12:58 PM
  5. 3 Size Fonts and 3 Size Layout
    By Mehok in forum Looking for such a script or service
    Replies: 3
    Last Post: 02-05-2008, 06:47 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •