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

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12

    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
    8
    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
    152
    Rep Power
    12
    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