smd_slimbox

lee · 2007-02-01 14:53:05

Is there a way to have a category with 20 images in but just show the first thumb on a page (no prev/next) and when clicked image one comes up with the usual mouse over nav? I’d also like to just have a text link to initiate the display of a gallery, can it be done?

Cheers
Lee

Bloke · 2007-02-02 00:12:16

lee wrote:

Is there a way to have a category with 20 images in but just show the first thumb on a page (no prev/next) and when clicked image one comes up with the usual mouse over nav?

Not directly, but you can cheat! Use the plugin either in a form or an article like this:

<div class="smd_slimbox">
  <txp:smd_slimbox category="mycat" showpagelinks="0" />
</div>

And then, assuming your thumbnails are 100×100px, use CSS to hide all but the first image:

.smd_slimbox {
  width:100px;
  height:100px;
  overflow:hidden;
}

I’d also like to just have a text link to initiate the display of a gallery, can it be done?

Again, it’s not built in but you can cheat by combining the above technique with deleting the thumbnail of the first image. If you’re using glx_admin_image then it’s trickier since it always creates a thumbnail by default, but you can easily delete the ‘t’ thumbnail file directly from the images directory using your FTP program.

Without a thumbnail image, the plugin will display the alt text instead, so if you made the text “Click to begin image gallery” you’re laughing. Not exactly the world’s greatest description of the image, but hey.

If that doesn’t appeal, and you’d prefer to keep things a little cleaner, let me know. With a minor mod to the code I could add an option like, I dunno, textlink="inside" which would make the alt/caption clickable as part of the link; if I think about it carefully, I’m sure it could be used to allow you to place the caption above the image too.

Once this is in the code, you could replace the thumbnail of your first image with a tiny pic – like a 1-pixel transparent gif or something. You can then supply proper alt text (which now won’t show up) and give the caption text as “Click to view image gallery” instead. By using the showcaption="1" option from smd_slimbox you could then get the gallery to start from this text link.

Sorry it’s not native functionality yet; I didn’t consider it when I wrote the plugin. If I get inspired and can think of a way of doing it cleanly during the next revision I’ll see what I can do. If you have any ideas, just shout.

In the meantime, I hope that helps.

wouaren · 2007-02-02 00:41:07

Very nice plugin indeed but one thing would be GREAT !

The ability to use it like that :
<txp:smd_slimbox ids=“1,2,3,5” />

Wich would display a slideshow with images 1 2 3 4 5 wathever their category !

So we could show just one image like <txp:smd_slimbox ids=“4” /> or <txp:smd_slimbox url=“http://example.org/one.png” />

It would be nice indeed because sometimes we jsut want to show one image in an article and so creating a category just for this is … a little too heavy.

One other thing is that we must add :

<div class=“clear”></div> after each gallery otherwise the next div after the gallery will float (or im doing not right perhaps)

I hope you’ll understand my poor english ! THank you !

Bloke · 2007-02-02 03:30:36

wouaren wrote:

The ability to use it like that : <txp:smd_slimbox ids=“1,2,3,5” />

Your wish is my command :-)

Well, sort of. New option added: imageid that takes a list of image IDs to show. Can be combined with the category option so you can add (or remove!) “fixed” images to/from each gallery based on their ID. You may also use the following options:

?id : reads the current article ID and displays an image with that ID (very useful for per-article images)
?fieldname : reads the ID (or comma-separated list of IDs) in the given fieldname from the current article and displays those images.
!id_or_fieldname : reads the image ID (either explicitly as a number, or listed in the given fieldname) and removes those pictures from the gallery. Very handy if you want to exclude your article image from the gallery: just use imageid="!article_image"

See the plugin documentation for examples.

Also added in v0.12, since it was a quick win, is the ability to position the caption and make it clickable, as discussed in my post above this one. The option is called textpos and can take one of four values:

above : position the alt/caption above the image thumbnail, not clickable
below : position the alt/caption below the thumbnail, not clickable (default option)
before : position the alt/caption immediately before the thumbnail and make the text clickable
after : position the alt/caption immediately after the thumbnail and make the text clickable

OK, so there are curious semantics going on there, but it was the best terminology I could think of! This option allows the sort of stuff discussed above (e.g. making text links from the caption to start an image gallery) a reality. It’s still not a true “click here to start the gallery” but it works.

Download v0.12 and play.

