Html Help Please. Updated!

Muel · February 13, 2008

I want to have a picture gallery on the new site I am doing, with a line of thumbnails, you can click any of them and it makes them all big in the main area. Like on Tarty, but so the picture is on the page itself, not opens in another window.
I did make a really basic shite one at college in dreamweaver, but you have to use layers and it's an arse to get them all lined up properly, and also I have used a table to keep everything alligned on the page.
Can this be done just using some basic html and a table? Like, when you click on this thumbnail, open this image in this shell, for each thumbnail?
I need to research using more advanced shizzle for the unit, so this thread will probably change topic a few times.
Here's the site so far. Any suggestions, nail them my way: http://sam.nicnoble.co.uk

That is all sorted now. The problem I have now is with the videos page.

I have used div objects, (layers), so that all the videos are embedded over the top of each other. The links at the side are also in seperate layers. When you click on a layer at the side, it loads the corresponding layer with the embedded video.

Here's the problem. The layers with the embedded videos in are all over the top of each other, when you click a video name, all it does is hide the rest and show the right one.

This works fine.

If you click play, watch half the vid and then decide you want to watch a different one. It hides the layer, bring up the new one, but the video keeps playing. So you get the old vid's sound playing over the top of the new vid.

Any ideas?

Edited October 7, 2008 by Muel

**tomturd** · February 13, 2008

What do you mean 'shell'?

You just make a table like so

<table>
<tr>
<td>
<!--info here-->
</td>
<td>
<!--info here-->
</td>
<td>
<!--info here-->
</td>
</tr>
</table>[/code]


Get your images and make thumbnails using photoshop or whatever, save them as whatever, I'll use tn_image_name.jpeg format. Place thumbnails in table like so..

[code]<table>
<tr>
<td>
<img src='tn_image_name1.jpeg' />
</td>
<td>
<img src='tn_image_name2.jpeg' />
</td>
<td>
<img src='tn_image_name3.jpeg' />
</td>
</tr>
</table>

Now you need to make those images link to the big version of themselves, as so..

<table>
<tr>
<td>
<a href='image_name1.jpeg'><img src='tn_image_name1.jpeg' /></a>
</td>
<td>
<a href='image_name2.jpeg'><img src='tn_image_name2.jpeg' /></a>
</td>
<td>
<a href='image_name3.jpeg'><img src='tn_image_name3.jpeg' /></a>
</td>
</tr>
</table>[/code]


