SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript help with pop-up pictures!

    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. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code javascript:
    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. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a link that might help you.

    http://www.sitepoint.com/forums/show...3&postcount=10

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a the best one http://www.visibilityinherit.com/code/popup.php if you simply want a popup window.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •