XHTML, CSS, JS Gallery - Very Detailed Part 3

.Silver · #1 (**permalink**) 05-27-2007, 01:46 PM

So heres Part 3 of the gallery tutorial. So up to now, we should have a pretty simple gallery looking page.

In this part, we will be adding a few more details into this page to make it looks better.

---

So first off, we'll do something about this description text for the images. It looks so bad.

Take off the line breaks, <br /><br /> and we'll now add some divs.

Code:

<img src="double.jpg" alt="Double Vision" width="340"/>
            <div id="title">Double Vision</div>
            <div id="description">A collaboration between me and monet. She did the left side and I create the right side, I think this is great because it show a great deal of style between two different artists.</div>

That's what's now in my left div. As you can see we've added two new div tags. One for title, one for description.

Now we need to make a style for these.

Code:

#title{
font-weight: bold;
margin-top: 5px;
}
#description{
width: 100%;
border-top: 1px dashed #8D8D8D;
}

Much better? I think so.

Now let's make these thumbnails more exciting. We'll add a larger border to the thumbnails, we can use this by adding a border in CSS to all img tags in the div ID of right.

Code:

#right img{
border: 2px solid #8D8D8D;
}
#right img:hover{
border: 2px solid #FFFFFF;
}

So what this means is:

In the div ID of right, where there are img tags, add a 2px border.

In the div ID of right, where there are img tags that the mouse hovers over, have this 2px border.

That's pretty much finished. But how are we going to show the images? Well it's your lucky day, I'm going to show you even more now, javascript to swap the images round.

Before we can even swap the large preview round, we need to set an id onto this image.

Code:

<img id="largeimg" src="double.jpg" alt="Double Vision" />

Now we want to add an url to one of the previews, just for an example you know.

Code:

<a href="mystery.jpg" onclick="javascript:swapImage('mystery.jpg','Mystery','A photograph I took of some smoke. For fun.'); return false;"><img src="mysterythumb.jpg" alt="Mystery" /></a>

We make the href, which we link to the actual image in case the user has their javascript turned off it will go to to that.

Then we use onClick to activate our javascript, I've named the javascript swapImage since that what we're doing. In this we are changing three things, the image, the title, the description. in the brackets, you got three bits enclosed in single quotes. First one is the image url, then it's the title, then the description.

Now we add our javascript to that page, but just like the CSS, we'll have the javascript on a seperate page.

Code:

<script src="swapimage.js" type="text/javascript"></script>

Add this below the line we add our CSS into the page.

For the javascript itself.

Code:

function swapImage(image,title,description) **
    var thetitle = document.getElementById("title");
    var thedescription = document.getElementById("description");
    thetitle.firstChild.nodeValue = title;
    thedescription.firstChild.nodeValue = description;
 
        document.images.largeimg.src = image;
    document.images.largeimg.alt = title;
}

What we're doing.

Line 1. We start our function, with the image, title and description.
Line 2. Make a variable for the title we already have now.
Line 3. Make a variable for the description we already have now.
Line 4. We change swap the text of our title with what we have in the javascript.
Line 5. (Read above but for description instead)
Line 6. empty...
Line 7. We change the image with id largeimg and the src to the image we put in.
Line 8. We change the imge with id largeimg and the alt to the title we put in.
Line 9. End function.

It's really that simple.

That's the end.