JavaScript help with pop-up pictures!

JavaScript
1

Hi! I do believe this is quiet a common js-problem…

So I wish to be able to click on a small thumbnail (small_tn1.jpeg) and a bigger picture pops out in a new window. (big_tn1.jpeg).

I have looked at lightbox-versions but they are to complex with code.
I want to use one function openBig() to be able to use on all my pictures on the site. So all my pictures will be named; small_tn1.jpeg, big_tn1.jpeg, small_tn2.jpeg, big_tn2.jpeg…

I haven’t found any that full fill my request. The closest code I found is for only a single-image. http://www.pcurtis.com/popup_advanced.htm

It’s a school assignment, so I can not use jQuery or target=“_blank”

Any suggestions or links?

cheers!

2

Lightboxes are not complex at all. All you need is an onclick event for the link and then CSS can handle the rest. Then you need an onclick event on the image again to close it. If you wanted to make it a bit more complex it could be a DIV with a “close” link. This is basically what all those lightboxes are, really. It’s probably preferable anyway since people are now used to them, and popups get blocked.

var a document.getElementsByTagName('a'), lightboxdiv = document.createElement('div');
lightboxdiv.style.display = 'none';
document.body.appendChild(lightboxdiv);
lightboxdiv.appendChild(document.createElement('img'));
for (var i = 0, j = a.length; i < j; i++) {
  if (a[i].className === 'lightbox') {
    a[i].onclick = lightbox;
  }
}
function lightbox() {
  var img = lightboxdiv.firstChild;
  img.src = this.href;
  lightboxdiv.style.display = 'block';
  img.onclick = function() {
    lightboxdiv.style.display = 'none';
  }
  return false;
}

Put that at the bottom of the <body>, add class=“lightbox” to links to images and you’ve got yourself a simple lightbox (you’ll have to style the lightboxdiv yourself).

3

Here is a link that might help you.

http://www.sitepoint.com/forums/showpost.php?p=4810103&postcount=10

4

Here is a the best one http://www.visibilityinherit.com/code/popup.php if you simply want a popup window.