...

View Full Version : Picture Viewer multiple instances



tgavin
01-28-2006, 04:55 PM
Is it possible to have the Dynamic Picture Viewer (http://www.javascriptkit.com/script/script2/phpviewer/) run multiple times on a page?

This script is *perfect* for my application and would really like to put it into a php function. I'm tinkering with it, but can't get it to work because (I'm assuming) each instance needs to be uniquely named.

Thanks for any insight!

vwphillips
01-28-2006, 06:36 PM
A quick look at the script

the php is used to retrieve imag file names from a directory and populate an array on the page javascrip the uses the array to populate the selectlist to display the filile names and then selecting an image to display with a fade effect.

Now hat do you want to duplicate

if it is collecting the images there will need to be different directories for each set and produce an array for each set

as for the Js multiple swelects and displays are not a problem

tgavin
01-28-2006, 06:57 PM
A quick look at the script

the php is used to retrieve imag file names from a directory and populate an array on the page javascrip the uses the array to populate the selectlist to display the filile names and then selecting an image to display with a fade effect.

Now hat do you want to duplicate

if it is collecting the images there will need to be different directories for each set and produce an array for each set

as for the Js multiple swelects and displays are not a problem
Thanks for the reply.

I'm only using one directory, so that's not a problem.

I'm trying to have the script and browser itself ( the <select> menu and <div> tags) in a function. Since I need to rename each item in the function, the variable is $name. So what I'm trying to do basically - using the div as an example - is:
<?php echo "
<!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=ISO-8859-1\" />
<title>Untitled Document</title>
<style type=\"text/css\">
#"."$name"."picturearea {
filter: alpha(opacity=100);
-moz-opacity: 0;
}
</style>
<!-- Change path below to point to \"getpics.php\" on your server -->
<script src=\"getpics.php\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
<!-- Dynamic PHP Picture Viewer (v1.0)- By JavaScriptKit.com (http://www.javascriptkit.com) //--->
<!-- For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ //--->
<!-- This notice must stay intact for use //--->

function populateSelect(selectobj){
for (var i=0; i<picsarray.length; i++)
selectobj.options[selectobj.options.length]=new Option(picsarray[i], picsarray[i])
if (selectobj.options.length>1){
selectobj.selectedIndex=0
showpicture(document.getElementById(\"$name"."picsform\").$name"."picslist)
}
}

function showpicture(selectobj){
piccontainerobj=document.getElementById(\"$name"."picturearea\")
resetfade(10)
piccontainerobj.innerHTML='<img src=\"'+locationstring+selectobj.options[selectobj.selectedIndex].value+'\">'
fadepictoview=setInterval(\"gradualfade(piccontainerobj)\",50)
}

function resetfade(degree){
if (window.fadepictoview)
clearInterval(fadepictoview)
if (typeof piccontainerobj.style.MozOpacity==\"string\")
piccontainerobj.style.MozOpacity=degree/100
else if (piccontainerobj.filters)
piccontainerobj.filters.alpha.opacity=degree
}

function gradualfade(){
if (typeof piccontainerobj.style.MozOpacity==\"string\" && piccontainerobj.style.MozOpacity<1)
piccontainerobj.style.MozOpacity=Math.min(parseFloat(piccontainerobj.style.MozOpacity)+0.2, 0.99)
else if (piccontainerobj.filters && piccontainerobj.filters.alpha.opacity<100)
piccontainerobj.filters.alpha.opacity+=20
else //if not IE or Moz
clearInterval(fadepictoview)
}

window.onload=function(){
populateSelect(document.getElementById(\"$name"."picsform\").$name"."picslist)
}
</script>
</head>
<body>
<div style=\"float: left; width: 200px;\">
<form id=\"$name"."picsform\">
<select name=\"$name"."picslist\" size=\"4\" style=\"width: 200px\" onclick=\"showpicture(this)\">
</select>
</form>
</div>
<div id=\"$name"."picturearea\" style=\"float: left; width: 400px; height: 300px; margin-left: 20px; border:1px solid\"></div>
<br style=\"clear: left\" />
<p style=\"font: normal 11px Arial\">This free script provided by<br />
<a href=\"http://www.javascriptkit.com\">JavaScript Kit</a></p>
</body>
</html>
";
?>

But, none of that works. Looking at the source code after the page is parsed shows that the strings are there and were parsed correctly. But the script doesn't work.

vwphillips
01-28-2006, 08:59 PM
<!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=ISO-8859-1\" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// You Need to populate the array and this function in php

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array('One.gif','Two.gif','Three.gif','Four.gif');
var ImgAry2=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif');


window.onload=function(){
populateSelect('fred1','fred2',ImgAry,ImgPath);
populateSelect('tom1','tom2',ImgAry2,ImgPath);
}

/*]]>*/
</script>
<script type="text/javascript">
// by Vic Phillips http://www.vicsjavascripts.org.uk


function populateSelect(selid,picid,ary,pth){
var selectobj=document.getElementById(selid);
var picdivobj=document.getElementById(picid);
selectobj.picdiv=document.getElementById(picid);
selectobj.picimg=document.getElementById(picid).getElementsByTagName('IMG')[0];
zxcOpacity(selectobj.picimg.style,0);
for (var i=0; i<ary.length; i++){
selectobj.options[selectobj.options.length]=new Option(ary[i], pth+ary[i])
}
if (selectobj.options.length>1){
selectobj.selectedIndex=0
showpicture(selectobj);
}
}

function showpicture(selectobj){
zxcOpacity(selectobj.picimg.style,0);
selectobj.picimg.src=selectobj.options[selectobj.selectedIndex].value;
zxcEleOpacityDo(selectobj.picimg,5,100,0,100);
}

</script>
<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity (08-12-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// The effect is only valid for browsers which recognise the opacity property
// i.e. Mozilla Based Browsers plus IE5+, Netscape and Konkorer.
// The element must be a element which has opacity property
// (Images will need to be in a <DIV>)
// The initial opacity may be established from a <BODY> or window onload event call
// and the effect from any event call.
// Repeating the call will reverse the effect
// There may be as many application on a page as required.

// Application Notes

// **** Initialising the Opacity

// Normally established from a <BODY> or window onload event call
// The element must be allocated a unique ID name
// e.g. <body onload="zxcInitEleOpacity('Test1',500,10,10,50);">
// parameter 0 = unique ID name of the element (string)
// parameter 1 = the speed (1 = fast, 500 = slow) (digit)
// parameter 2 = the number of opacity steps (digit)
// parameter 3 = the start opacity value (0 to 100) (digit)
// parameter 4 = the finish opacity value (0 to 100) (digit)

// **** Executing the Effect
// e.g. <div id="Test1" onmouseover="zxcEleOpacityDo('Test1',500,10,10,50);" style="position:relative;width:100px;height:50px;background-color:red;" ></div>
// Where:
// parameter 0 = object or unique ID name of the element (object or string)
// NOTE: parameters 1 to 4 only need to be specified once and if the element opacity has not been initialised
// parameter 1 = the speed (1 = fast, 500 = slow) (digit)
// parameter 2 = the number of opacity steps (digit)
// parameter 3 = the start opacity value (0 to 100) (digit)
// parameter 4 = the finish opacity value (0 to 100) (digit)



// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts

// The Functional Code(about 2K) is best as an External JavaScript

// Tested with IE6 and Mozilla FireFox


// Functional Code - NO NEED to Change

var zxcCnt=0;

function zxcInitEleOpacity(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (!zxcm.oop){
zxcm.tog=true
zxcm.oop=new zxcOOPOpacEle(zxcm,zxcd,zxcstp,zxcsrt,zxcfin);
zxcOpacity(zxcm.style,zxcm.oop.inc[0]);
}
}

function zxcEleOpacityDo(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (!zxcm.oop){
zxcInitEleOpacity(zxcm,zxcd,zxcstp,zxcsrt,zxcfin);
}
clearTimeout(zxcm.oop.to);
// zxcm.oop.up();
// if (zxcm.tog){
zxcm.oop.cnt=0;
zxcm.oop.updown=true;
zxcm.oop.up();
// zxcm.tog=false;
// }
// else {
// zxcm.oop.updown=false;
// zxcm.oop.down();
// zxcm.tog=true;
// }
}

function zxcOOPOpacEle(zxcm,zxcd,zxcstp,zxcsrt,zxcfin){
this.obj=zxcm.style;
this.ref='zxcoopopac'+zxcCnt;
window[this.ref]=this;
this.updown=true;
this.cnt=0;
this.delay=zxcd;
this.inc=zxcSteps(zxcstp,[zxcsrt,zxcfin]);
if (zxcsrt>zxcfin){ this.inc=this.inc.reverse(); }
this.to=null;
zxcCnt++;
}

zxcOOPOpacEle.prototype.down=function(){
zxcOpacity(this.obj,(this.inc[this.cnt]));
if (this.cnt>0&&!this.updown){ this.cnt--; this.setTimeOut("down();",this.delay); }
}

zxcOOPOpacEle.prototype.up=function(){
zxcOpacity(this.obj,(this.inc[this.cnt]));
if (this.cnt<this.inc.length-1&&this.updown){ this.cnt++; this.setTimeOut("up();",this.delay); }
}

zxcOOPOpacEle.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}

function zxcOpacity(zxcobj,zxcop) {
if (zxcop>100||zxcop<0){ return }
if (zxcobj.MozOpacity!=null){ zxcobj.MozOpacity=(zxcop/100)-.001; }
else if (zxcobj.opacity!=null){ zxcobj.opacity=(zxcop/100)-.001; }
else if (zxcobj.filter!=null){ zxcobj.filter = 'alpha(opacity='+zxcop+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcop/100)-.001; }
}

function zxcSteps(zxcstps,zxcsary){
zxctary=[];
for (zxc1=0;zxc1<zxcstps;zxc1++){
zxctary[zxc1]=Math.floor(Math.abs((zxcsary[0]-zxcsary[1])/(zxcstps-1))*zxc1+Math.min(zxcsary[0],zxcsary[1]))
}
if (zxcsary[2]>zxcsary[3]){ zxctary=zxctary.reverse(); }
return zxctary
}

//-->
</script>
</head>
<body>
<select id="fred1" size="4" style="width:200px" onchange="showpicture(this);">
</select>
</form>
<div id="fred2" style="position:relative;width: 400px; height: 300px; margin-left: 20px; border:1px solid">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
</div>
<br /><br />
<select id="tom1" size="5" style="width:200px" onchange="showpicture(this);">
</select>
</form>
</div>
<div id="tom2" style="position:relative; width: 400px; height: 300px; margin-left: 20px; border:1px solid">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
</div>


</body>
</html>



I'm only using one directory, so that's not a problem.

IT IS a problem if you want to use the php code on the link you posted!

tgavin
01-29-2006, 02:07 AM
Just what I was looking for.
Works as i had hoped.
You saved my booty.

Thank you VERY, VERY much!

tgavin
01-29-2006, 01:34 PM
This is in a form.
How would I get the value of the selected picture and POST it to the form processor?

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum