Apply Lightbox to image element
Ligthbox is a an ease and simple to use javascript API to apply to image in blog or web page. It can let your pictures show more fashion.
The typical usage of Lightbox, image element must be wrapped in anchor element. This manner will produce more html code. In the origin manner:
We can see, it has many html code that anchor elements and image elemets are mix together. It has two level, but it just an image. This may make you confused when you want to edit it and if your have a complex content page. If we can omit anchor element, the html code will be more clear. Let see as follow:
I removed anchor element, and attribute rel and href were moved into image element. Attribute src was thumbnail, and href was original size.This manner's advantage include image element created by JavaScript will be more convenient to apply Lightbox feature. To achieve this manner, it should modify some soure code in lightbox.js.
Lightbox is to utilize that monitor click event of whole document. Lightbox will showed until 「If there is a click event triggered and it was triggered by anchor or area element that has rel attribute and it value is start with "lightbox"」. Here, I changed this rule to 「If there is a click event triggered and it was triggered by "any" element that has rel attribute and it value is start with "lightbox"」.
The rel, href and title are anchor element's attribute, not DOM global element. We had modified the manner of get these three attribute value to fit all DOM elements. We can use getAttribute("attribute name") method to achieve it. Until here, we can apply Lightbox feature on image element directly.
Download
Lightbox's architecture is not complicated. Next time, I will try to modify it to apply not only for image but also for text and the others.
The typical usage of Lightbox, image element must be wrapped in anchor element. This manner will produce more html code. In the origin manner:
<a rel="lightbox[img]" href="http://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg">
</a>
<a rel="lightbox[img]" href="http://www.lokeshdhakar.com/projects/lightbox2/images/image-4.jpg">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg">
</a>
<a rel="lightbox[img]" href="http://www.lokeshdhakar.com/projects/lightbox2/images/image-5.jpg">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg">
</a>
We can see, it has many html code that anchor elements and image elemets are mix together. It has two level, but it just an image. This may make you confused when you want to edit it and if your have a complex content page. If we can omit anchor element, the html code will be more clear. Let see as follow:
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" rel="lightbox[img]" href="http://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" rel="lightbox[img]" href="http://www.lokeshdhakar.com/projects/lightbox2/images/image-4.jpg">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" rel="lightbox[img]" href="http://www.lokeshdhakar.com/projects/lightbox2/images/image-5.jpg">I removed anchor element, and attribute rel and href were moved into image element. Attribute src was thumbnail, and href was original size.This manner's advantage include image element created by JavaScript will be more convenient to apply Lightbox feature. To achieve this manner, it should modify some soure code in lightbox.js.
Lightbox is to utilize that monitor click event of whole document. Lightbox will showed until 「If there is a click event triggered and it was triggered by anchor or area element that has rel attribute and it value is start with "lightbox"」. Here, I changed this rule to 「If there is a click event triggered and it was triggered by "any" element that has rel attribute and it value is start with "lightbox"」.
@@ -188,7 +188,7 @@ Lightbox.prototype = {
this.updateImageList = Prototype.emptyFunction;
document.observe('click', (function(event){
- var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
+ var target = event.findElement('[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);The rel, href and title are anchor element's attribute, not DOM global element. We had modified the manner of get these three attribute value to fit all DOM elements. We can use getAttribute("attribute name") method to achieve it. Until here, we can apply Lightbox feature on image element directly.
@@ -215,15 +215,16 @@ Lightbox.prototype = {
if ((imageLink.getAttribute("rel") == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
- this.imageArray.push([imageLink.href, imageLink.title]);
+ this.imageArray.push([imageLink.getAttribute("href"), imageLink.getAttribute("title")]);
} else {
// if image is part of a set..
this.imageArray =
- $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
- collect(function(anchor){ return [anchor.href, anchor.title]; }).
+ $$(imageLink.tagName + '[rel="' + imageLink.getAttribute("rel") + '"]').
+ collect(function(anchor){ return [anchor.getAttribute("href"), anchor.getAttribute("title")]; }).
uniq();
- while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
+ while (this.imageArray[imageNum][0] != imageLink.getAttribute("href")) { imageNum++; }
}Download
Lightbox's architecture is not complicated. Next time, I will try to modify it to apply not only for image but also for text and the others.
留言