WP-Slimbox2

Check out the original Javascript page for a list of all the features, which you should be able to set from the plugin. I’ve also included the easing plugin to utilize the various enhanced easing functions if you so desire.

Support is graciously being hosted by Ryan Hellyer at PixoPoint.com I’ll make an effort to stay apprised of any questions that may arise.

A more elaborate discussion of features will be provided shortly.

Demonstration:
The demonstration uses all the standard settings except that the easing has been set to easeOutElastic.Grouped Gallery:
If you place `rel=”lightbox-imagesetname”` into your image links (replacing imagesetname with a unique name of your choice) all the images with imagesetname will be linked, allowing navigation by hovering over the left or right side of an image (until you see next/previous) or by using the assigned key codes (the defaults are configured here – left and right arrows).
4135322621534729504438Single Images:
By not including an imagesetname the effect limits itself to the clicked image.

Why did I write the script?:

I wrote this script after attempting to incorporate my Gallery2 gallery with WordPress. I found the WPG2 plugin very helpful (though I’m still learning its ins and outs to it), and attempted to use it’s built in lightbox and slimbox effects with no avail. Seeing that it was supposedly compatible with other plugins that added those effects I tried all of the ones I could find Lightbox2, Lightbox2, jQuery Lightbox, and Slimbox (yes, two of them were called Lightbox2).

None of them were bad, per se, though I was especially disappointed by the lack of control offered by most of them (Though it’s possible this was the fault of the JS, and not the plugin).

Another major downside with most of them was that they used javascript frameworks that I wasn’t already using. My site currently uses jQuery for K2 and the Multi-level Navigation Menu, and I’d prefer not to bulk up the site with additional frameworks. jQuery Lightbox was the exception, but it has a big ugly “ad” for the plugin in the upper right when you use it. I didn’t want that.

