PDA

View Full Version : how to make translucent slideshow reduce to the size of the viewer's screen size



rmather
03-03-2014, 12:21 PM
1) Script Title: translucent slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/translucentslide.htm

3) Describe problem: In an effort to make this slideshow responsive (reduce to the size of the viewport), I found the following which does reduce the slideshow window:
window.onload=function(){
var elem = document.getElementById('myslideshow');
elem.style.width = 98 + "%";
}

Now I need to give each of the images a percentage width so that they will also reduce. Does anyone know how to write that or add to the above to include the images?

Thanks,
Ruth

rmather
03-04-2014, 08:06 PM
Well, I figured out one solution. I resized all the images - twice. Then I put this in the head:


<script src="translucentslideshow.js" type="text/javascript">
/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">
{var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["Glass/G1.jpg"],["Glass/G2.jpg"],["Glass/G3.jpg"],["Glass/G4.jpg"],["Glass/G5.jpg"],["Glass/G6.jpg"],["Glass/G7.jpg"],["Glass/G8.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:0, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: false, //remember last viewed slide and recall within same session?
slideduration: 1000 //transition duration (milliseconds)
})
}
</script>
<script type="text/javascript">
if (document.documentElement.clientWidth <650)
var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [450, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["Glass/G1a.jpg"],["Glass/G2a.jpg"],["Glass/G3a.jpg"],["Glass/G4a.jpg"],["Glass/G5a.jpg"],["Glass/G6a.jpg"],["Glass/G7a.jpg"],["Glass/G8a.jpg"] //<--no trailing comma after very last image element!
]
})
</script>
<script type="text/javascript">
if (document.documentElement.clientWidth <500)
var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["Glass/G1b.jpg"],["Glass/G2b.jpg"],["Glass/G3b.jpg"],["Glass/G4b.jpg"],["Glass/G5b.jpg"],["Glass/G6b.jpg"],["Glass/G7b.jpg"],["Glass/G8b.jpg"] //<--no trailing comma after very last image element!
]
})
</script>

and this in the body tag:

<body onResize="window.location=window.location;">

There must be a better way, though! If anyone knows how to write this any better, let me know. I do not know javascript. I'm just using logic and snippets I find online.

Ruth
P.S.
the page is at http://www.anasigns.biz/glass.shtml