One other thing is that we must add : <div class=“clear”></div> after each gallery otherwise the next div after the gallery will float

I’m not sure I understand. The <div> after the gallery will only float if its CSS tells it to. If you wrap smd_slimbox in a div (probably a good idea) and float it, then any div following it with its CSS set to float will indeed float alongside if your browser is big enough. You can get round this by using the CSS property clear:both;. That will (should!) force the div onto its own “row”. Does that help?

As ever, I’ve tested the version with as many wacky options as I can think of in order to try and break it, but comments/feedback are always welcome.

wouaren · 2007-02-04 16:43:07

Thx for this release, i still have a few problems, ill try to explain :
For the div clear problem, here’s an article i wrote withourh <div class=“clear”></div> after the <div class=“smd_slimbox”> tag, i know its just a css problem but then can you show me a page of yours without this problem ?

http://wandb.org/site/article/houston-we-have-a-problem

So, my css tells this :
.smd_slimbox {
clear:both; width:700px; margin:0px 0px 10px 25px;
}

.smd_slimbox .cell { width:100px; height:100px; float:left; margin:0 10px 10px auto; text-align:center;
}

I guess everything is ok but in fact, the last “cell” div is designed with float:left (as others) and so next bloc (here its a “p” one) will float …

EDIT: i just managed to fix it like that :
div.smd_slimbox { width:700px; margin-left:25px;
}

div.smd_slimbox div.cell {
display:inline; width:100px; height:100px; text-align:center;
margin:0;
}

.smd_slimbox img { margin:10px 10px 0 0;
}

Nevermind its just a css problem, the main one i’m just experiencing :

http://wandb.org/site/article/la-vie-tres-privee-des-animaux

Here’s a fun fact, look there’s only one thumb showing but when you click you got : 4 images, the code is :
<txp:smd_slimbox category=“nawak” />

“nawak” has only 1 image in it so how can this bug happen ?!

There’s such a big bug on Internet Explorer 6 … Can’t make it work on it and it make the website to crash !!!

Last edited by wouaren (2007-02-04 17:36:53)

Bloke · 2007-02-04 23:55:41

wouaren wrote:

i know its just a css problem… EDIT: i just managed to fix it

Cool, glad you found it.

Here’s a fun fact, look there’s only one thumb showing but when you click you got : 4 images

I can’t see it doing that now. Have you changed the code? It doesn’t appear to be using slimbox at all – it’s just showing the image normally in the browser when the image is clicked. The code to load site/js/slimbox.js is commented out so I can’t see the bug :-(

the code is : <txp:smd_slimbox category=“nawak” />
“nawak” has only 1 image in it so how can this bug happen ?!

That is strange. I’ve tried it with a category of only 1 image on my server, and I see 1 thumbnail. When I click the thumb I get a single image displayed so I cannot replicate what you have. If you can send any more details, code or screen grabs that would help me find out what’s going on, that’d be great.

For info, when a thumb is clicked, control is passed to the slimbox.js code. It looks through the page for any objects labelled with rel="lightbox-smd" (by default: the ‘smd’ part is configurable using the groupname option). It then knows that all such objects are to be displayed in the lightbox. It reads the text (a.k.a. group name) after the rel="lightbox-" of the clicked image, and loads all images it finds with the same group name. It then allows you to step through them one by one.

The only way I can see of it showing 1 thumbnail but allowing you to step through 4 images is if there are other objects on your page labelled with rel="lightbox" or something? Your page currently only has one instance of anything with such a name so I also cannot see how it can be generating 4 images. If I could see it happening or replicate it on my server I might be able to find the problem. If there is anything more you can tell me about your code or page layout, any information at all that’s relevant, let me know.

There’s such a big bug on Internet Explorer 6 … Can’t make it work on it and it make the website to crash !!!

Again, I’ve tested it on IE6, and on the Firefox IE Tabs plugin. Works fine except for two small details:

1) Keyboard navigation thru images doesn’t work in the current version of Firefox IE Tabs.

2) Certain images, especially dark “noisy” jpg images, can display weird blocks of white pixels in IE. My best guess is that there’s some bizarre jpg/png/gif transparency issue when images are overlaid using Micro$oft’s braindead rendering engine. Fix not found yet.

Past that, it’s working fine here, and it certainly doesn’t crash the browser (at least, no more frequently than it crashes of its own free will as usual!)

