CSS/Javascript Lightbox

Question

First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.

As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com

I noticed

With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.

Can somebody explain to me if I'm on the right path or what I can do to make this work.

Thanks

Rob

Answer 1

The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).

onclick = "document.getElementById('light').style.display='block';  
           document.getElementById('fade').style.display='block' "

Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).

There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).

If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.

How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Then put this code on your page

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

The docs say to put it on the bottom of the page but you (should) also put it on the header.

And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"

<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
    <img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>

You can customize it further and should really read the manual here.

Answer 2

Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.

The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.

In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.

<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/longshot_full.png';"><img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" /></a>

Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'

<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>

This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.

---

Doing this for two images as a proof of concept I get this which works as expected:

<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/longshot_full.png';"><img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" /></a>

<a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/actor_full.png';"><img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" /></a>

<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>

Answer 3

you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...