Web development: Lightbox Extension

Zobrazit obsah

Zobrazit komentáře | Zobrazit pouze komentáře

Na spoustě webů se v dnešní době objevuje použití tzv. lightboxu pro zobrazování obrázků. Já sám s oblibou používám Lightbox od Lokeshe Dhakara. Několik lidí mě požádalo, abych jim naimplementoval Lightbox do existujícího webu. Na samotném zakomponování Lightboxu do již stávajícího webu není nic obtížného (návod na domovské stránce projektu), ale jak to udělat, aby se Lightbox přiřadil sám ke všem obrázkovým náhledům, bez toho, abychom museli všude přidávat ref="lightbox", resp. ref="lightbox[galerie]". Nakonec vzniklo "rozšíření" pro původní Lightbox, nečekaně pojmenované Lightbox Extension. Odkaz na ukázkový kód - na samotném výsledku není přiliš efekt patrný, ale při náhledu do zdrojového kódu je vidět, že Lightbox není přímo v kódu přiřazen, vše se děje dynamicky pomocí Java Scriptu.

Lightbox - česká lokalizace

lightbox.js - změna pouze na řádku 511 (Element.setInnerHTML( 'numberDisplay', "Obrázek " + eval(activeImage + 1) + " z " + imageArray.length);)
closelabel.gif
nextlabel.gif
prevlabel.gif

lightbox_extension.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />
 <meta name="copyright" content="Tomas Kavalek | kavalek.eu 2007" />
 <meta name="author" content="Tomas Kavalek | kavalek.eu 2007" />
 <title>Lightbox Extension v1.00.0</title>
 <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
 <script src="js/lightbox/prototype.js" type="text/javascript" ></script>
 <script src="js/lightbox/scriptaculous.js?load=effects" type="text/javascript"></script>
 <!-- Include Lightbox Extension - BEGIN -->
 <script src="js/lightbox/lightbox-ext.js" type="text/javascript"></script>
 <!-- Include Lightbox Extension - END --> 
 <script src="js/lightbox/lightbox.js" type="text/javascript"></script> 
</head>
<body>
 <h1>Simple</h1>
 <a href="data/foo_01.jpg" title="Foo_01"><img src="data/thumbs/foo_01_t.jpg" alt="Foo_01" height="150" width="150" /></a>
 <h1>Gallery 1</h1>
 <div class="gallery">
 <a href="data/foo_01.jpg" title="Foo_01"><img src="data/thumbs/foo_01_t.jpg" alt="Foo_01" height="150" width="150" /></a>
 <a href="data/foo_02.jpg" title="Foo_02"><img src="data/thumbs/foo_02_t.jpg" alt="Foo_02" height="150" width="150" /></a>
 <a href="data/foo_03.jpg" title="Foo_03"><img src="data/thumbs/foo_03_t.jpg" alt="Foo_03" height="150" width="150" /></a>
 <a href="data/foo_04.jpg" title="Foo_04"><img src="data/thumbs/foo_04_t.jpg" alt="Foo_04" height="150" width="150" /></a>
 <a href="data/foo_05.jpg" title="Foo_05"><img src="data/thumbs/foo_05_t.jpg" alt="Foo_05" height="150" width="150" /></a>
 </div>
 <h1>Gallery 2</h1>
 <div class="gallery">
 <a href="data/foo_06.jpg" title="Foo_06"><img src="data/thumbs/foo_06_t.jpg" alt="Foo_06" height="150" width="150" /></a>
 <a href="data/foo_07.jpg" title="Foo_07"><img src="data/thumbs/foo_07_t.jpg" alt="Foo_07" height="150" width="150" /></a>
 <a href="data/foo_08.jpg" title="Foo_08"><img src="data/thumbs/foo_08_t.jpg" alt="Foo_08" height="150" width="150" /></a>
 <a href="data/foo_09.jpg" title="Foo_09"><img src="data/thumbs/foo_09_t.jpg" alt="Foo_09" height="150" width="150" /></a>
 <a href="data/foo_10.jpg" title="Foo_10"><img src="data/thumbs/foo_10_t.jpg" alt="Foo_10" height="150" width="150" /></a>
 </div>
</body>
</html>

lightbox-ext.js

// -----------------------------------------------------------------------------
//
//  Lightbox Extension v1.00.0
//  by Tomas Kavalek - http://www.kavalek.net
//
//  Very thanks to Dean Edwards for his cross browser event servicing functions
//
//  For more information on this script, visit:
//  http://www.kavalek.net/blog/web-development/lightbox-extension/
//
//  Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//	
//  Extension for Lightbox v2.03.3 by Lokesh Dhakar - http://www.huddletogether.com
//
// -----------------------------------------------------------------------------
/*
  Table of Contents
  -----------------
  Configuration
  Global Variables

  Lightbox Extension Class Declaration
  - initialize()
  - makeLightboxImages()
  - randomName()
  - makeLightboxGalleries()
	
  Miscellaneous Functions
  - initLightbox()
  - addEvent()
  - removeEvent()
  - handleEvent()
  - fixEvent()
	
  Function Calls
  - addLoadEvent(initLightbox)
*/
// -----------------------------------------------------------------------------

//
//  Configuration
//
var iMinWidth = 300;      // Minimal image width to be accepted as image for lightbox
var iMinHeight = 200;     // Minimal image height to be accepted as image for lightbox
var iThumb = "thumbs";    // String in image path to be accepted as image for lightbox
                          // One of above have to be valid for lightbox - size or path
var gElement = "div";     // Enclosing element for gallery - images unification
var gStyle = "gallery";   // Class name for gallery enclosing element

// -----------------------------------------------------------------------------

