smd_slimbox

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….

Bloke · 2007-02-06 12:12:53

jstubbs wrote:

Is it possible to use your plugin with the stm_javascript plugin

It wasn’t… but it is now :-)

I’ve given smd_slimbox_inc a major overhaul in v0.2. Key features:

You can still use jsdir and cssdir as before
If you prefer to change locations of files or rename things you can now take advantage of a new option scripts. It takes up to 3 arguments, separated by commas; one for each script that is required by the plugin. Although you can skip modules (for example if you load them elsewhere… more in a minute), you have to specify them in this order: mootools JS file, slimbox JS file, slimbox CSS file. OK, technically speaking the CSS can go anywhere, so the key thing to remember is that when the page is rendered, mootools.js MUST appear before slimbox.js.
You can mix and match jsdir, cssdir, scripts and skip to tell it how you lay out your file system and how you work best within TXP. The only stipulation is if the total number of scripts you give to smd_slimbox_inc is not 3, it will complain.
If you wish to load javascript or CSS “outside” the tag, e.g. from txp:stm_javascript or txp:css you can do that. Just tell smd_slimbox_inc how many files you have managed yourself using the skip option.

So, for example, you could do this:

<txp:js n="mootools" />
<txp:js n="slimbox" />
<txp:css n="slimbox" />
<txp:smd_slimbox_inc skip="3" />

In essence, you must satisfy smd_slimbox_inc that you are aware of the existence of the 3 scripts. How you choose to notify it of this fact is up to you.

Another example:

<txp:js n="mootools" />
<txp:smd_slimbox_inc skip="1" cssdir="/myCss" scripts="/myScripts/slimbox.js" />

Unfortunately it’s not possible to embed the output of txp:stm_javascript or txp:css directly in the attributes of the scripts tag. That would be way cool. If you really really want to do it though, I’ve built the plugin so that you can hack it by using PHP and calling the tag directly, like this:

<txp:smd_slimbox_inc cssdir="/myCss" scripts="/myScripts/mootools.js, <txp:php>echo js(array('n' => 'slimbox'));</txp:php> />

Messy, but powerful! See Wet’s excellent post on tags in tags for more.

Also in this release, after a few hours chatting with wouaren last night, I’ve decided to reduce the amount of tag soup in the output. One new option has been added: wraptag which is the tag you wish to wrap each thumbnail “cell” with. It defaults to ‘nothing’, i.e. no tag at all (previously each cell was <div class="cell">). Practical exmaples might be wraptag="div", wraptag="li" or wraptag="p". Also, a lot of the default classes are now empty and do not appear in the page. They were not really necessary as you could get a CSS handle on them all without needing an explicit class name.

A consequence of this is your CSS or tag options may have to change when you upgrade, if you wish to keep it how you had it before. Sorry to mess you about, but the new output style is a lot meaner and leaner, requires less tag options for sensible output and is still highly controllable through CSS (examples in the plugin doc).

So now, instead of:

<div class="cell"><a href="blah"><img src="thumb1" /></a></div>
<div class="smd_slimbox_nav"><a class="smd_slimbox_next" href="?pg2">Next</a></div>

the default output is:

<a href="blah"><img src="thumb1" /></a>
<a class="smd_slimbox_next" href="?pg2">Next</a>

There is still a hard-coded <span> around the caption/alt because otherwise it’s just free-floating text and the page does not validate. I’ve also retained the default class names for the two Next/Prev links simply because they can then be easily differentiated from the other “a” tags around the thumbnails, without having to supply any more plugin options.

These changes should hopefully not cause you too many problems, but let me know if I’ve been a little over-zealous with the optimisations. Surrounding the plugin with <ul class="smd_slimbox"> and giving an option of wraptag="li" gives pretty much the same output as before, except now it’s a fancy unordered list instead of a series of divs. Much neater!

So without any more waffle, here’s smd_slimbox v0.2

I’ve also uploaded a separate version of mootools with the transitions if you want that functionality. The old version of Slimbox/mootools (v0.83) is still availble in smd_slimbox_v0.12 if you’re having compatibility problems with other plugins and the new v1.0 mootools framework.

Feedback welcome as ever. See ya!

Last edited by Bloke (2007-02-06 12:17:07)

Papuass · 2007-02-06 23:13:02

Great plugin, I have just migrated from bas_lightbox pugin.

After installing your plugins, I ran some queries to update my posts with images:

MAKE BACKUP BEFORE!
I did and had to use it – messed up one querie :)