At which point does it crash? Is it when it shows the thumbnails (my code) or when it’s displaying the images in the lightbox (Christophe’s Slimbox code?) Which version of IE6? SP2? Can you give any more detailed info that might help? Is there anything that might shed some light on it in the comments on the slimbox page or the freewebsfarms forum posted above?

Sorry, but without more detailed information, or a page I can test, I cannot help right now.

Last edited by Bloke (2007-02-04 23:56:52)

wouaren · 2007-02-05 08:53:28

Ok, i desactived lightbox yesterday because it crashed, ill let the page for you and so you can see the IE BUG.

The bug of 1 thumb -> 4 images is the result of the “groupname” as you said, the rel is the same for each 4 images on the page… !

IE bug is discussed here :
http://www.freewebsfarms.com/forums/viewtopic.php?pid=3316

IE6.029 SP2 Windows XP does not open open the page. Instead I get a very rare error message in a PopUp: “Cannot open the page”.
The bug is pretty strange, because it does not always happen?!
If I don’t use either swfobject.js or slimbox I never get an error message.
Any hints for this one?
Is there a possibility to check such strange errors with a tool? In FF I use Firebug, but in IE the page does not even open.

So here’s the link to the page that crash : http://wandb.org (With Internet Explorer)

Hey btw ! there’s an updated version of slimbox :
File slimbox.zip [6.76kb]
Description Slimbox 1.3
Last updated 05 février 2007, 02:40
Downloads 5099

Ill try it with your scripts !
Thanks.

I tried it out, it just crash on IE like always ! IE version : 6.0.2900.2180 SP2
So bad ! Its the most used IE one !

Last edited by wouaren (2007-02-05 09:00:22)

Bloke · 2007-02-05 16:47:54

wouaren wrote:

IE bug is discussed here :
http://www.freewebsfarms.com/forums/viewtopic.php?pid=3316

Yeah I saw your post this morning when I went to get the new version of Slimbox (will release it later).

I see the error popup box “IE cannot open the page. Operation aborted” and then it dumps me to the standard ‘page cannot be displayed’ screen. It’s repeatable and happens every time on the root of your site but if I view any individual article it’s fine. These two use Slimbox: animaux and houston whereas these two don’t: blogosphere and drogue (btw I can’t see the 1 thumb/4 image bug anywhere.. which article is it in?)

So it’s something to do with your article list page and probably the interaction between having playable video content (swfobject.js) and something in either mootools.js or slimbox.js.

Since the problem goes away if you do not use slimbox, can you please check if it is actually my plugin code or the slimbox.js / mootools.js libraries that are causing the problem?

Try using <txp:smd_slimbox_inc jsdir="/nowhere" /> which will not load either script. If it doesn’t crash then it’s probably not my plugin code (per se)
Then try giving the correct jsdir directory but rename one of the files on your server so the browser cannot find it. See if it crashes this time
Put the filename back properly and repeat step 2 with the other file, then see if it crashes IE.

Once we’ve determined which of the files is causing the problem we can start to track down what it does not like. I’ve never known loading a javascript library to cause IE to go mad like that, but the browser just keeps on surprising me with its lack of ability!

Is there a possibility to check such strange errors with a tool? In FF I use Firebug, but in IE the page does not even open.

