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

**h0rhay** · 08-13-2011, 03:52 PM

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

**azoomer** · 08-15-2011, 06:19 PM

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.

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions