Web Analytics Made Easy -
StatCounter image controls - CodingForum

Announcement

Collapse
No announcement yet.

image controls

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • image controls

    I have have an image viewer which contains a thumbnail and an enlarged picture. How can i have next and previous text which will move on to more pictures. See attached images (both).

    This is what i have for the image viewer:

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <style type="text/css">
    img { border: 1px solid #000 }
    
    #container {
    text-align: center;
    border: 0px solid #000;
    margin: 0 auto;
    height: 300px;
    width: 600px;
    padding: 20px
    }
    
    #leftcol img {
    margin: 10px;
    width: 100px;
    height: 100px
    }
    
    #rightcol img {
    margin: 10px;
    width: 200px;
    height: 200px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="container" style="width: 859px; height: 520px">
    
    <div id="rightcol">
    <img name="ImageOnly" src="firstimage.gif" width="350" height="350" />
    <p>&nbsp;</div>
    
    <div id="leftcol">
    
    <a href="#" onclick="ImageOnly.src='image1.gif'">
    <img src="image1.gif" width="350" height="350" /></a>
    <a href="#" onclick="ImageOnly.src='image2.gif'">
    <img src="image2.gif" width="350" height="350" /></a>
    <a href="#" onclick="ImageOnly.src='image3.gif'">
    <img src="image3.gif" width="350" height="350" /></a>
    <a href="#" onclick="ImageOnly.src='image4.gif'">
    <img src="image4.gif" width="350" height="350" /></a>
    <a href="#" onclick="ImageOnly.src='image5.gif'">
    <img src="image5.gif" width="350" height="350" /></a>
    <a href="#" onclick="ImageOnly.src='image6.gif'">
    <img src="image6.gif" width="350" height="350" /></a><br />
    &nbsp;&nbsp;&nbsp;
    </div>
    
    </div>
    
    </body>
    </html>
    Any help will be appreciated.
    Last edited by mw2005; Jul 31, 2005, 10:07 AM.
    Get Mozilla Firefox

  • #2
    have you googled for Slide Show?

    or

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="sssInit('ThumbNails','sssMainImg','sssMessage');zxcRemoveTNails();">
    <span class="Title2" >Simple Slide Show</span><br>
    A Simple Slide Show which includes<br>
    Display of a Large Image on Slide Show Forward or Back<br>
    Display of a Large Image on Clicking The Thumb Nail Image<br>
    Preloading of the Large Image before Displaying.<br>
    Directory Swapping when preloading the large image.<br>
    <br>
    Script<br>
    <br>
    <br>
    <table border=1 cellspacing=1 cell padding=1 bgcolor=#FFCC66>
      <tr height="20" >
        <td colspan="3" align="center" style="font-Size:12px;" >
         Click the Thumb Image to Enlarge<br>
         Click the Large Image<br>
         to View in Picture Frames
        </td>
      </tr>
      <tr height="200" >
        <td colspan="3" align="center" >
        <img id="sssMainImg" src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/Initial.gif"  >
        </td>
      </tr>
      <tr>
        <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" ></td>
        <td id="sssMessage" width=60 align="center" style="font-Size:12px;" >&nbsp;</td>
        <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" ></td>
      </tr>
    </table>
    
    <table id="ThumbNails" >
      <tr>
        <td align="center" width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
        <td align="center"  width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
        <td align="center"  width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
      </tr>
      <tr>
        <td align="center"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
        <td align="center" ><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
        <td align="center" ><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcRemoveTNails(){
      zxct=document.getElementById('ThumbNails');
      zxct.style.position='absolute';
      zxct.style.visibility='hidden';
    
    }
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Simple Slide Show sssPart1 (02-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // A Simple Slide Show which includes
    // Display of a Large Image on Slide Show Forward or Back
    // Display of a Large Image on Clicking The Thumb Nail Image
    // Preloading of the Large Image before Displaying
    // Directory Swapping when preloading the large image.
    
    // The Thumb Nail and Large Image must have the same file name but different directories.
    // Directory Swapping is carried outwhen preloading the large image.
    
    // Application Notes
    
    // The ThumbNail Images are defined in HTML Code and nested within an Element
    // e.g.
    //<table id="*ThumbNails*" >
    //  <tr>
    //    <td align="center" width="70"><img  src="ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
    //    <td align="center"  width="70"><img  src="ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
    //    <td align="center"  width="70"><img  src="ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
    //  </tr>
    //  <tr>
    //    <td align="center"><img  src="ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
    //    <td align="center" ><img  src="ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
    //    <td align="center" ><img  src="ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
    //  </tr>
    // </table>
    
    // where:
    // *ThumbNails* = a unique id name (string)
    
    // The Large Image is Defined in HTML Code
    // e.g.  <img id="*LargeImageID*" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    
    // where:
    // *LargeImage* = a unique id name (string)
    // A 'Blank' .gif is the initial image src.
    
    // The Slide Show Controls are Defined in HTML Code
    // e.g.
    // <table>
    //  <tr>
    //    <td width=70 align="center" >
    //      <img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" >
    //    </td>
    //    <td id="*Message*" width=60 align="center" style="font-Size:12px;" ></td>
    //    <td width=70 align="center" >
    //     <img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" >
    //    </td>
    //  </tr>
    // </table>
    
    // The onclick event call functions 'sssSSBack();' and 'sssSSFwd();' control the Side Show
    // A message to advise on Large Image preload statue is optional
    // where:
    // *Message* = a unique id name (string)
    
    // The Script is initalised from a <BODY> on load event
    // e.g. <body onload="sssInit('*ThumbNails*','*LargeImage*','*Message*');" >
    // where:
    // *ThumbNails* = a unique id name (string)
    // *LargeImage* = a unique id name (string)
    // *Message*    = a unique id name (string)
    
    // Directory Swapping
    // The Thumb Nail and Large Image must have the same file name
    // but different directories.
    // These Directories are defined in customising variables 'sssThumbDirectory' and 'sssLargeDirectory'
    // To allow a number of directory applications the directories are specified in dimensioned arrays.
    // When the directory of the Thumb Nail image matches a directory in 'sssThumbDirectory'
    // the location of the Large image will be the corresponding field of 'sssLargeDirectory'
    
    // All variable, function etc. names are prefixed with 'sss' to minimise conflicts with other JavaScripts.
    
    // The Functional Code sssPart2(less than 1.5K) is best as an Extenal JavaScript
    
    
    // Tested with IE6 and Mozilla FoxFire
    
    
    
    // Customising Variables
    
    var sssThumbDirectory = new Array('ThumbPortrait','ThumbLandScape');
    var sssMainDirectory  = new Array('LargePortrait','LargeLandScape');
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Simple Slide Show sssPart2 (02-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    // Functional Code - NO Need to change
    var sssTarget,sssImg,sssMess;
    var sssImgAry=new Array();
    var sssImage=new Array();
    
    var sssCnt=-1;
    
    function sssInit(tn,li,m){
     sssTarget=document.getElementById(li);
     sssImg=document.getElementById(tn).getElementsByTagName('IMG');
     sssMess=document.getElementById(m);
     for (sss0=0;sss0<sssImg.length;sss0++){
      sssImgAry[sss0]=sssImg[sss0];
      sssImg[sss0].nu=sss0-1;
      sssImg[sss0].onclick=function(){ sssCnt=this.nu; sssSSFwd(); }
     }
    }
    
    function sssSSBack(){
     sssCnt--;
     if (sssCnt<0){ sssCnt=sssImg.length-1; }
     sssLoad();
    }
    
    function sssSSFwd(){
     sssCnt++;
     if (sssCnt==sssImg.length){ sssCnt=0; }
     sssLoad();
    }
    
    function sssLoad(){
     if (sssImage[sssCnt]){
      sssTarget.src=sssImage[sssCnt].src;
     }
     else {
      if (sssMess){ sssMess.innerHTML='Please Wait'; }
      sssThisImg=sssImg[sssCnt];
      for (sss0=0;sss0<sssThumbDirectory.length;sss0++){
       sssImg[sssCnt].src=sssImg[sssCnt].src.replace(sssThumbDirectory[sss0],sssMainDirectory[sss0]);
      }
      sssImage[sssCnt]=new Image();
      sssImage[sssCnt].onload=function(){
                               if (sssMess){ sssMess.innerHTML='&nbsp;'; }
                               sssTarget.src=sssImage[sssCnt].src;
                              }
      sssImage[sssCnt].src=sssImg[sssCnt].src;
     }
    }
    
    
    
    //-->
    </script>
    
    </body>
    
    </html>
    I added function zxcRemoveTNails() to hide the thumbnails.
    Remove this from the <BODY> onload call to see the thumbnails

    These could be large images if you wish
    Last edited by vwphillips; Jul 31, 2005, 02:11 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

    Comment


    • #3
      That's what i already have.
      Get Mozilla Firefox

      Comment


      • #4
        Sorted!
        Get Mozilla Firefox

        Comment


        • #5
          http://www.vicsjavascripts.org.uk/Ba...hSlideShow.htm
          Vic

          God Loves You and will never love you less.

          http://www.vicsjavascripts.org/Home.htm

          If my post has been useful please donate to http://www.operationsmile.org.uk/

          Comment


          • #6
            This is the code of the final product. For more thumbnails at the bottom move your mouse left and right on the thubnails. If you click on one of the thumbnails it appears in a larger picture above. It also has a preloaded image at the start before you click on a thumbnail.

            NOTE: Currently it only works in IE

            Code:
            <style type="text/css">
            img { border: 1px solid #000 }
            
            #container {
            text-align: center;
            border: 0px solid #000;
            margin: 0 auto;
            height: 300px;
            width: 600px;
            padding: 20px
            }
            
            #leftcol img {
            margin: 10px;
            width: 100px;
            height: 100px
            }
            
            #rightcol img {
            margin: 10px;
            width: 200px;
            height: 200px;
            }
            
            </style>
            
            <style>
            
            #motioncontainer a img{ /*image border color*/
            border: 1px solid #ccc;
            }
            
            #motioncontainer a:hover img{ /*image border hover color*/
            border: 1px solid navy;
            }
            
            #motioncontainer a:hover{
            color: red; /* Dummy definition to overcome IE bug */
            }
            
            #statusdiv{
            position: absolute;
            padding: 2px;
            left: -300px;
            background-color: lightyellow;
            border: 0px solid gray;
            visibility: hidden;
            }
            </style>
            
            <script type="text/javascript">
            
            /***********************************************
            * CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
            * Visit http://www.dynamicDrive.com for source code
            * Last updated Mar 15th, 04'. Added "End of Gallery" message.
            * This copyright notice must stay intact for legal use
            ***********************************************/
            
            var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
            var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
            var endofgallerymsg="<span style='font-size: 11px'></span>" //3) message to show at end of gallery. Enter "" to disable message.
            
            function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
            var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
            var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to  default height
            var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
            window.open(path,"", winattributes)
            }
            
            ////NO NEED TO EDIT BELOW THIS LINE////////////
            
            var iedom=document.all||document.getElementById
            var scrollspeed=0
            var movestate=""
            
            var actualwidth=''
            var cross_scroll, ns_scroll
            var loadedyes=0
            
            function ietruebody(){
            return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
            }
            
            function creatediv(){
            statusdiv=document.createElement("div")
            statusdiv.setAttribute("id","statusdiv")
            document.body.appendChild(statusdiv)
            statusdiv=document.getElementById("statusdiv")
            statusdiv.innerHTML=endofgallerymsg
            }
            
            function positiondiv(){
            menuheight=parseInt(crossmain.offsetHeight)
            mainobjoffsetH=getposOffset(crossmain, "top")
            statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
            statusdiv.style.top=menuheight+mainobjoffsetH+"px"
            }
            
            function showhidediv(what){
            if (endofgallerymsg!="")
            statusdiv.style.visibility=what
            }
            
            function getposOffset(what, offsettype){
            var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
            var parentEl=what.offsetParent;
            while (parentEl!=null){
            totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
            parentEl=parentEl.offsetParent;
            }
            return totaloffset;
            }
            
            
            function moveleft(){
            if (loadedyes){
            movestate="left"
            if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
            cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
            showhidediv("hidden")
            }
            else
            showhidediv("visible")
            }
            lefttime=setTimeout("moveleft()",10)
            }
            
            function moveright(){
            if (loadedyes){
            movestate="right"
            if (iedom&&parseInt(cross_scroll.style.left)<0){
            cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
            showhidediv("hidden")
            }
            else
            showhidediv("visible")
            }
            righttime=setTimeout("moveright()",10)
            }
            
            function motionengine(e){
            var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
            var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
            var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
            curposy-=mainobjoffset-dsocx
            var leftbound=(menuwidth-restarea)/2
            var rightbound=(menuwidth+restarea)/2
            if (curposy>rightbound){
            scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed
            if (window.righttime) clearTimeout(righttime)
            if (movestate!="left") moveleft()
            }
            else if (curposy<leftbound){
            scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
            if (window.lefttime) clearTimeout(lefttime)
            if (movestate!="right") moveright()
            }
            else
            scrollspeed=0
            }
            
            function contains_ns6(a, b) {
            while (b.parentNode)
            if ((b = b.parentNode) == a)
            return true;
            return false;
            }
            
            function stopmotion(e){
            if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
            if (window.lefttime) clearTimeout(lefttime)
            if (window.righttime) clearTimeout(righttime)
            movestate=""
            }
            }
            
            function fillup(){
            if (iedom){
            crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
            menuwidth=parseInt(crossmain.style.width)
            mainobjoffset=getposOffset(crossmain, "left")
            cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
            actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth
            
            crossmain.onmousemove=function(e){
            motionengine(e)
            }
            
            crossmain.onmouseout=function(e){
            stopmotion(e)
            showhidediv("hidden")
            }
            }
            loadedyes=1
            if (endofgallerymsg!=""){
            creatediv()
            positiondiv()
            }
            }
            window.onload=fillup
            </script>
            <div id="container" style="width: 859px; height: 520px">
            
            <div id="rightcol">
            <img id="ImageOnly" name="ImageOnly" src="CLIP.GIF" width="350" height="350" />
            <p>&nbsp;</div>
            <div id="motioncontainer" style="position:relative;width:500px;height:200px;overflow:hidden;">
            <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;" align="center">
            
            <nobr id="trueContainer"><a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
            <div id="leftcol">
            <img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
            <img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
            <img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
            <img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
            <img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
            <img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
            <img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
            <img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
            <img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
            </nobr>
            
            </div>
            </div>
            <p>&nbsp;</p>
            Get Mozilla Firefox

            Comment

            Working...
            X