//
//  Lightbox Class Declaration
//  - initialize()
//  - end()
//

var LightboxExt = Class.create();

LightboxExt.prototype = {

  // initialize()
  // Constructor runs on completion of the DOM loading. Calls makeLightboxImages
  // and makeLightboxGalleries which find all probably elements to use Lightbox
  //  
  initialize: function() {
    this.makeLightboxImages();
    this.makeLightboxGalleries(gElement, gStyle);
  },

  //
  // makeLightboxImages
  // Loops through document looking for img tags enclosed by anchor and applies 
  // lightbox references for Lightbox class. All images with pattern or greater
  // size defined in configuratian will be modified - due to not changing all 
  // images, especially images buttons and links. 
  //
  makeLightboxImages : function(e, g) {
    var e = (e == null) ? document : e;
    if(g == null) var g = 'lightbox';
    else g = 'lightbox[' + g + ']'; 
    var links = e.getElementsByTagName("a");
    var img = null;
    for(var i = 0; i < links.length; i++) {
      try {
        img = links[i].childNodes[0];
        if(img.tagName.toLowerCase() == "img" && ((img.width >= iMinWidth && img.height >= iMinHeight) || (img.src.indexOf(iThumb) != -1))) {
          links[i].setAttribute('rel', g);
        }
      } catch(err) {
      }
    }
  },
  
  //
  // randomName
  // Generate random string for unique gallery name - images unification. 
  //
  randomName : function() {
    var chars = "abcdefghijklmnopqrstuvwxyz123456789";
    var name = "";
    for(var i = 0; i < 8; i++)
      name += chars.charAt(Math.floor(Math.random() * chars.length))
    return name;
  },
  
  //
  // makeLightboxGalleries
  // Loops through document looking for 'gElement' tags with 'gClass' class 
  // and applies makeLightboxImages with gallery name via randomName.
  makeLightboxGalleries : function(e, c) {
    var galleries = document.getElementsByTagName(e);
    for(var i = 0; i < galleries.length; i++) {
      if(galleries[i].className == c) {
        this.makeLightboxImages(galleries[i], this.randomName());
      }
    }
  }
}

function initLightboxExt() { myLightboxExt = new LightboxExt(); }

// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------
// written by Dean Edwards, 2005
// with input from Tino Zijdel - crisp@xs4all.nl
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {
  if(element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else {
    if(!handler.$$guid) handler.$$guid = addEvent.guid++;
    if(!element.events) element.events = {};
    var handlers = element.events[type];
    if(!handlers) {
      handlers = element.events[type] = {};
      if(element['on' + type]) handlers[0] = element['on' + type];
      element['on' + type] = handleEvent;
    }
    handlers[handler.$$guid] = handler;
  }
}

addEvent.guid = 1;

function removeEvent(element, type, handler) {
  if(element.removeEventListener)
    element.removeEventListener(type, handler, false);
  else if(element.events && element.events[type] && handler.$$guid)
    delete element.events[type][handler.$$guid];
}

function handleEvent(event) {
  event = event || fixEvent(window.event);
  var returnValue = true;
  var handlers = this.events[event.type];
  
  for(var i in handlers) {
    if(!Object.prototype[i]) {
      this.$$handler = handlers[i];
      if(this.$$handler(event) === false) returnValue = false;
    }
  }
  
  if(this.$$handler) this.$$handler = null;
  
  return returnValue;
}

function fixEvent(event) {
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
}

fixEvent.preventDefault = function() {
  this.returnValue = false;
}

fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
}

// This little snippet fixes the problem that the onload attribute on the body-element will overwrite
// previous attached events on the window object for the onload event
if(!window.addEventListener) {
  document.onreadystatechange = function() {
    if(window.onload && window.onload != handleEvent) {
      addEvent(window, 'load', window.onload);
      window.onload = handleEvent;
    }
  }
}
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------

addEvent(window, 'load', initLightboxExt);

Jak to funguje?

Jednoduše. Dříve než je zavolán konstruktor třídy Lightbox je volán konstruktor třídy LightboxExt. Co to znamená? Třída LightboxExt zajistí úpravu všech potenciálních obrazkových náhledu tak, aby na ně byl aplikován Lightbox. Projde celý dokument a najde všechny tagy a a zjistí, zda-li uzavírají tag img. To je první důležité zjištění. Jsou-li takové dvojice, tedy <a ...><img ... /></a>, nalezeny, testuje se ještě jedna podmínka. Aby nedošlo k převodu i u malých obrázků, které slouží k jistě jiným účelům, např. obrázková tlačítka, apod., testuje se minimální velikost obrázku, od které má být daný obrázek považován za obrázek náhledu. Druhou možností je uvedení řetězce, který by se měl vyskytovat v cestě k obrázku náhledu, např. thumbs apod.

Rozšíření také podporuje obrázkové galerie, tedy seskupení obrázků a jejich procházení. Obrázky, které mají tvořit galerii, je nutné uzavřít do tagu definovaného proměnnou gTag a přiřadit třídu stylu definovanou proměnnou gStyle, tedy např. všechny obrázky mezi <div class="gallery">...</div> budou seskupeny do jedné galerie. Takovýchto seskupení může být v jedné stránce několik. Je jednodušší uzavřít obrázkové náhledy do párového tagu, než upravovat u každého odkazu referenci.

05.03.2008 10:54:58 - 722x

Hodnocení (108)

56%

DOBRÉ | ŠPATNÉ

Komentáře k tématu 'Lightbox Extension' (0 komentářů)

Vložit komentář | Zobrazit pouze komentáře | Nahoru

Ještě nebyl vložen žádný komentář. Pro vložení prvního komentáře klikněte zde.