| « Search for contact with the outside world | Introduction to Chess and the art of war » |
Lightbox plugin using jquery (LJP)
Finally I got around to writing a plug-in for Gallery2 for the content management system I use, b2evolution.
The original stopped working when I installed some other plug-in. Seems the original used a javascript library that did not play well with others. I waited and waited, but no-one else was offering one that worked with Gallery2 and B2evolution, so I got tired of waiting and started writing, and researching.
Follow up:
This is the first release, and should be considered a beta version. Here's what it does.
Gallery2 plug-in inserts HTML into your post with rel=lightbox[g2image] within the img tag.
On initialization:
LJP adds a click event to each image with rel=lightbox[g2image] to showLightbox.
LJP appends a div to the HTML body element to contain the background matte.
LJP appends an image tag and css for the image to display, and a tag for the close button.
LJP appends a "dummy" image tag that is used to load the image for measurement purposes. A load event is added to trigger the display of a new image. This is probably now redundant and should be coded out on a further release.
LJP sets the maximum height and width for an image to the size of the viewport. This will have to be re-calculated on resize, again in the further release.
On image click:
Update the dummy image with the clicked image source and let the trigger of the its load event handle the rest.
On Load event:
Set the source for the display image.
Check the dimensions of the image, from dummy, and resize if larger than the viewport.
Center the image in the viewport.
The last page contains sample images of different sizes intended to test out how the latest version is working.
Attachments:
lightbox_jquery_plugin-1.2.1.zip (351 KB)
lightbox_jquery_plugin-1.1.zip (236 KB)
davidryman_lightbox_jquery_plugin-1.3.zip (249 KB)
