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

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/dynamicindex14/fadeinslideshow.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..

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):

<!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">

</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.