EDIT: ah ha, you want to use lightbox I guess (thats the special thing that tartybikes and trials-uk are using.

Download the lightbox.js file from http://www.huddletogether.com/projects/lightbox/

Include it in your header (thats between <head> and </head>) and add rel='lightbox' to each of the image tags - like so...


[code]<html>
<head>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>

<table>
<tr>
<td>
<a rel='lightbox' href='image_name1.jpeg'><img src='tn_image_name1.jpeg' /></a>
</td>
<td>
<a rel='lightbox' href='image_name2.jpeg'><img src='tn_image_name2.jpeg' /></a>
</td>
<td>
<a rel='lightbox' href='image_name3.jpeg'><img src='tn_image_name3.jpeg' /></a>
</td>
</tr>
</table>

</body>
</html>

Muel · February 13, 2008

No that's not it Tom, but thanks it will probably turn out to be useful. I may use it instead anyway, I never thought about using it.

I tried it out, here's the result. I'll have ago at that lightbox thing later to get used to it.

http://s273.photobucket.com/albums/jj207/E...nt=P2090016.jpg

You know where it says back and next? I don't want that, I just want a line of 5/6 thumbnails down the side, then when you click on each one, the main image changes to that on. In the past I have got around it by having 6 pages and the thumbnails are links to the other pages.

Here: http://sportsweeks.net/coca_cola_centres_all_saints.htm

I want that same result, but so that when you click each thumbnail, just the main image changes.

But there, the thumbnails aren't linked, just the links on the right.

**tomturd** · February 13, 2008

No that's not it Tom, but thanks it will probably turn out to be useful. I may use it instead anyway, I never thought about using it.
I tried it out, here's the result. I'll have ago at that lightbox thing later to get used to it.
http://s273.photobucket.com/albums/jj207/E...nt=P2090016.jpg
You know where it says back and next? I don't want that, I just want a line of 5/6 thumbnails down the side, then when you click on each one, the main image changes to that on. In the past I have got around it by having 6 pages and the thumbnails are links to the other pages.
Here: http://sportsweeks.net/coca_cola_centres_all_saints.htm
I want that same result, but so that when you click each thumbnail, just the main image changes.
But there, the thumbnails aren't linked, just the links on the right.

Ah right, gotcha.

You'll need to look up some sort of javascript for that. Infact this looks pretty good - alistapart generally has nice code.

http://www.alistapart.com/articles/imagegallery

Example at the bottom.

If you don't like the messyness of having separate pages for each thumbnail, then you might wanna look into using PHP. Really easy to pick up, worth looking into if you are semi-serious about web design.

Muel · February 13, 2008

Go me, I'm so good!

I've been working on it for about 4 hours, but the test page is done!

http://sam.nicnoble.co.uk/untitled.html

I think I'm going to try and use a mixture of that, and whatever I tried to describe before.

Muel · February 14, 2008

Right, I have added this thingy onto the main website.

Here goes.

http://sam.nicnoble.co.uk/muel.htm

You have to have java installed, but click on the thumbnails, it should work.

Also, I still want to use the gallery thingy. I'll make a page to show what I want.

JoeM · February 14, 2008

Right, I have added this thingy onto the main website.
Here goes.
http://sam.nicnoble.co.uk/muel.htm
You have to have java installed, but click on the thumbnails, it should work.
Also, I still want to use the gallery thingy. I'll make a page to show what I want.

The youtube video stays infront of the picture? Might just be my pc..

Muel · February 14, 2008

No, I get that as well.

Erm, HELP!! What the f**k do I do now. f**k sake.

Muel · February 14, 2008

No, I get that as well.
Erm, HELP!! What the f**k do I do now. f**k sake.

Can anyone help? I've been pissing about with it for ages. I just keep making it more broken and reverting to the back up.

JonMack · February 14, 2008

Works fine here...

Safari, by the way

MadManMike · February 14, 2008

Works fine here...
Firefox, by the way

Muel · February 14, 2008

Click on any of the thumbnails, the pics load up but the video is over the top.

JonMack · February 14, 2008

:rolleyes:

Muel · February 14, 2008

help...

EDIT: OK, why isn't the pic showing up? FFS! What is it with me today.

Try this.

http://i273.photobucket.com/albums/jj207/E...pg?t=1203007982

EDIT2: Mended?

EDIT3: No.

EDIT4: Mended?

EDIT5: Taking the piss now...

EDIT6: Oh my f**king god. Why won't this pic post up.

EDIT7: Work you silly thing.

EDIT8: b*****d TF with your spellchecker. Edit my links! I'll show you...

Edited February 14, 2008 by El Muelio

**tomturd** · February 14, 2008

http://www.huddletogether.com/forum/commen...iscussionID=124

easy fix.. ahem

Muel · February 14, 2008

Thanks Tom, although, why won't this pic load up? Is the TF spellchecker blanking the f**k out, thus breaking contact with said picture?

I'll rename it.

It worked. Tom, anyway of removing the spellchecker when using URL or IMG links? Otherwise it changes f**k to f**k, and the link no worky!

Edited February 14, 2008 by El Muelio

**tomturd** · February 14, 2008

Thanks Tom, although, why won't this f**king pic load up? Is the TF spellchecker blanking the f**k out, thus breaking contact with said picture?
I'll rename it.
It worked. Tom anyway of removing the spellchecker when using URL or IMG links? otherwise it changes f**k to f**k, and the link no worky!

Dont put f**k in the image name then

Muel · February 14, 2008

Dont put f**k in the image name then

I'll remember it in future.

I broke it. Gay.

**tomturd** · February 14, 2008

Works for me now

Muel · February 14, 2008

Works for me now

I was just about to say, mended!

I want to edit it so that when you click anywhere on the image, it closes, apart from the back and next things are on every pic, where there is a pic to go to, or back to.

So, if you have image 1, image 2 and image 3 as I do in a line, image 1 would only have the next button showing, image 2 would have both, and image 3 would only have back, as they do now, but, I want them to stay up, and only when you click on them does it go next or back.

I think i might leave it though, if I can stop the back and next buttons dissapearing it'll be good enough.

Revolver · February 14, 2008

you're better than me

it works just fine

Edited February 14, 2008 by Disasterboy

531joshua · March 2, 2008

I'm not sure if this is what you mean, but here's one way you could do it using PHP:

<?php

 // If no image number is specified get the default, first image

 if (empty($_GET['img'])) {

     echo '
     
         <table width="935" border="0" cellspacing="10" cellpadding="10">
           <tr>
             <td width="565" rowspan="4"><img src="full_img_1.jpg" width="565" height="1270px" /></td>
             <td width="300"><a href="example.php"><img src="thumb_1.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=2"><img src="thumb_2.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=3"><img src="thumb_3.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=4"><img src="thumb_4.jpg" width="300px" height="300px" /></a></td>
           </tr>
         </table>
     ';

 }

 // Image two

 elseif ($_GET['img'] == "2") {

     echo '
     
         <table width="935" border="0" cellspacing="10" cellpadding="10">
           <tr>
             <td width="565" rowspan="4"><img src="full_img_2.jpg" width="565" height="1270px" /></td>
             <td width="300"><a href="example.php"><img src="thumb_1.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=2"><img src="thumb_2.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=3"><img src="thumb_3.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=4"><img src="thumb_4.jpg" width="300px" height="300px" /></a></td>
           </tr>
         </table>
     
     ';

 }

 // Image three

 elseif ($_GET['img'] == "3") {

     echo '
     
         <table width="935" border="0" cellspacing="10" cellpadding="10">
           <tr>
             <td width="565" rowspan="4"><img src="full_img_3.jpg" width="565" height="1270px" /></td>
             <td width="300"><a href="example.php"><img src="thumb_1.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=2"><img src="thumb_2.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=3"><img src="thumb_3.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=4"><img src="thumb_4.jpg" width="300px" height="300px" /></a></td>
           </tr>
         </table>
     
     ';

 }

 // Image four

 elseif ($_GET['img'] == "4") {

     echo '
     
         <table width="935" border="0" cellspacing="10" cellpadding="10">
           <tr>
             <td width="565" rowspan="4"><img src="full_img_4.jpg" width="565" height="1270px" /></td>
             <td width="300"><a href="example.php"><img src="thumb_1.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=2"><img src="thumb_2.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=3"><img src="thumb_3.jpg" width="300px" height="300px" /></a></td>
           </tr>
           <tr>
             <td><a href="?img=4"><img src="thumb_4.jpg" width="300px" height="300px" /></a></td>
           </tr>
         </table>
     
     ';

 }

 ?>

Really quickly put together, so it isn't very good, but you get the idea.

You could make a image management console or something, using databases to store specific data along with uploaded images, and secure areas to manage the files etc.

Muel · March 2, 2008

Thanks dude, I'll try that out later.

Muel · March 5, 2008

I have managed what I wanted, I think...

http://sam.nicnoble.co.uk/images.htm

If someone could take a look and tell me any problems I'd be very grateful. It is all aligned fine here, I'm going to test it with some different resolutions now though.

EDIT: Everything seems fine here at 1024x768, 1152x864 and 1280x1024. It aligns and works fine. I am using FireFox 2. Anyone with IE fancy talking it for a test drive?

Edited March 5, 2008 by Muel

Muel · March 6, 2008

Also, if you could check sam.nicnoble.co.uk/videos.htm and give me some feedback, that would be reet good.

Sign In

Html Help Please. Updated!

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members