www.webdeveloper.com
Results 1 to 9 of 9

Thread: Simple Javascript image gallery

  1. #1
    Join Date
    Feb 2012
    Posts
    7

    Post Simple Javascript image gallery

    Hi,

    i am currently making a website for my boss, i went to university and did computer science but havent done a website in about 3 years haha

    i have a simple page layout of a

    top banner incl, logo and nav

    content incl, small thumb nail pics in one div and another larger div for the clicked image next to it.

    then a footer.

    My question is, how would i go around clicking on one of the thumb nails and it going full size in the div next to it??

    I want it to do more than this but once iv got the idea, it will all come flooding back.

    thanks
    Lee
    Mogul Creative

  2. #2
    Join Date
    Nov 2010
    Posts
    1,086
    something like this I guess:

    Code:
    <html>
    <head>
    <style>
    .thumb{
    height:100px;
    width:100px
    }
    #main{
    height:400px;
    width:400px;
    visibility:hidden
    }
    </style>
    </head>
    <body>
    
    <img id="main"></div>
    
    <img class="thumb" src="pic1.jpg" onclick="showPic(this.src)"/>
    <img class="thumb" src="pic2.jpg" onclick="showPic(this.src)"/>
    <img class="thumb" src="pic3.jpg" onclick="showPic(this.src)"/>
    <script type="text/javascript">
    
    function showPic(pic) {
    document.getElementById("main").style.visibility="visible"
    document.getElementById("main").src=pic
    		}
    
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    It's to possible to works (without class="thumb") with suffix for small images (like pic1_min.jpg for example). Then to remove this suffix in the function showPic :

    Code:
    function showPic(pic) {var bigPic = pic.replace(/_min/,'');
       document.getElementById("main").style.visibility="visible"
       document.getElementById("main").src=bigPic;
    }
    This method avoid to load the big images at first, without forbidding to preload it with a script at the end of the body...

  4. #4
    Join Date
    Feb 2012
    Posts
    7

    Post the next question is .... :)

    thanks for the replies, i finally got it working, but having smaller images on the left and a loadarea on the right this once hovered over showed the exact size image in the load area, heres the code

    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody>
        <tr>
          <td style="border-left: 1px solid rgb(0, 153, 51); border-bottom: 1px solid rgb(0, 153, 51); width: 100px; padding-top: 40px; padding-left: 10px;" valign="top" width="20%"> <a title="" rev="targetdiv:loadarea" rel="enlargeimage" href="img/conifer.jpg"><img src="img/conifersm.jpg"> </a><br>
    
          <br>
          <a rev="targetdiv:loadarea" rel="enlargeimage" href="img/p1.jpg">
          <img src="img/p1sm.jpg"></a> <br>
          <br>
          <a title="" rev="targetdiv:loadarea" rel="enlargeimage" href="img/p2.jpg"> <img src="img/p2sm.jpg"></a> </td>
          <td style="border-bottom: 1px solid rgb(0, 153, 51); width: 100px; padding-left: 10px; padding-top: 40px;" valign="top" width="20%"> <a title="" rev="targetdiv:loadarea" rel="enlargeimage" href="img/bak1.jpg"><img src="img/bak1sm.jpg"> </a><br>
    
          <br>
          <a rev="targetdiv:loadarea" rel="enlargeimage" href="img/bar2.jpg">
          <img src="img/bar2sm.jpg"></a> <br>
          <br>
          <a rev="targetdiv:loadarea" rel="enlargeimage" href="img/beck.jpg"><img src="img/becksm.jpg"></a> </td>
          <td style="border-style: none solid solid none; border-color: rgb(102, 102, 102) rgb(0, 153, 51) rgb(0, 153, 51) rgb(102, 102, 102); border-width: 1px; width: 10px; padding-left: 10px; padding-top: 40px;" valign="top" width="20%"> <a title="" rev="targetdiv:loadarea" rel="enlargeimage" href="img/crookes.jpg"><img src="img/crookessm.jpg">
          </a><br>
    
          <br>
          <a rev="targetdiv:loadarea" rel="enlargeimage" href="img/bar2.jpg">
          <img src="img/bar2sm.jpg"></a> <br>
          <br>
          <a rev="targetdiv:loadarea" rel="enlargeimage" href="img/beck.jpg"><img src="img/becksm.jpg"></a> </td>
          <td width="80">
          <div id="loadarea" style="border-style: solid; border-width: 1px; padding: 2px; width: 510px; height: 383px; float: right;">
          <div style="display: block;"><img style="border-width: 0pt;" src=""> <br>
    
          </div>
          </div>
          </td>
        </tr>
      </tbody>
    </table>
    the next question is, after i have an image in the loadarea, i want to be able to have more images behind it so i can navigate through them, so as its for a gardening company, i have 9 small images of 9 different gardens when i click on the first it shows all images from that garden.

    thinking about it i could do the same as in the code above but sent more images to the loadarea but then i still need a way to navigate them.

    Any ideas???

  5. #5
    Join Date
    Nov 2010
    Posts
    1,086
    I'm not sure what "have more images behind" means, but if I guess correctly, I would suggest that you have each set of 9 images stored in an array that, when you click on the main image, it populates a table (or whatever) with the corresponding 9 images.

    It's not so complicated - if you are struggling, set up the html and give us the full pathnames of the images and we can give you the function to make it happen.

  6. #6
    Join Date
    Feb 2012
    Posts
    7
    thanks mate, i did one in university where i stacked them up in the same div and obviously you could only see the top one, then when you navigate through them it moves the order so the next image appears but having an array sounds like a cleaner way of doing it.

    i will have a go and if i struggle i will send you the pathnames as you said.

    thanks again

  7. #7
    Join Date
    Nov 2010
    Posts
    1,086
    here's a slideshow script I wrote for another post, maybe it will give you some ideas. The idea is that the "preview" slideshow shows the first image from each array, then clicking on that image loads all of the images from that array into the slideshow.

    Not what you want, I know, but kind of similar...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>
    #slide:hover{
    cursor:pointer;
    }
    </style>
    </head>
    <body>
    <img src="http://www-tc.pbs.org/wnet/nature/files/2008/10/na_img_horses_intro.jpg"  id="slide" width="1130" height="416" />
    <script>
    horses=["http://www-tc.pbs.org/wnet/nature/files/2008/10/na_img_horses_intro.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Nokota_Horses_cropped.jpg/250px-Nokota_Horses_cropped.jpg","http://www.europeword.com/blog/wp-content/uploads/europe-horses-300x225.jpg"]
    cats=["http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/GAto.jpg/220px-GAto.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cat-eating-prey.jpg/220px-Cat-eating-prey.jpg"]
    bridges=["http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Akashi-kaikyo_bridge3.jpg/337px-Akashi-kaikyo_bridge3.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Sio_se_pol.jpg/337px-Sio_se_pol.jpg","http://wirednewyork.com/images/bridges/hell-gate-bridge/hell_gate_bridge_triborough_7apr02_s.jpg"]
    arrays=[horses,cats,bridges]
    preview=[]
    for(x=0;x<arrays.length;x++){
    preview.push(arrays[x][0])
    }
    var step=0;
    var thearray=preview;
    function slideit(){
    thepic=document.getElementById("slide")
    if(thearray==preview){
    thepic.title="click to see this slideshow"
    thepic.onclick=function(){changeSlides(thepic.src)}
    } else {
    thepic.title="return to preview mode"
    thepic.onclick=function(){thearray=preview;}
    }
    thepic.src=thearray[step++%thearray.length]
    }
    
    function changeSlides(pic){
    for(i=0;i<arrays.length;i++){
    for(a=0;a<arrays[i].length;a++){
    	if(arrays[i][a]==pic){
    		thearray=arrays[i];
    			}
    		}
    	}
    }
    
    setInterval(slideit,2500)
    </script>
    </body>
    </html>

  8. #8
    Join Date
    Feb 2012
    Posts
    7
    if i set up an array like this:

    Code:
    function initialize(){
    
    var myArray = new Array();
    myArray['00'] = new Image(100, 75);
    myArray['00'].src = "";
    myArray['01'] = new Image(510, 383);
    myArray['01'].src = "";
    myArray['02'] = new Image(510, 383);
    myArray['02'].src = "";
    myArray['03'] = new Image(510, 383);
    myArray['03'].src = "";
    myArray['04'] = new Image(510, 383);
    myArray['04'].src = "";
    
    myArray['10'] = new Image(100, 75);
    myArray['10'].src = "";
    myArray['11'] = new Image(510, 383);
    myArray['11'].src = "";
    myArray['12'] = new Image(510, 383);
    myArray['12'].src = "";
    myArray['13'] = new Image(510, 383);
    myArray['13'].src = "";
    myArray['14'] = new Image(510, 383);
    myArray['14'].src = "";
    
    myArray['20'] = new Image(100, 75);
    myArray['20'].src = "";
    myArray['21'] = new Image(510, 383);
    myArray['21'].src = "";
    myArray['22'] = new Image(510, 383);
    myArray['22'].src = "";
    myArray['23'] = new Image(510, 383);
    myArray['23'].src = "";
    myArray['24'] = new Image(510, 383);
    myArray['24'].src = "";
    
    myArray['30'] = new Image(100, 75);
    myArray['30'].src = "";
    myArray['31'] = new Image(510, 383);
    myArray['31'].src = "";
    myArray['32'] = new Image(510, 383);
    myArray['32'].src = "";
    myArray['33'] = new Image(510, 383);
    myArray['33'].src = "";
    myArray['34'] = new Image(510, 383);
    myArray['34'].src = "";
    
    }
    so i have 4 small thumb nail images as the 00, 10, 20, 30, then the larger images are in the array below them. as i click on the thumb nail the 01, 11, 21, 31 images appear in the loadarea and once you start navigating it goes through the specific array?

    i know how to set the array up and place the thumbnail and first images in the positions just dont know how to flick through the array??

  9. #9
    Join Date
    Nov 2010
    Posts
    1,086
    what you want (or what it seems to me that you want) is four arrays which correspond to your four thumbnails. You can then make an array of array names and use that to specify which array you want to populate the table. See this bit in my example above:
    Code:
    horses=["http://www-tc.pbs.org/wnet/nature/files/2008/10/na_img_horses_intro.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Nokota_Horses_cropped.jpg/250px-Nokota_Horses_cropped.jpg","http://www.europeword.com/blog/wp-content/uploads/europe-horses-300x225.jpg"]
    cats=["http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/GAto.jpg/220px-GAto.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cat-eating-prey.jpg/220px-Cat-eating-prey.jpg"]
    bridges=["http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Akashi-kaikyo_bridge3.jpg/337px-Akashi-kaikyo_bridge3.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Sio_se_pol.jpg/337px-Sio_se_pol.jpg","http://wirednewyork.com/images/bridges/hell-gate-bridge/hell_gate_bridge_triborough_7apr02_s.jpg"]
    arrays=[horses,cats,bridges]

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles