Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Picture Viewer multiple instances

    Is it possible to have the Dynamic Picture Viewer 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!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    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 Code:
    <?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.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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=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!

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just what I was looking for.
    Works as i had hoped.
    You saved my booty.

    Thank you VERY, VERY much!

  • #6
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is in a form.
    How would I get the value of the selected picture and POST it to the form processor?

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •