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

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)

coffeepostal · 2006-10-30 15:50:25

I’ve got a really random problem. Whenever you roll over anything that links (text links or image links) in Safari, the link disappears and the page flows up to cover it.

The site was working fine, until I installed the bas_lightbox plugin, and it seems to have caused it, but I can’t find anything that would cause it…

The plugin’s site does the same thing in Safari.

Any and all help would be appreciated.

colak · 2006-11-09 14:25:08

I am using a modified version of v0.3 the plugin. The reason is because I wanted to show the caption (which included html and js) with the thumbnails. It was working just fine with txp v4.0.3 but on 4.0.4 I have some minor issues.

The problem is very visible on hblack.net/hblack/index.php?id=81 and not so visible on hblack.net/hblack/index.php?id=104 .

The visible problem (id 81): the javascript is pushed next to the image
The not so visible problem occuring everywhere but id 104 is an easily loaded example: the title tag of the thumbnail includes the whole of the caption, html n’ all.

I have uploaded my modified verison of the plugin here . Can anyone point out to me what I have to change in there. It’s been 2 hours that I’ve been trying to figure it out and I just can’t see it. I think that I have changed all $caption and title occurrences in the code but I just can’t get any satisfactory results.

Last edited by colak (2006-11-09 14:54:55)

colak · 2006-11-10 15:59:10

Maybe I haven’t been very clear… What I am looking for is an indication of where I can edit the code so as for the thumbnails not to have a title attribute
ie instead of
<img src="/images/472t.jpg" alt="alt title" title="image title" /> I need <img src="/images/472t.jpg" alt="alt title" />
I just can’t find where in the code the title attribute is called and inserted. Any help will be greatly appreciated.

squaredeye · 2006-11-10 16:10:34

colak,
I show the change you need to be on line 36.

Perhaps you could change:

'" rel="lightbox" title="'.$big['alt'].'">'

to

'" rel="lightbox">'

rloaderro · 2006-11-10 16:19:36

ma_smith wrote:

I show the change you need to be on line 36.

Actually that just changes the link surrounding the image – colak’s looking to change the image itself. The problem is, it’s TXP code – the image (thumbnail) is generated with TXP’s thumbnail function:

$thumb = thumbnail(Array('id' => $getImg));

And in 4.0.4 if the image has a defined caption (in the database) it will render it as the title attribute (line 245 of taghandlers.php):

($caption ? ' title="'.$caption.'"' : '').

There doesn’t appear to be a way to solve this easily without modifying the TXP code. If you’re interested I can probably tell you how…

coffeepostal · 2006-11-10 16:23:04

Anyone have some help on my issue: http://forum.textpattern.com/viewtopic.php?pid=130094#p130094

Last edited by coffeepostal (2006-11-10 16:23:23)

Textpattern CMS

Textpattern CMS support forum

#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)

#204 2006-10-30 15:50:25

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

#205 2006-11-09 14:25:08

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

#206 2006-11-10 15:59:10

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

#207 2006-11-10 16:10:34

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

#208 2006-11-10 16:19:36

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

#209 2006-11-10 16:23:04

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

Board footer