I was hoping to use the (substandard but vaguely functional) IE developer toolbar to catch it, but as you say it crashes before I even get a chance to do anything :-( Don’t know of anything else.

btw ! there’s an updated version of slimbox I tried it out, it just crash on IE like always ! IE version : 6.0.2900.2180 SP2

Yeah, I’ve downloaded the new Slimbox and it works fine (well, for me!) with the plugin so I’ll bundle it all up tonight and release it. Hmmm, should I change the version number of the plugin?!

It still hasn’t addressed the IE noisy jpg/pixelation issue and – worst of all – the noisy image continues to render badly in IE7. That leads me to believe the lazy sods at Microsoft just tweaked the Trident rendering engine of IE6 to fix the CSS bugs etc. I thought IE7 was supposed to support transparency? It’s been, what, 7 or 8 years since XP/IE6 so they’ve had enough time to rewrite the engine from scratch and do it properly!

Anyway, enough of my moaning, let’s see if we can work out what’s causing your page to kill IE so spectacularly. If you prefer to take the discussion offline from the TXP forum until we find a fix, use the contact form on my website to send me a message. If you have an MSN messenger or AIM account, let me know. Maybe we can set up a time to chat over that? Talk to you later.

Bloke · 2007-02-05 20:45:33

I’ve updated the zip package to use the latest version of Slimbox (v1.3). Rather than update the version number I’ve just indicated that it’s an update to the Slimbox part by adding the letter ‘s’ to the download. Functionality within the plugin remains the same.

If you’re updating an existing version, simply replace mootools.js, slimbox.js and slimbox.css with the versions from the new package and you’re all set. Although there are many improvements ‘under the hood’, the only visual change you’ll see is the caption sliding down out of the picture now. If you don’t like that feature you can turn it off by editing a number at the top of slimbox.js

I have not included the transitions module in that package, so you are stuck with the standard sineInOut motion. If you are tired of that, I have also uploaded a version with the transitions pre-packaged (denoted by the letter ‘t’ this time). If you already have a version of mootools with the required modules in it, you’re good to go. If not, for 2.5kB more you can have access to a host of transition effects. Just upload the mootools.js from the ‘t’ package and then edit the transition value at the top of slimbox.js from sineInOut to one of those given in the mootools transitions documentation page.

Take your pick which version you like ‘s’tandard or ‘t’ransitions and play away. In future I may bundle both versions together in the same zip and you can choose which to install.

Updates, bugs, feature requests, etc on a postcard to the usual address…

Last edited by Bloke (2007-12-05 00:57:20)

jstubbs · 2007-02-05 21:29:24

Just wondering what is the difference between your plugin and Christophe’s original? I have his installed, but would prefer to have it as a plugin rather than installing Slimbox manually.

As I noted earlier in Christophe’s cbs_livesearch plugin topic, upgrading to the latest version of mootools 1.0 breaks the live search, at least in my case.

Bloke · 2007-02-05 21:50:11

jstubbs wrote:

Just wondering what is the difference between your plugin and Christophe’s original? I have his installed, but would prefer to have it as a plugin rather than installing Slimbox manually.

The plugin adds the ability to pull various categories/IDs of images from TXP’s image database, present them as thumbnails and then control is passed to Christophe’s neat code to do the dirty work of displaying the lightbox. As far as installation is concerned, you still have to “install” the files from his page (packaged with my plugin for convenience) on your web server.

If you have installed Slimbox already, you only need my raw plugin code to give you two tags:

To tell the plugin where Christophe’s code/mootools is located on your server
To generate thumbnails based on all sorts of weird and wonderful permutations of categories/IDs; not categories; not IDs; categories/IDs read from custom fields or anywhere else you care to put them in your articles; and so on. Can create some very powerful image galleries that auto-update simply when you upload a new image.

As I noted earlier in Christophe’s cbs_livesearch plugin topic, upgrading to the latest version of mootools 1.0 breaks the live search, at least in my case.

That’s a shame, but entirely possible. Never tried Christophe’s Live Search, only ever used Rob Sable’s one. Not sure how that fares with mootools 1.0 installed.

The previous version 0.12 of smd_slimbox, based on mootools 0.83 and Slimbox 1.22, is still available if compatibility with other plugins is required for now. Functionally it is identical to v0.12s and 0.12t; only the Slimbox part has changed.

Last edited by Bloke (2007-02-05 21:54:17)

jstubbs · 2007-02-05 22:13:09

Nice! I will try it out and hopefully fix the cbs_livesearch script by using your older version of the Slimbox plugin….

Is it possible to use your plugin with the stm_javascript plugin, which is really useful because all JS is maintained within TXP….

Textpattern CMS

Textpattern CMS support forum

#13 2007-02-01 14:53:05

Re: smd_slimbox

#14 2007-02-02 00:12:16

Re: smd_slimbox

#15 2007-02-02 00:41:07

Re: smd_slimbox

#16 2007-02-02 03:30:36

Re: smd_slimbox

#17 2007-02-04 16:43:07

Re: smd_slimbox

#18 2007-02-04 23:55:41

Re: smd_slimbox

#19 2007-02-05 08:53:28

Re: smd_slimbox

#20 2007-02-05 16:47:54

Re: smd_slimbox

#21 2007-02-05 20:45:33

Re: smd_slimbox

#22 2007-02-05 21:29:24

Re: smd_slimbox

#23 2007-02-05 21:50:11

Re: smd_slimbox

#24 2007-02-05 22:13:09

Re: smd_slimbox

Board footer