Results 1 to 2 of 2

Thread: Ultimate Fade-in slideshow (v2.4), but Liquid or Fluid?

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

    Default Ultimate Fade-in slideshow (v2.4), but Liquid or Fluid?

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

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

    3) Describe problem:

    Hi, I'm currently building a liquid site,

    I'm using max-width and height in the css for static images, with a hack for ie. Which is working nicely, the images are resizing and re-rendering according to browser width.

    I'm using this script for the main hero image on the site.. (Ultimate Fade-in slideshow v2.4)

    Just wondered if its possible to make it liquid, and re-size according to the browser width?

    The height and width dimensions are set here in the code..

    Code:
    var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [659, 343], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    
    ["images/CD-BlueBowl-Pottery-Hero.jpg"],
    ["images/CD-The-Pottery-Bungay-Hero.jpg"]
    
    ],
    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: ""
    })
    Is there a simple way of making this effect work with a liquid layout, or would it involve a whole load more jquery scripting.. I'm learning, but not up to that yet!

    Thanks in advance for any advice y'all may have,

    George

    ps, I tried posting this in another forum section but got no replies, I'm hoping I've now put it in the right place

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Maybe something like this could work (somehow):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <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/11l7ls0.jpg", "", "", ""],
    		["http://i29.tinypic.com/xp3hns.jpg", ""],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.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: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    </script>
    
    
    <style type="text/css">
    <!--
    body{ 
        margin:0; 
    	padding:0; 
        overflow:hidden;
    }
    #fadeshow1 { 
        margin-left:auto; 
    	margin-right:auto; 
    	margin-top:5%;
    }
    .gallerylayer{ 
        background-color:#FFF !important;
    }
    -->
    </style>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    			jQuery('#fadeshow1').css({
    			'width':'90%',
    			'height':'800px'			
    			});			
    			jQuery('.gallerylayer img').css({
    			'width':'100%',
    			'height':'auto'
    		});
    });
    						  
    
    </script>
    
    
    </head>
    
    <body>
    
    <div id="fadeshow1"></div>
    
    
    </body>
    </html>
    You could adjust it to your needs. Surely it would look better with images in a higher resolution.

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
  •