Forum - Tuning für das Plugin Xobor Lightbox (Diashow) - Teil 1+2

<style>
/* Xobor Lightbox - Diashow */
#lightbox-image-details-link a {background: #ffffff;color:#383838;border: 5px double #383838; font-size:12px;position:absolute;text-decoration:none;padding:5px 20px;border-radius:20px;margin:50px 0 0 -20px;}
#lightbox-image-details-link a:hover {background: #999999;color:#ffffff;}
#lightbox-image-details-link:after {content: "Close X";position:absolute;text-decoration:none;color:#383838;padding:5px 20px;border: 5px double #383838; border-radius:20px;background: #ffffff;margin:50px 0 0 220px;font-size:12px;white-space:nowrap;cursor:pointer;}
#lightbox-image-details {width:auto !important; height:auto !important; padding-top:5px;}
#lightbox-image-details-currentNumber {margin-top:5px !important;} 
#lightbox-secNav {display:none;}
#lightbox-container-image-box {height:auto !important;}
#jquery-lightbox {margin-top:-40px !important;}
 
/* Diashow-Button formatieren */
.lb_start2 {background:#eeeeee;color:#484848;border: 5px double #cccccc;width:200px;font-weight:bold;text-align:center;margin:10px 0 30px 10px;border-radius:9px;padding:2px;cursor:pointer;}
.lb_start2:hover {color:#484848 !important;background:#dddddd;text-decoration:none !important;}
.lightbox-enabled {display:none !important;}
</style>
 
<script>
/* Neuen Diashow-Button setzen */
$(function(){
var DiashowText = '<div class="lb_start2" title="Bilder in der Diashow" onclick="setupLb(); return false;">Als Diashow anzeigen</div>'
$('.noimage.gpictures,.c_r_content1 #picture1,.inner #picture1,.nnor #picture1').before(DiashowText).next().after(DiashowText);
});
</script>
 

#lightbox-container-image-box {padding-top:20px;}
#lightbox-container-image-box:before {content: "Bildwechsel über Pfeil-Tasten und Beenden über X-Taste möglich!";padding:5px 20px;font-size:12px;}
#lightbox-nav-btnNext {display:block !important;}
 

<style>
#lightbox-container-image-box {padding-top:20px;}
#lightbox-container-image-box:before {content: "Bildwechsel über Pfeil-Tasten und Beenden über X-Taste möglich!";padding:5px 20px;font-size:12px;}
#lightbox-nav-btnNext {display:block !important;}
</style>
<script>
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.js
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
  
(function($) {
  $.fn.lightBox = function(settings) {
    settings = jQuery.extend({
      overlayBgColor: '#000', // (string) Background color to overlay; 
      overlayOpacity: 0.8, // (integer) Opacity value to overlay;
      fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface (true or false).
      imageLoading: 'img/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
      imageBtnPrev: 'img/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
      imageBtnNext: 'img/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image
      imageBtnClose: 'img/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn
      imageBlank: 'img/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
      containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box
      containerResizeSpeed: 400, // (integer) Specify the resize duration of container image.
      containerFitToWindow: true,
      containerCustomMaxHeight: 0,
      containerCustomMaxWidth: 0,
      txtImage: 'Bild', // (string) Specify text "Image"
      txtOf: 'von', // (string) Specify text "of"
      keyToClose: 'c', // (string) (c = close) 
      keyToPrev: 'p', // (string) (p = previous)
      keyToNext: 'n', // (string) (n = next) 
      // Dont alter these variables in any way
      imageArray: [],
      activeImage: 0,
      startAt: 0,
      slideshow: 0
    }, settings);
    var jQueryMatchedObj = this;
    function _initialize() {
      _start(this, jQueryMatchedObj); 
      return false; 
    }
    function _start(objClicked, jQueryMatchedObj) {
      $('embed, object, select').css({
        'visibility': 'hidden'
      });
      _set_interface();
      settings.imageArray.length = 0;
      settings.activeImage = 0;
      if (jQueryMatchedObj.length == 1) {
        settings.imageArray.push(new Array(objClicked.getAttribute('href'), objClicked.getAttribute('title'), $(objClicked).data('detlink')));
      } else {
        for (var i = 0; i < jQueryMatchedObj.length; i++) {
          settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'), jQueryMatchedObj[i].getAttribute('title'), $(jQueryMatchedObj[i]).data('detlink')));
        }
      }
      while (settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href')) {
        settings.activeImage++;
      }
      if (settings.startAt) {
        settings.activeImage = settings.startAt;
      }
      _set_image_to_view();
    }
    function _set_interface() {
      $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
      var arrPageSizes = ___getPageSize();
      $('#jquery-overlay').css({
        backgroundColor: settings.overlayBgColor,
        opacity: settings.overlayOpacity,
        width: arrPageSizes[0],
        height: arrPageSizes[1]
      }).fadeIn();
      var arrPageScroll = ___getPageScroll();
      $('#jquery-lightbox').css({
        top: arrPageScroll[1] + (arrPageSizes[3] / 10),
        left: arrPageScroll[0]
      }).show();
      $('#jquery-overlay,#jquery-lightbox').click(function() {
        _finish();
      });
      $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
        _finish();
        return false;
      });
      $(window).resize(function() {
        var arrPageSizes = ___getPageSize();
        $('#jquery-overlay').css({
          width: arrPageSizes[0],
          height: arrPageSizes[1]
        });
        var arrPageScroll = ___getPageScroll();
        $('#jquery-lightbox').css({
          top: arrPageScroll[1] + (arrPageSizes[3] / 10),
          left: arrPageScroll[0]
        });
      });
    }
    function _set_image_to_view() { 
      $('#lightbox-loading').show();
      if (settings.fixedNavigation) {
        $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
      } else {
        $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
      }
      if(!settings.imageArray[settings.activeImage]) {
        settings.activeImage = 0;
      }
      
      var objImagePreloader = new Image();
      objImagePreloader.onload = function() {
        $('#lightbox-image').attr('src', settings.imageArray[settings.activeImage][0]);
        _resize_container_image_box(objImagePreloader.width, objImagePreloader.height);
        objImagePreloader.onload = function() {};
      };
      console.log("img array" + JSON.stringify(settings.imageArray[0]));
      console.log("img array first index" + settings.imageArray[0][0]);
      objImagePreloader.src = settings.imageArray[settings.activeImage][0];
    };
    function _resize_container_image_box(intImageWidth, intImageHeight) {
      var intCurrentWidth = $('#lightbox-container-image-box').width();
      var intCurrentHeight = $('#lightbox-container-image-box').height();
      var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); 
      var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); 
      var to_check = curfactor = false;
      margintop = parseInt($('#jquery-lightbox').css('top'));
      if (settings.containerFitToWindow) {
        to_check = ($(window).height() - (2 * margintop));
      }
      if (settings.containerCustomMaxHeight > 0) {
        if (parseInt(settings.containerCustomMaxHeight) == settings.containerCustomMaxHeight) {
          to_check = parseInt(settings.containerCustomMaxHeight);
        } else if (settings.containerCustomMaxHeight.indexOf('%') > 0) {
          curfactor = parseInt(settings.containerCustomMaxHeight) / 100;
          to_check = $(window).height() * curfactor;
        } else {
          to_check = parseInt(settings.containerCustomMaxHeight);
        }
      }
      if (intHeight > to_check) {
        oldHeight = intHeight;
        intHeight = to_check;
        curfactor = intHeight / oldHeight;
        intWidth = intWidth * curfactor;
      }
      var intDiffW = intCurrentWidth - intWidth;
      var intDiffH = intCurrentHeight - intHeight;
      $('#lightbox-container-image-box').animate({
        width: intWidth,
        height: intHeight
      }, settings.containerResizeSpeed, function() {
        _show_image();
      });
      if ((intDiffW == 0) && (intDiffH == 0)) {
        if ($.browser.msie) {
          ___pause(250);
        } else {
          ___pause(100);
        }
      }
      $('#lightbox-container-image-data-box').css({
        width: (intWidth - (settings.containerBorderSize * 2))
      });
      $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({
        height: intHeight + (settings.containerBorderSize * 2)
      });
    };
    function _show_image() {
      $('#lightbox-loading').hide();
      $('#lightbox-image').fadeIn(function() {
        _show_image_data();
        _set_navigation();
        if (settings.onloadFunction) {
          eval(settings.onloadFunction);
        }
      });
      _preload_neighbor_images();
    };
    function _show_image_data() {
      $('#lightbox-container-image-data-box').slideDown('fast');
      $('#lightbox-image-details-caption').hide();
      if (settings.imageArray[settings.activeImage][1]) {
        $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
      }
      if (settings.imageArray[settings.activeImage][2]) {
        $("<br/><span id='lightbox-image-details-link'><a href='" + settings.imageArray[settings.activeImage][2] + "' >Details und Kommentare</a></span>").appendTo($('#lightbox-image-details-caption'));
      }
      if (settings.imageArray.length > 1) {
        $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + (settings.activeImage + 1) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
      }
    }
    function _set_navigation() {
      $('#lightbox-nav').show();
      // Need to IE. 
      $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({
        'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
      });
      // Show the prev button, if not the first image in set
      if (settings.activeImage != 0) {
        if (settings.fixedNavigation) {
          $('#lightbox-nav-btnPrev').css({
              'background': 'url(' + settings.imageBtnPrev + ') left 15% no-repeat'
            })
            .unbind()
            .bind('click', function() {
              settings.activeImage = settings.activeImage - 1;
              _set_image_to_view();
              return false;
            });
        } else {
          // Show the images button for Next buttons
          $('#lightbox-nav-btnPrev').unbind().hover(function() {
            $(this).css({
              'background': 'url(' + settings.imageBtnPrev + ') left 15% no-repeat'
            });
          }, function() {
            $(this).css({
              'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
            });
          }).show().bind('click', function() {
            settings.activeImage = settings.activeImage - 1;
            _set_image_to_view();
            return false;
          });
        }
      }
      // Show the next button, if not the last image in set
      if (settings.activeImage != (settings.imageArray.length - 1)) {
        if (settings.fixedNavigation) {
          $('#lightbox-nav-btnNext').css({
              'background': 'url(' + settings.imageBtnNext + ') right 15% no-repeat'
            })
            .unbind()
            .bind('click', function() {
              settings.activeImage = settings.activeImage + 1;
              _set_image_to_view();
              return false;
            });
        } else {
          // Show the images button for Next buttons
          $('#lightbox-nav-btnNext').unbind().hover(function() {
            $(this).css({
              'background': 'url(' + settings.imageBtnNext + ') right 15% no-repeat'
            });
          }, function() {
            $(this).css({
              'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
            });
          }).show().bind('click', function() {
            settings.activeImage = settings.activeImage + 1;
            _set_image_to_view();
            return false;
          });
        }
      }
      _enable_keyboard_navigation();
    }
    function _enable_keyboard_navigation() {
      $(document).keydown(function(objEvent) {
       _keyboard_action(objEvent);
      });
    }
    function _disable_keyboard_navigation() {
      $(document).unbind();
    }
    function _keyboard_action(objEvent) {
      // To ie
      if (objEvent == null) {
        keycode = event.keyCode;
        escapeKey = 27;
        // To Mozilla
      } else {
        keycode = objEvent.keyCode;
        escapeKey = objEvent.DOM_VK_ESCAPE;
      }
      key = String.fromCharCode(keycode).toLowerCase();
      if ((key == settings.keyToClose) || (key == 'x') || (keycode == escapeKey)) {
        _finish();
      }
      if ((key == settings.keyToPrev) || (keycode == 37)) {
        if (settings.activeImage != 0) {
          settings.activeImage = settings.activeImage - 1;
          _set_image_to_view();
          _disable_keyboard_navigation();
        }
      }
      if ((key == settings.keyToNext) || (keycode == 39)) {
        if (settings.activeImage != (settings.imageArray.length - 1)) {
          settings.activeImage = settings.activeImage + 1;
          _set_image_to_view();
          _disable_keyboard_navigation();
        }
      }
    }
    function _preload_neighbor_images() {
      if ((settings.imageArray.length - 1) > settings.activeImage) {
        objNext = new Image();
        objNext.src = settings.imageArray[settings.activeImage + 1][0];
      }
      if (settings.activeImage > 0) {
        objPrev = new Image();
        objPrev.src = settings.imageArray[settings.activeImage - 1][0];
      }
    }
    function _finish() {
      $('#jquery-lightbox').remove();
      $('#jquery-overlay').fadeOut(function() {
        $('#jquery-overlay').remove();
      });
      $('embed, object, select').css({
        'visibility': 'visible'
      });
      if (settings.onexitFunction) {
        eval(settings.onexitFunction);
      }
    }
    function ___getPageSize() {
      var xScroll, yScroll;
      if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
      } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
      } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
      }
      var windowWidth, windowHeight;
      if (self.innerHeight) { // all except Explorer
        if (document.documentElement.clientWidth) {
          windowWidth = document.documentElement.clientWidth;
        } else {
          windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
      } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
      } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
      }
      // for small pages with total height less then height of the viewport
      if (yScroll < windowHeight) {
        pageHeight = windowHeight;
      } else {
        pageHeight = yScroll;
      }
      // for small pages with total width less then width of the viewport
      if (xScroll < windowWidth) {
        pageWidth = xScroll;
      } else {
        pageWidth = windowWidth;
      }
      arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
      return arrayPageSize;
    };
    function ___getPageScroll() {
      var xScroll, yScroll;
      if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
      } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
      } else if (document.body) { // all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft;
      }
      arrayPageScroll = new Array(xScroll, yScroll);
      return arrayPageScroll;
    };
    function ___pause(ms) {
      var date = new Date();
      curDate = null;
      do {
        var curDate = new Date();
      }
      while (curDate - date < ms);
    };
    return this.unbind('click').click(_initialize);
  };
})(jQuery);
</script>