PDA

View Full Version : Help adding functionality



gtsears
03-13-2005, 08:45 PM
Flexi Slideshow
http://www.dynamicdrive.com/dynamicindex14/flexislide.htm

I need help understanding how this works.

Flexi Slideshow is especially nice due to its URL and caption capability, however it doesn't center or size images to the window. I'd like to add centering, dynamic image sizing, and the ability to reload when the user resizes the window. I have been partially successful at adding those features by combining Flexi Slideshow with the two scripts (DYNAMIC SIZED IMAGE and RELOAD ON RESIZE) pasted below. I say partially in that while the image doesn't display, its outline centers, sizes to the window and resizes when the window is resized by the user.

I mostly understand what's happening in DYNAMIC SIZED IMAGE and RELOAD ON RESIZE, I don't understand a good deal of the 2nd half of Flexi Slideshow. If I can get a better understanding of Flexi Slideshow, I may be able to get the image to display.

The partially working script is pasted at the bottom.

Thanks for help or efforts

Gene

PS. If you have scripts with the same functionality as DYNAMIC SIZED IMAGE and RELOAD ON RESIZE, I would be happy to use them instead.




Scripts Here:

=Begin DYNAMIC SIZED IMAGE==

<!-- TWO STEPS TO INSTALL DYNAMIC SIZED IMAGE:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ed Churnside -->
<!-- Web Site: http://www.dragonquest.com/inddpl.htm -->

<!-- Additional documention available online at -->
<!-- http://www.dragonquest.com/dplsspic.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "left";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 24;
if(bh == null) bh = 24;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<script language="javascript">
showpic("crowd.gif", 362, 113, "A crowd of people", "middle");
</script>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 1.64 KB -->
=End DYNAMIC SIZED IMAGE==









=Begin RELOAD ON RESIZE==

<!-- ONE STEP TO INSTALL RELOAD ON RESIZE:

1. Add the onLoad event handler into the BODY tag -->

<!-- STEP ONE: Insert the onLoad event handler into your BODY tag -->

<BODY onResize="window.location.href = window.location.href;">

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
=End RELOAD ON RESIZE==









=Begin Partially Working Script==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Flexi Slideshow</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ed Churnside -->
<!-- Web Site: http://www.dragonquest.com/inddpl.htm -->
<!-- Additional documention available online at -->
<!-- http://www.dragonquest.com/dplsspic.htm -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "left";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 24;
if(bh == null) bh = 24;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<center><img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'"></center>');
}
// End -->
</script>

</head>

<BODY onResize="window.location.href = window.location.href;">

<script language="JavaScript1.2">

/********
* Flexi Slideshow Resolution Aware- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Hamid F. Fard (hamid@petanet.com ) -->
<!-- Web Site: http://www.petanet.com -->
<!-- Begin
********/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['slide001.png', '', '']
variableslide[1]=['slide001a.gif', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

<!-- var slidewidth='546px' //set to width of LARGEST image in your slideshow -->
<!-- var slideheight='420px' //set to height of LARGEST iamge in your slideshow, plus any text description -->
<!-- var slidebgcolor='#F3F3F3' -->

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=2500

////Do not edit pass this line////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)

<!-- showpic("slide001.png", 1024, 768, "", "middle"); -->
showpic(variableslide[currentslide], 1024, 768, "", "middle");
<!-- showpic("<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>");
<!-- document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') -->
<!-- document.write('<center><div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div></center>') -->

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

<!--
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p> -->

</body>

</html>

=End Partially Working Script==