View Full Version : Need a lil' help tying to make an Image Gallery using javascript

08-20-2008, 03:41 PM
Hey all just started learning Javascript and found the first thing to try was making an image gallery, which will click through an array of database driven images nice and quickly.

Below the Image Preview bit, the gallery would have image specific information to the left (eg. Image 1) and controls to the right (prev,next).

If you check out this link you can see what I'm trying to get at:

You'll also notice I was trying to put an extra object between the prev and next buttons. It would be a text bit, saying for example 1 of 10, where 1 is the current image number and 10 is the total number of images. If you do a view page source you can laugh out loud and see where i got to, the javascript code is in the head of the document not in a file so you can easily see it. The Image DIV in question is <div id="imagebox">. I literally only started learning Javascript yesterday - but it really is a spanking bit of kit.

I'm used to generating HTML with php, but then playing with it after it's been parsed by the browser is a whole new world to me, and I LIKE IT!

PHP knows how many pictures the user uploaded in the upload your photos section prior to this page in the session. So coming into this page, PHP builds the Images wrapped in Links in the correct order and the correct amount. So really its just the Javascript bit im stuck on.

Anyway this is the javascript code in the head that controls the image being clicked to preview in the placeholder image, it works fantastic and quick, but how I go about adding Image numbers and the Total number of images and prev,next links I am scratching my head over:

function showPic (whichpic)
if (document.getElementById)
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title)
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
return false;
return true;

and this is the Main Gallery area in the body:

<div id="imagebox">
<div class="main_padding">
<div class="float">
<div class="left"><!-- Mainpicture and database driven Image Slideshow Mechanism -->
<img id="placeholder" src="/images/property/mainpicture/53876_sprngvlerd_IMG_00_0001.jpg" alt="" />
</div><!-- end of .left -->
<div class="right"><!-- Image thumbnails database driven -->
<div class="thumbnails" id="thumbnails"><!-- All of the thumnails -->
<ul><!-- These dont really need to be in a list but hey :) -->
<div class="image"><a onclick="return showPic(this)" href="/images/property/mainpicture/53876_sprngvlerd_IMG_00_0001.jpg" title="Image 1"><img src="/images/property/minithumb/53876_sprngvlerd_IMG_00_0001.jpg" alt="" /></a></div>
<div class="image"><a onclick="return showPic(this)" href="/images/property/mainpicture/53876_sprngvlerd_IMG_01_0000.jpg" title="Image 2"><img src="/images/property/minithumb/53876_sprngvlerd_IMG_01_0000.jpg" alt="" /></a></div>
<div class="image"><a onclick="return showPic(this)" href="/images/property/mainpicture/53876_sprngvlerd_IMG_02_0000.jpg" title="Image 3"><img src="/images/property/minithumb/53876_sprngvlerd_IMG_02_0000.jpg" alt="" /></a></div>
<div class="image"><a onclick="return showPic(this)" href="/images/property/mainpicture/53876_sprngvlerd_IMG_03_0000.jpg" title="Image 4"><img src="/images/property/minithumb/53876_sprngvlerd_IMG_03_0000.jpg" alt="" /></a></div>
<div class="image"><a onclick="return showPic(this)" href="/images/property/mainpicture/53876_sprngvlerd_IMG_04_0000.jpg" title="Image 5"><img src="/images/property/minithumb/53876_sprngvlerd_IMG_04_0000.jpg" alt="" /></a></div>
</div><!-- end of .thumbnails -->
</div><!-- end of .right -->
</div><!-- end of .float -->
<div class="bottom">
<div class="imagenumber">
<p id="desc">Image 1</p>
</div><!-- end of .imagenumber -->
<div class="imagebuttons">
<!-- where it says 1 of 10 - 1 is the current image number being viewed and 10 is the total number of images -->
<a href=""><img src="/images/imagebox_previous.gif" alt="" /></a> 1 of 10 <a href=""><img src="/images/imagebox_next.gif" alt="" /></a>
</div><!-- end of .imagebuttons -->
</div><!-- end of .bottom -->
</div><!-- end of .main_padding -->
</div><!-- end of #imagebox -->

Just to let you guys know I found a post:

Image Gallery by John Davenport Scheuer, Dynamicdrive Forums Post Linky (http://www.dynamicdrive.com/forums/showthread.php?t=35441)

I removed my weak effort and imported his beautiful piece of javascript into my HTML, CSS, PHP and I have made a page to show you when I use his code. Now I did have to change his code slightly for my project. His code was onmouseover and used onmouseout as well, whereas I want it to be when you click a thumbnail it displays and no need for a mouseout. So I altered his onmouseover to onclick and removed the onmouseout. Now this did work, but if you see the link below there is a problem, whereby when you click a thumbnail before the image is loaded into the preview container the page seems to refresh and jumps back to the top of the browser which I have no idea whats going on, anyway again the javascript is in the head of the page linky below, so should be easy to read, and again the section in the body which deals with the the thumbnails and preview container are in the following place <div id="imagebox">

08-22-2008, 12:59 AM
There are plenty of image galleries on DD. Look around. This domain isn't just forums, which a lot of people don't understand.