SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Click on image to close it in Lightbox Wordpress. How?

    Hello,


    Im a newbie and im trying to figure out how to make a individual popup image on my wordpress website to close once i click on the image. I want it to close no matter where i click on the image.

    I have checked my lightbox.js file and i dont understand what to edit or what to add.

    This is the lightbox i have:

    " // Generated by CoffeeScript 1.4.0

    /* Lightbox v2.51 by Lokesh Dhakar -

    For more information, visit:

    Licensed under the Creative Commons Attribution 2.5 License - - free for use in both personal and commercial projects - attribution requires leaving author name, author link, and the license info intact

    Thanks - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05."

    Can anyone help me?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi seotoka. Welcome to the forums

    Can you post a link to your site? We need to see this in action.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My site is

    http://www.guideitallinn.se/sevardheter/

    Click on any of the images there. can you help?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Normally with popup images like that, you either click on the X to get rid of it or outside the image, which is what happens now. Personally, I'd leave it like that.

    However, if you want to change the functionality, I've moved this to the JS forum, where hopefully someone who's good at JS (like @Pullo ) will help you out.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Right now the site gives nothing to work with. Or at least in Opera, I get a modal dialog saying "site coming soon" and no way to interact with anything.


    Normally to have stuff remove on click, find the function normally used by the "Close" x button, but hang it on the image itself, or the whole modal dialog body (but then there should be nothing else clickable in that dialog).

  6. #6
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, could you check the website again. it should be up so you can see. could you advice more exactly where do edit this to make it work?

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,095
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Nope, still seeing exactly what Poes describes.

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,095
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Or do you want to know how to be able to close the "maintenance" modal dialogue?
    Last edited by Pullo; Oct 1, 2013 at 01:17. Reason: Removed url at request of OP

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope. should be up now, had the maintenance plugin active. now its off

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I saw maint again but I think I have browser cache... lemme clear

    ok this is what the Lightbox guy does

    he made a Lightbox object and made some custom prototype funcs to it. One of them is called end().

    Lightbox.prototype.end = function() {
    this.disableKeyboardNav();
    $(window).off("resize", this.sizeOverlay);
    $('#lightbox').fadeOut(this.options.fadeDuration);
    $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
    return $('select, object, embed').css({
    visibility: "visible"
    });
    };

    End seems to be the function who fades the lighbox away and lets the page show again. This function is called when the anchor called "lb-close" is clicked.

    $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
    _this.end();
    return false;
    });

    I suppose you could add lb-image to that list, or replace lb-close with lb-image, assuming you will also remove the X button, but then I'd test it well. One problem with this though is that images aren't natively focusable, so keyboard would not be able to close if you remove the X, so I'd keep it in:

    $lightbox.find('.lb-loader, .lb-image, .lb-close').on('click', function(e) {
    _this.end();
    return false;
    });

  11. #11
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, it does not work. i changed it in lightbox.js file to

    $lightbox.find('.lb-loader, .lb-image, .lb-close').on('click', function(e) {
    _this.end();
    return false;
    });
    };

    nothing happens when i click on image still

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,095
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    It does work, Poes was spot on with her explination.

    Here's a simple demo that you can run on your PC:

    Code:
    <!DOCTYPE html>
    <html lang="SV">
      <head>
        <meta charset="UTF-8" />
        <title>Sevärdheter och attraktioner i Tallinn | Guide i Tallinn</title>
        <link rel='stylesheet' id='foxy-style-css'  href='http://www.guideitallinn.se/wp-content/themes/smarttour/style.css?ver=3.6.1' type='text/css' media='all' />
        <link rel='stylesheet' id='et_page_templates-css'  href='http://www.guideitallinn.se/wp-content/themes/smarttour/epanel/page_templates/page_templates.css?ver=1.8' type='text/css' media='screen' />
        <link href="http://www.guideitallinn.se/wp-content/themes/smarttour/js/lightbox.css" rel="stylesheet" />
        <script type='text/javascript' src='http://www.guideitallinn.se/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
        <script>
          /*
          Lightbox v2.51
          by Lokesh Dhakar - http://www.lokeshdhakar.com
          
          For more information, visit:
          http://lokeshdhakar.com/projects/lightbox2/
          
          Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
          - free for use in both personal and commercial projects
          - attribution requires leaving author name, author link, and the license info intact
            
          Thanks
          - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
          - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
          
          
          Table of Contents
          =================
          LightboxOptions
          
          Lightbox
          - constructor
          - init
          - enable
          - build
          - start
          - changeImage
          - sizeContainer
          - showImage
          - updateNav
          - updateDetails
          - preloadNeigbhoringImages
          - enableKeyboardNav
          - disableKeyboardNav
          - keyboardAction
          - end
          
          options = new LightboxOptions
          lightbox = new Lightbox options
          */
          
          (function() {
            var $, Lightbox, LightboxOptions;
          
            $ = jQuery;
          
            LightboxOptions = (function() {
              function LightboxOptions() {
                this.fileLoadingImage = 'http://www.guideitallinn.se/wp-content/themes/smarttour/images/loading.gif';
                this.fileCloseImage = 'http://www.guideitallinn.se/wp-content/themes/smarttour/images/close.png';
                this.resizeDuration = 700;
                this.fadeDuration = 500;
                this.labelImage = "Image";
                this.labelOf = "of";
              }
              return LightboxOptions;
            })();
          
            Lightbox = (function() {
          
              function Lightbox(options) {
                this.options = options;
                this.album = [];
                this.currentImageIndex = void 0;
                this.init();
              }
          
              Lightbox.prototype.init = function() {
                this.enable();
                return this.build();
              };
          
              Lightbox.prototype.enable = function() {
                var _this = this;
                return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
                  _this.start($(e.currentTarget));
                  return false;
                });
              };
          
              Lightbox.prototype.build = function() {
                var $lightbox,
                  _this = this;
                $("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + this.options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + this.options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));
                $('#lightboxOverlay').hide().on('click', function(e) {
                  _this.end();
                  return false;
                });
                $lightbox = $('#lightbox');
                $lightbox.hide().on('click', function(e) {
                  if ($(e.target).attr('id') === 'lightbox') {
                    _this.end();
                  }
                  return false;
                });
                $lightbox.find('.lb-outerContainer').on('click', function(e) {
                  if ($(e.target).attr('id') === 'lightbox') {
                    _this.end();
                  }
                  return false;
                });
                $lightbox.find('.lb-prev').on('click', function(e) {
                  _this.changeImage(_this.currentImageIndex - 1);
                  return false;
                });
                $lightbox.find('.lb-next').on('click', function(e) {
                  _this.changeImage(_this.currentImageIndex + 1);
                  return false;
                });
                $lightbox.find('.lb-loader, .lb-close, .lb-container').on('click', function(e) {
                  _this.end();
                  return false;
                });
              };
          
              Lightbox.prototype.start = function($link) {
                var $lightbox, $window, a, i, imageNumber, left, top, _i, _len, _ref;
                $(window).on("resize", this.sizeOverlay);
                $('select, object, embed').css({
                  visibility: "hidden"
                });
                $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
                this.album = [];
                imageNumber = 0;
                if ($link.attr('rel') === 'lightbox') {
                  this.album.push({
                    link: $link.attr('href'),
                    title: $link.attr('title')
                  });
                } else {
                  _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
                  for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
                    a = _ref[i];
                    this.album.push({
                      link: $(a).attr('href'),
                      title: $(a).attr('title')
                    });
                    if ($(a).attr('href') === $link.attr('href')) {
                      imageNumber = i;
                    }
                  }
                }
                $window = $(window);
                top = $window.scrollTop() + $window.height() / 10;
                left = $window.scrollLeft();
                $lightbox = $('#lightbox');
                $lightbox.css({
                  top: top + 'px',
                  left: left + 'px'
                }).fadeIn(this.options.fadeDuration);
                this.changeImage(imageNumber);
              };
          
              Lightbox.prototype.changeImage = function(imageNumber) {
                var $image, $lightbox, preloader,
                  _this = this;
                this.disableKeyboardNav();
                $lightbox = $('#lightbox');
                $image = $lightbox.find('.lb-image');
                this.sizeOverlay();
                $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
                $('.loader').fadeIn('slow');
                $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
                $lightbox.find('.lb-outerContainer').addClass('animating');
                preloader = new Image;
                preloader.onload = function() {
                  $image.attr('src', _this.album[imageNumber].link);
                  $image.width = preloader.width;
                  $image.height = preloader.height;
                  return _this.sizeContainer(preloader.width, preloader.height);
                };
                preloader.src = this.album[imageNumber].link;
                this.currentImageIndex = imageNumber;
              };
          
              Lightbox.prototype.sizeOverlay = function() {
                return $('#lightboxOverlay').width($(document).width()).height($(document).height());
              };
          
              Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
                var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
                  _this = this;
                $lightbox = $('#lightbox');
                $outerContainer = $lightbox.find('.lb-outerContainer');
                oldWidth = $outerContainer.outerWidth();
                oldHeight = $outerContainer.outerHeight();
                $container = $lightbox.find('.lb-container');
                containerTopPadding = parseInt($container.css('padding-top'), 10);
                containerRightPadding = parseInt($container.css('padding-right'), 10);
                containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
                containerLeftPadding = parseInt($container.css('padding-left'), 10);
                newWidth = imageWidth + containerLeftPadding + containerRightPadding;
                newHeight = imageHeight + containerTopPadding + containerBottomPadding;
                if (newWidth !== oldWidth && newHeight !== oldHeight) {
                  $outerContainer.animate({
                    width: newWidth,
                    height: newHeight
                  }, this.options.resizeDuration, 'swing');
                } else if (newWidth !== oldWidth) {
                  $outerContainer.animate({
                    width: newWidth
                  }, this.options.resizeDuration, 'swing');
                } else if (newHeight !== oldHeight) {
                  $outerContainer.animate({
                    height: newHeight
                  }, this.options.resizeDuration, 'swing');
                }
                setTimeout(function() {
                  $lightbox.find('.lb-dataContainer').width(newWidth);
                  $lightbox.find('.lb-prevLink').height(newHeight);
                  $lightbox.find('.lb-nextLink').height(newHeight);
                  _this.showImage();
                }, this.options.resizeDuration);
              };
          
              Lightbox.prototype.showImage = function() {
                var $lightbox;
                $lightbox = $('#lightbox');
                $lightbox.find('.lb-loader').hide();
                $lightbox.find('.lb-image').fadeIn('slow');
                this.updateNav();
                this.updateDetails();
                this.preloadNeighboringImages();
                this.enableKeyboardNav();
              };
          
              Lightbox.prototype.updateNav = function() {
                var $lightbox;
                $lightbox = $('#lightbox');
                $lightbox.find('.lb-nav').show();
                if (this.currentImageIndex > 0) {
                  $lightbox.find('.lb-prev').show();
                }
                if (this.currentImageIndex < this.album.length - 1) {
                  $lightbox.find('.lb-next').show();
                }
              };
          
              Lightbox.prototype.updateDetails = function() {
                var $lightbox,
                  _this = this;
                $lightbox = $('#lightbox');
                if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
                  $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
                }
                if (this.album.length > 1) {
                  $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
                } else {
                  $lightbox.find('.lb-number').hide();
                }
                $lightbox.find('.lb-outerContainer').removeClass('animating');
                $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
                  return _this.sizeOverlay();
                });
              };
          
              Lightbox.prototype.preloadNeighboringImages = function() {
                var preloadNext, preloadPrev;
                if (this.album.length > this.currentImageIndex + 1) {
                  preloadNext = new Image;
                  preloadNext.src = this.album[this.currentImageIndex + 1].link;
                }
                if (this.currentImageIndex > 0) {
                  preloadPrev = new Image;
                  preloadPrev.src = this.album[this.currentImageIndex - 1].link;
                }
              };
          
              Lightbox.prototype.enableKeyboardNav = function() {
                $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
              };
          
              Lightbox.prototype.disableKeyboardNav = function() {
                $(document).off('.keyboard');
              };
          
              Lightbox.prototype.keyboardAction = function(event) {
                var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
                KEYCODE_ESC = 27;
                KEYCODE_LEFTARROW = 37;
                KEYCODE_RIGHTARROW = 39;
                keycode = event.keyCode;
                key = String.fromCharCode(keycode).toLowerCase();
                if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
                  this.end();
                } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
                  if (this.currentImageIndex !== 0) {
                    this.changeImage(this.currentImageIndex - 1);
                  }
                } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
                  if (this.currentImageIndex !== this.album.length - 1) {
                    this.changeImage(this.currentImageIndex + 1);
                  }
                }
              };
          
              Lightbox.prototype.end = function() {
                this.disableKeyboardNav();
                $(window).off("resize", this.sizeOverlay);
                $('#lightbox').fadeOut(this.options.fadeDuration);
                $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
                return $('select, object, embed').css({
                  visibility: "visible"
                });
              };
          
              return Lightbox;
          
            })();
          
            $(function() {
              var lightbox, options;
              options = new LightboxOptions;
              return lightbox = new Lightbox(options);
            });
          
          }).call(this);
        </script>
      </head>
        
      <body>
        <a href="http://www.guideitallinn.se/wp-content/uploads/2013/07/Om-Tallinn_Sevärdheter.jpg" rel="lightbox">
          <img src="http://www.guideitallinn.se/wp-content/uploads/2013/07/Om-Tallinn_Sevärdheter-220x161.jpg" alt='Om Gamla stan i Tallinn' width='220' height='180' />
        </a>		
      </body>
    </html>
    The only thing I did slightly different was use .lb-container instead of .lb-image

    Code JavaScript:
    $lightbox.find('.lb-loader, .lb-close, .lb-container').on('click', function(e) {
      _this.end();
      return false;
    });

    HTH

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I tried to stick to the image because i wouldn't want any (other) possible buttons inside losing their own clicks (I fight this a lot in Javascript where someone wants clicking on the document should close something but all other click listeners within document still work... managing bubbling/propagation and stuff by hand stinks).

    Though it occurred to me that maybe the click listener wasn't on the image if the image is newly added each time. Then I guess you'd use something like $(document).on('click', 'list, of, elements, including, img', func() {blahblah;});


Tags for this Thread

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
  •