For some reason your comment didn’t post initially, but I got an e-mail about it, so I added it myself (unfortunately I lost your e-mail, so I hope you’ll check back to see this.

Regarding NextGEN Gallery, I have not personally tested it, but if I understand what the plugin page is saying, it should be. Go ahead and try it out, and let me know if it works for you (or if someone else tried it out let us know).

As for the template I’m using, did you mean theme? If you mean theme, I’m using K2 (the latest nightly release – so I could have threaded comments) with a mildly custom style.

Do I know of an easy plugin for a dropdown menu? What did you think of the menu at the top of my page? It’s implemented using the Multi-level Navigation plugin by Ryan Hellyer. To get a menu on par with the one above you’ll need to get the latest beta here. I’ve become a contributor to the project myself, hopefully it will suit your needs.

Dayna

The imageset function does not work in Nextgen when the autoload feature is enable. It only works when I disable it, but then again if I disable it, all the other images on my blog does not work (I have to manually add in the rel code). Is there a solution for this? Thank you. 🙂

Hi – I am overjoyed to see a lightweight jQuery solution as solid as Slimbox2 finally arriving for WP to suit dunces like me. Now, I don’t mind fiddling with PHP and JS but… I’m not sure I understand how to make the recognition going, i.e. where to copy into (I suppose, unless I misunderstood) into slimbox2_autoload.js.php the block from picasaweb.js… Help! (Pretty please…) The really awesome part is that I believe it would work also on “normal” links, provided the appropriate rel=”lightbox-blablabla” is attached. Which in the case of imagesets is doubleplus awesome.

(Sidenote: to illustrate how slow I am getting this stuff, I just now realized one has to be logged in at Pixo Point to actually see the beta! I’ve been staring at a linkless page for a few days now… not registered, of course. All’s good now.)

As for your question regarding the picasaweb block, I honestly don’t know. Currently I haven’t actually looked at that code to see how to implement it (hence why it’s listed as a planned feature). I included the js file because it had already been written by Christophe (the creator of the Slimbox scripts), and figured if anyone really wanted it in the mean time they could figure it out.

Assuming I get the time I’m hoping I can round off the Flickr and picasaweb integration, along with basic overlay color changing ability soon.

And regarding the PixoPoint menu beta, I didn’t realize you had to be signed in myself (since I typically already am). That’s good to know.

Hello,
thx for the great plug-in 🙂
I use the version 0.9.1, when i check the autoload? option the navigation whith the arrow keys doesn´t work.
The pictures in a gallery where open as an single picture.
What can I do???
I hope you can understand my question 🙂
Greethings
Olli

Oliver,
Thanks for the feedback.
If I read your question correctly you’re saying that when you use the auto-loading it’s not placing the images in a group/imageset, so you can’t navigate between them?

Can you show me an example? I visited your site, but you apparently had the autoload disabled as it was using the standard script and detecting only elements with `rel=”lightbox”` (which, not having an imagesetname variable would not be grouped together to cycle between images).

I actually copied a portion of your html and ran a test with the autoload feature turned on, and it appeared to work, so I’ll need a bit more info to figure out what exactly is wrong.

Oliver,
The plugin is working exactly the way it’s supposed to, but the situation you’re in is definitely one others may find themselves in, so it’s worth looking into a solution.

One possibility I’m going to strongly look into would be the ability to essentially run the loading script twice (if you select autoload). The first time it would take care of the elements specified as lightbox, and the second it would take care of those that aren’t.

Another option might be if I can implement the ability to specify different functionality on different pages – then you could choose one setting for the index page, and another for the gallery.

I’m going to need a chance to think about possible solutions for this problem, and how it might affect other cases (as well as what other cases there might be).

Actually, I just visited your personal(?) site, using the link from the one you provided, and saw that you appeared to be using the plugin instead of the one NextGEN Gallery provides, and that there you were using the autoload feature, was this what you were referring to?

If so, you could turn off autoload because NextGEN Gallery appears to provide the proper lightbox information for you (ie ‘rel=”lightbox[familie]”‘), the plugin would then group these together for you.

The reason it’s not grouping them for you with autoload turned on is because the images are nested individually inside of div tags, and the autoload derives the image set based on the parent element. As each image on that page is nested individually from each other in it’s own set of div tags it’s not getting put in the same imageset as the others. But just turn off autoload and it should work.

It depends on what you mean by play well, but I just ran a test (only have FF and IE7 at home) and I believe it works in an acceptable manner.
The images and overlay will be on top of the swf object, though the swf image will disappear (but sound will continue to play if there was any) until you close the slimbox.
I’ll attempt to give it a shot in IE 6 tomorrow, but why not give it a shot yourself and post back with the results?

Spi,
Thanks for the feedback. I admittedly didn’t think heavily on the autoload option, as I just used a script the Slimbox creator had written.

The ability to place all images in a post into a group definitely would be more ideal then merely the parent element. If only because it would allow people to position the images throughout the post. If people wanted separate galleries they could just make a new post, manually add the tags, or use a gallery plugin.

I’ll need to look at your code more closely when I have a bit more time, but at a glance I think I see what you’re doing.

I’ll definitely look into this and a solution for Oliver’s problem shortly after I implement the picasaweb and flickr integration.

I was actually aware of this as I use WPG2 myself, though since it adds the lightbox tags I’d considered it a non-issue. With some of the other posts I’ve seen I’ve realized it is an issue that will need to be resolved.

You should also note that v0.9.2.3 already implemented the options fix as soon as I was aware of the problem.

Hi. I’ve implemented your plug-in on my wordpress blog and it’s working fine. I am however having a problem changing the easing. I’ve changed it in the admin panel under settings but when I check it on the blog, it’s always the default easing. If you have a moment some time, could you have a look and see if anything stands out to you? Much appreciated!

I believe it should work, with autoload activated, however as it’s currently coded you would encounter a similar issue regarding cycling between images that Oliver and Spi have mentioned.

I’m working on deciding the best solution to this problem for implementation soon, but in the mean time, if you’re up for the effort you could implement Spi’s solution (replacing div.post with div.gallery might work even better for you).

Do note that slimbox is only designed for displaying images, shadowbox handles many different media types.

It’s working like a dream, and the automatic loading with linked images makes it absolutely seamless; no “issue” whatsoever. Just a minor observation though: since the displayed image counter text can be set in the options (i.e. “Image X of Y”) I’ve used that to “localize” it in another language. Do you think it’s possible to also offer such a setting for the “Close” link?

Alternatively, and if you’re interested, I’d be happy to offer a localized version of your plugin in Spanish (and Dutch, depending on time involved) so that the plugin options are shown in that language, depending on the chosen default WP language (as set in `wp-config.php` I mean). It’s not much, but I figure it’s a more practical ‘thank-you’ for your plugin…

I just started using your new jQuery Slimbox plug-in and it looks great so far. I like having all the options in the admin section so I don’t have to edit the JavaScript by hand.

I have one suggestion:
Since slimbox2_autoload.js.php is generated with php the browser isn’t caching the file and it gets downloaded with every pageload. The JavaScript shouldn’t change unless the settings are changed in the admin section though. Have you considered adding something like:
Cache-Control: max-age=86400, must-revalidate
to the Header so the file will be cached for 24 hours (or more)?

When I get a chance I’ll finish responding to the current comments, but to make things easier to track, as well as help others search in the future, please use the support forums for questions: http://pixopoint.com/forum/index.php?board=6.0

Dr. Johannes Zellner

Now having all the images of one post collected to a image set, I’d like to make them unique, so that if an image link occurs repeatedly across the post, the image appears only once in the image set displayed by slimbox.

Otto

Where am I supposed to manually add ‘rel=”lightbox”‘ for individual images or ‘rel=”lightbox-imagesetname”‘ for groups

Can someone tell this nooby fool what I’m missing here? I have trawled the forums, WP but nobody clearly says exactly where you are supposed add this.

Thanks

PS site is not up yet, hence no website link. I have the auto working fine but I think a manual setting will be better for my needs, as in one post I am sure to want to have both individual as well as several groups of images.

Malcalevak, I’m having a great time with your plug-in. It’s just what I was looking for. My only question is this: In my posts, I often place several thumbnails and one or two full sized photos. The thumbnails work fine when I insert them using the NextGen Gallery. They come in with the correct tag to function, i.e. <a rel=”lightbox[]. However, when I place a full sized photo they are tagged as <img src=”. . .”. Is there a way to make the full sized images default to the lightbox tag? I hope this makes sense to you!

Tom

Hi,
I’ve got the slimbox2 working alongside nextgen gallery and everything works perfectly, except I don’t know how to add titles?
The pictures all have titles (in wordpress under media -> edit media) but when i click on a picture on my site all i get is Image X of X and a gap where the title is meant to go.
I’ve read somewhere to ‘use the optional title atribtute’ title=” my caption” but adding this in doesn’t make any difference? Is there something incredibly easy i’m missing?

Jandry

Nice plugin. I was using wp-lytebox but this one look nice and still maintained. I use it with cleaner galery.
I began the french translation, are you interrested in it ? If yes, feel free to send me an email so I can send you the translation.

[…] Christophe Beyls’ Slimbox 2. To make things even easier, Greg Yingling has created a plugin, WP-Slimbox2, that implements Slimbox 2 within a WordPress blog (such as this news page!). Try it out by click […]