onclick to show an image in pop-up box

Question

I made a simple gallery, using this script to show the images:

 $rs = mysql_query('SELECT * FROM images WHERE oferta_id=2');


 while($row = mysql_fetch_array($rs))
  {
        echo '<li onclick="Large()"><img src='.$row['location'].' alt="image"/></li>';

  }

and I want to use javascript in a way that when an user click on a certain picture a box pops-up and he sees the picture larger.I think I'm on a right way using onclick in the <li> tag, but have almost no idea how to make the Large() function.Any help on the topic?

Thanks

Leron

Answer 1

You could give each < img > an incrementing numeric id, and be passing that to the Large function, ie

onclick="Large(0)" 

and each image would be

<img id="image_0" .... />

so that you can get a unique reference to that particular image within the large function.

ie

function Large(index){
  var image = document.getElementById('image_' + index);
  //your code here
};

or as has already been suggested, you can use lightbox.

Also, another option is to just add the onclick handler the image and pass this, and then you have a direct reference to the image as well, and cut out the middle man, as it were. ie

<img onclick="Large(this) .... />

just some food for thought

Answer 2

i'd just use a jquery plugin or another javascript framework's plugin. do a google search for "jquery lightbox" and see examples.

there's definitely no point in writing your own unless you need some specific functionality not available out there or are looking to build your own as a learning exercise.

Answer 3

I would suggest checking out the 100s of lightbox options for your larger image. Just google lightbox.