UPDATE textpattern SET Body=replace(Body,'<txp:bas_lightbox id="','
<txp:smd_slimbox imageid="');
UPDATE textpattern SET Body_html=replace(Body_html,'<txp:bas_lightbox id="','
<txp:smd_slimbox imageid="');
UPDATE textpattern SET Body_html=replace(Body_html,'</txp:bas_lightbox>','
</txp:smd_slimbox>');

Working like a charm.

Last edited by Papuass (2007-02-06 23:13:36)

joel · 2007-02-11 19:17:44

where do I edit the caption text “Image xx of xx”?
I would like to change the language for this.

Thanks for a great plugin! :)

Vitruvius · 2007-02-12 09:57:28

I’ve finally had a chance to play with this plugin – and its great :) –

It turns out I was a little confused about what it actually did.

I’d love it if your powerful category selection code could be put to work to output kind of a mix between image_index and category_list (type=image). An index of image categories, with image categories listed and one (or more) thumbnails from each category. It would kind of be the page before the gallery proper. The main advantage would be that as image categories are added, the output would just include them. Having negate and other selection in the tag would enable the the filtering of misc image categories etc.

Anyway – this is a fine plugin as it stands – thanks again :)

SH

Bloke · 2007-02-12 20:22:10

joel wrote:

where do I edit the caption text “Image xx of xx”?
I would like to change the language for this.

Not in the plugin unfortunately; that has to be changed in Christophe’s code. Try looking in the comments or the forums (the ‘Get Help’ link from his page) and see if anyone else has mentioned about changing the language.

(if you’re a coder, have a look at line 140 of slimbox.js; in v1.3, it’s hard-coded there and you can change the text between the ' ' marks).

Vitruvius wrote:

I’d love it if your powerful category selection code could be put to work to output kind of a mix between image_index and category_list (type=image).

Ah, I see what you’re getting at, and now your previous post makes more sense :-p

Neat idea. So do you mean you could sort of offer a “here is a sample of what’s in all my galleries” and then when you click on one or more of the catgeories/thumbnails it takes you to a page that shows all the images in that category and from there you can do slimbox or however else you wish to display them?

Interestingly enough, the thing that tells the code to use slimbox is simply the use of rel="slimbox-groupname" so if I were to offer an option to suppress that bit, you’d have all the power of the category/id/negation available to make an image gallery that simply showed limit thumbnails with links to full-sizers. No idea where (if anywhere) we could go from there!

Ideally you’d want a combination, I guess? Perhaps some way of using if_different on a category that fed its name to a cut-down version of smd_slimbox that could then trim that category down using negation if required. Quite how/if it would use the ?fieldname options I don’t know; need to think about it.

I’m not very good with if_different yet; all the times I’ve used it I’ve just nicked someone else’s code and hacked it to work in my situation without really knowing how it works! If I suss out how it passes its parameters to other plugins/how I read that info into my plugins, it might spark some ideas that lead to a new plugin or a mod to this one.

If you’ve got any more thoughts on where you’d like to take this, share them with me (probably offline if it starts deviating too far from the plugin core; get hold of me via my website and we can mail/MSN/AIM from there if you like). It might turn out that such a tag should really be something that the core image_index/category_list should be able to do, but lack of subcategory implementation is holding it back?

btw, there’s nothing in the plugin to stop you having more than one image gallery per page, so it may be fairly easy for me to rip out the existing code and make it output the thumbs based on some external tag’s category/id output. The tricky part is how do I offer you the ability to do “whatever you want” from there? (e.g. you might want to drill down to subcats, or pass control to another plugin, or show another page, or whatever). If I can crack that from a technical coding perspective (probably through trying to fathom the image_index core code), and get some idea of what people might want to do from there, it might lead us somewhere cool…

Last edited by Bloke (2007-02-12 20:24:50)

benjibot · 2007-02-13 14:44:41

I just picked up this plugin yesterday after finally giving up on writing my own quick n’ dirty lightbox/slimbox category plugin (it’s been a while since I last coded PHP). It’s exactly what I needed, and has a few extra functions I hadn’t thought about, but might very well use. Kudos.

I’m having a slight problem though. Currently I’m in the very early stages of a redesign of a site I built a few years ago and running Textpattern locally to test as much as I can before uploading to the server. So, I’m in development mode to catch any error messages and when I run smd_slimbox I get the following at the top of the page:

<txp:smd_slimbox category="category" groupname="groupname" /> Undefined variable where on line 276.

(I’m almost positive that’s the line number, but I don’t have my PowerBook here to test it.)

The images load just fine below, and the slimboxing works as advertised. Should I just ignore it, knowing that when I switch back to live mode it’ll disappear? What’s going on in that where statement setup? I took a peek at it, but as I said earlier my PHP skills have gone all soft now that I switched over the Txp instead of a hacked together homebrew system.

Textpattern CMS

Textpattern CMS support forum

#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

#25 2007-02-06 12:12:53

Re: smd_slimbox

#26 2007-02-06 23:13:02

Re: smd_slimbox

#27 2007-02-11 19:17:44

Re: smd_slimbox

#28 2007-02-12 09:57:28

Re: smd_slimbox

#29 2007-02-12 20:22:10

Re: smd_slimbox

#30 2007-02-13 14:44:41

Re: smd_slimbox

Board footer