#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    14

    Two lightbox galleries on seperate pages


    Hi

    I am using the following in my website

    http://lokeshdhakar.com/projects/lightbox2/

    I would like a second lightbox popup on another page but the second one to be a different size popup

    I have added in to the other page the following

    Code:
    rel="lightbox[products]"
    I just am unsure on how to call it so it works and give it a different size when it pops up

    Any ideas

    Kind regards

    Ian
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    40
    Rep Power
    10
    You need to paste the lightbox code here or point us to the lightbox main page for us to know how it works and how to help
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    14
    Hi price55

    This is the line for the js file for the lightbox feature

    Code:
    <script src="./js/lightbox.js"></script>
    Below is the lightbox js coding

    Code:
    // Generated by CoffeeScript 1.4.0
    
    /*
    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 = 'images/loading.gif';
          this.fileCloseImage = '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').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);
    Below is how I it used in the image coding

    Code:
    <td width="48%" valign="top"><a href="" rel="lightbox[products]"><img src="images/chestnutsm.png" alt="" title=""></a>&nbsp;&nbsp;Chestnut</td>
    Hope that helps bit more

IMN logo majestic logo threadwatch logo seochat tools logo