View Full Version : Linked fullsize image not showing up in preview area

12-14-2011, 03:07 AM
I am working in Dreamweaver CS4 with both HTML and Javascript.
I created a preview area and some thumbnails beneath. Each thumbnail is linked to a full size image. So far, so good.
I'm attempting to follow a Javascript tutorial to make a lightbox.
I added CSS rules and the javascript code (below) in the hopes of having my thumbnail show the image in the clickable preview area when hovering. However, my fullsize image does not display in the preview area. Interestingly, when I hover over the preview, I see at the bottom of my browser that it is still linked, just not displaying. The preview area is blank. Any ideas?
I've put the site online artmarcsimon dot com


$('.gallery_thumbnails a').click(function(e){


$('.gallery_thumbnails a').removeClass('selected');
$('.gallery_thumbnails a').children().css('opacity','1');


var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace('_fullsize','_preview');

$('.gallery_preview').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');

12-14-2011, 08:41 AM
You bind the click handler to all the anchor (<a>) elements inside your element(s) with class "gallery_thumbnails"

Inside the click handler you toggle the class "selected", set the opacity of all children of those anchors to "fully opaque" (?) and then you change the html of all the element(s) with class "gallery_thumbnails" to a new anchor element which links to the fullsize_image and displays the thumbnail as a backgroud image.

There is no code which whould actually SHOW the fullsize image anywhere.

01-03-2012, 08:32 PM
I was following a tutorial and modifying it to meet my needs. In the tutorial, they did an opacity change which I did not want, so I set it to fully opaque. Can I delete the line

$('.gallery_thumbnails a').children().css('opacity','1');

I want to show the fullsize image... how would I do so?