[plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

cbeyls · 2006-09-21 16:58:36

Just a word to tell you I’m nearly finished. Finally, I moved on to the Mootools framework to write the code, since it’s the smallest framework available and it allows you to do amazing things that prototype can’t do. Thanks to this, I was able to reduce the file size a lot. Without the framework, my script is now about 7.5kb uncompressed, 5.5kb shrinked and 1.7kb gzipped, and it’s a perfect clone of the original one (well actually, it’s more robust and efficient than the original one but the features are the same :) ).

This convinced me to rewrite cbs_category_list for mootools.

pieman · 2006-09-21 17:45:17

hello
I’m making a single-page site and I want to display thumbs from a category called “gallery” in a sidebar…
I’m a bit flummoxed by the help guide to be honest.. can anyone point me towards the right approach?
What should I put in my page template?
many thanks
Stu

cynicalpink · 2006-09-27 22:04:21

cbeyls, will your version of lightbox be available soon? :-)

cbeyls · 2006-09-28 02:24:43

Well, I’ve stopped working on it a few days ago. And, It’s finished and I’m really happy with it.

Still, there’s one thing I would like to change from the original version, but I’ve not figured out how to do it without adding too much complexity. I would like to be able to close Lightbox by clicking on the overlay, but currently it only works if you click above or below the image, not if you click at the right or the left of it because the main Lightbox div is stretched to 100% of the window’s width and covers the overlay (so it’s not clickable at this place). What I would like to do is center the Lightbox div on the screen by using CSS, without including it in a container stretched to 100%, but I don’t know if it’s possible. Maybe I’ll find out.

Anyway, here are the advantages of this new version over the original Lightbox:

No need for the huge prototype and scriptaculous libraries, now the script uses mootools which is much more compact.
The script itself has been almost entirely rewritten and is much smaller than the original one. The code is more efficient, contained in a single class, and uses the most possible code from mootools.
Now all images (next, prev, close, loading spinner) are defined in the CSS stylesheet, so you don’t need to edit javascript variables to change them.
Now you don’t need the dummy transparent gif image anymore. I found another way to make the “mouse over” work in Internet Explorer.
All CSS is valid and clean, no more hacks.
You can now use the keyboard arrow keys to navigate between images, and the escape key to close Lightbox.

And of course it still works in Firefox and other Gecko-browsers, Internet Explorer, Opera and Safari.

Because it’s not a Textpatten plugin, I won’t publish it on the Textpattern resources site. I’ll send a link to the files on this forum, probably at the end of the week. Testers are welcome.

cbeyls · 2006-10-01 02:19:16

Just a word to inform you that there are some features I use in my Lightbox script that are now just integrated in the latest mootools experimental (svn) release. I asked Valerio Proietti, the author, if he could add them to mootools and he did. However, because it is experimental, I think I’ll wait for the next stable release of mootools before publishing the script.

One of the features I suggested to Valerio was the onDomReady() callback. Currently this much discussed feature is only available in jQuery. Now it is also available to mootools.

If you don’t know what I’m talking about, it’s an utility method that allows you to add a callback that will launch when the DOM tree has just finished loading, instead of waiting for all binary content of the page (especially images) to be downloaded like window.onload does. It’s a bit hard to implement since there is no standard way to do this and every browser has its own solution/hack to achieve that.

Valerio made a first experimental implementation of it but I was not satisfied (It does not work very reliably) so after lots of research on the subject I wrote another one myself which I believe is more robust. I’ve sent it to him and I don’t know if he’ll take it in consideration for a next release, but I hope so.

tye · 2006-10-13 08:43:55

When I go to the links that Bastian has supplied throughout this thread, I can’t seem to get Lightbox working – they just link to the images… I also couldn’t get it to work when I installed it in my textpattern… does anyone else have this problem or is it just my machine setup?

I love this plugin – great work Bastian and to the others who have worked on it :)

gdtroiano · 2006-10-20 15:22:44

On the article page, the drop-down box to select an image category seems to disappear after upgrading to TXP 4.04…

gdtroiano · 2006-10-20 15:40:27

I take it back. I had to re-hack the new TXP files for the extra custom fields I added. The Lightbox field now shows up on the article page—though as a text box, not a drop-down box anymore…

cbeyls · 2006-10-23 03:34:01

My version of Lightbox is now available.
16kb total javascript filesize (minimal required framework: 9kb + my script: 7kb), cleaner CSS.
100% compatible with the original Lightbox.

Last edited by cbeyls (2006-10-23 03:35:28)

mercury · 2006-10-23 05:19:55

cbeyls, just amazing! thanks! maybe you know or can point to how can i disable that superfluous caption animation? thus caption should appear straigh away with photo pinned at bottom, and not roll out after. wanted this since original lightbox installed.. couldn’t overcome that..

edit:
ah, and one more thing. i used some sort of hack for lightbox to shrink image to browser window. great thing i should say. miss that right now) will try to find and merge appropriate code in ur source..

Last edited by mercury (2006-10-23 05:22:16)

cbeyls · 2006-10-23 13:59:52

My code is very different from the original one. I don’t use any img tag for example, so you won’t be able to resize an image. I’m using a div block with a background image instead, and CSS 2 does not allow background image resizing. Why do I use this? Because this allows to hover the mouse above the image to see the “next” and “prev” links in Internet Explorer without having to use a hack based on a transparent gif image like in the original Lightbox.

For the caption animation, it’s easy to disable by changing a few lines of code, I think I’ll add it as an option for the next version.

Last edited by cbeyls (2006-10-23 14:02:14)

Textpattern CMS

Textpattern CMS support forum

#193 2006-09-21 16:58:36

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#194 2006-09-21 17:45:17

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#195 2006-09-27 22:04:21

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#196 2006-09-28 02:24:43

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#197 2006-10-01 02:19:16

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#198 2006-10-13 08:43:55

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#199 2006-10-20 15:22:44

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#200 2006-10-20 15:40:27

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#201 2006-10-23 03:34:01

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#202 2006-10-23 05:19:55

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

#203 2006-10-23 13:59:52

Re: [plugin] [ORPHAN] bas_lightbox (Thumbnail galery with unobtrusive javascript)

Board footer