Opening Thumbnails in a DIV?

Scream

Scream

Scream

Soldato
Joined
18 Oct 2002
Posts
4,656
Location
The Darkside
I have been looking into how one would get a thumbnail to open in a Seperate DIV when it is clicked on i.e. the larger version of the thumbnail opens in the larger DIV.

I have tried several javascripts with some working but there is always a hicup with each. One will only work in IE or the other requires a double click on the thumbnail.

There is a CSS/Javascript version which I have tried and works to a certain degree but the javascript only version has much less coding which I like.

I have searched on here but the scripts found have the same problems I mentioned above.

The script I would like can work with a single click which I prefer or a hover.

Something that looks simple isn't.

Cheers for any help.
 
Surely you just use the OnClick event on the div, and tell it to go get the image, put it in a div and show the div on top of all the other page elements?
 
Thought so myself but when I tried it, you had to double click the bloody image for it to appear which is not what I want.
 
Hmmmmmm, put the onClick on the image? is it always a double click or just the first time? or try OnMoveOver (think its that)
 
I got it sorted to work in Firefox, Safari etc but now it won't work in IE. Its to do with the position I place the </a> Due to php defined paths, this closing statement is playing havoc.

This works in all other browsers except IE. In IE the images are not displayed.

Code: 
<a href="javascript:show('<?php echo 'images/'.$row_testdb['image2'].''?>');"
<?php echo '<img src="thumbs/'.$row_testdb['image2'].'" alt="">'; ?></a>

This code only works in IE but doesn't work in other browsers but they do display the thumbnail images but does not create a link on them.

Code: 
<a href="javascript:show('<?php echo 'images/'.$row_testdb['image2'].''?>');"</a>          
<?php echo '<img src="thumbs/'.$row_testdb['image2'].'" alt="">'; ?>

Function Code

Code: 
function show(image) {
	document.getElementById('largePicture').innerHTML = '<img src=" ' + image + '"width="640" alt=" ">';
}
 
Last edited:
aaaaaaaaaah yeah thats a brilliant IE feature, don't put your java script in HRef put it an OnClick and just make the HRef = "", Or don't use an A tag, just a Img tag, and use a style on it to make it look like a link, eg hand cursor icon..., and OnClick on it.
I think moving that bit of code should work, or it could be that IE doesn't like having an Image inside an A tag.
I'll have a look at work when to see if we've done this anywhere once I'm in :-p

Edit: just had a quick look at work, when we do this we put an Onclick on the IMG tag
Code: 
<IMG STYLE="cursor:hand;" SRC="../../common/bin/Camera.gif" WIDTH="25" BORDER=0 ALT="View Images" OnClick="ShowProcedureImages '<%=lrsRecordSet.Collect("Procedure_ID")%>', ''">
We use ASP but insted of the <%blah blah blah%> you'd put your PHP bits, and javascript in the OnClick event :-)
hope this helms!!
 
Last edited:
Thanks for that, I appreciate it.

I finally got the damn thing going by using the following code.

Code: 
<a href="" onclick="show('<?php echo 'images/'.$row_testdb['image1'].''?>');return false"><?php echo '<img src="thumbs/'.$row_testdb['image1'].'" alt="">'; ?></a>

Looks so simple now.

Cheers mate.
 
Oh great I fixed something which is out of date.

How do you do that then if you don't mind?

Damn Objects.
 
You would say something like
var img = document.createElement("IMG") then
img.src = ....
img.width = ....
then document.getElementById('largePicture').appendChild(img)
What this all does is creates an IMG tag in the DOM, then sets the source of it, and adds to the "largePicture" element, if that makes sense.
You could also just have <IMG ID="largePicture" src= ""> then in your script say
document.getElementById('largePicture').src = image
Its the bugger with HTML, too many ways of doing something lol
 
Ah right. I'll give that a go. Cheers.

I've been reading up on the innerHTML v DOM debate and a lot of folk are still opting for innerHTML due to the supposingly speed difference but if its not W3C then I should be getting away from it.
 
At last I finally got it working.

I tried the appendChild way which worked but I spent donkeys trying to remove the child each time before a new image replaces it cause when an image link was clicked on, the large image would display below the previous one instead of replacing it. I went around in circles and I couldn't sort it out.

However I went for the easier option it seems using the following function:
Code: 
function changeSrc(path)
  {
  document.getElementById("largeImage").src=path;
  }
</script>

Then using the IMG tag on the page displayed the image when the above function was called from an Image click.

Code: 
<img id="largeImage" src="" width="640" />

Many thanks Septh for the help on this. I've learnt something new today.

Cheers.
 
You must log in or register to reply here.
Back
Top Bottom