Page 1 of 2

new Plugin, Thickbox

Posted: Mon Jul 03, 2006 2:28 pm
by Andyman77
Hiya,

Looking at the lightbox JS plugin which is very good and as it says, very simple to use.
I have found another one, called thickbox, this is slightly different than the lightbox mainly in that it has a smaller code base, but it can also be used to have HTML pages popping up in the same manner which I think is rather neat.
The main site that holds this code is here so you can see how it works.
You can see my attempt to get it to work with serendipity here

I have modified the code that was used for Lightbox to attempt to get it to work. I have managed to get the loading of the scripts done but it's the CSS file that is proving a problem to load up.

The basic commands that are used for loading the scripts, similar to lightbox.
You only need the following lines.

Code: Select all

<style type="text/css" media="all">
@import "css/global.css";
</style>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
I have attempted to do the same. but for some reason it doesn't work.

I'm out of idea on what to do next.

On the same token, I have done an upgrade to Lightbox js, but using lightbox 2.02 script.
You can download to review it from here Which works, again using the original Lightbox js script.

Just to add. I'm testing the script on S9y 1.1 alpha 7 build 02/07/06

Re: new Plugin, Thickbox

Posted: Mon Jul 03, 2006 2:40 pm
by garvinhicking
Hi!

You could try to change this:

Code: Select all

echo '<style type="text/css" media="all"> @import "'. $pluginDir.'/css/global.css" /></style>';		  
to this:

Code: Select all

echo '<style type="text/css" media="all"> @import "/' . $pluginDir.'/css/global.css" /></style>';		  
(Like the JS files above, the right prefix needs to be enforced - thus the path to the CSS must be an absolute path sttarting from your HTTP host on)

HTH,
Garvin

Posted: Mon Jul 03, 2006 3:54 pm
by Andyman77
Hiya Garvin,

Thanks for the quick reply.
It still doesn't want to play ball. I have added the change you mentioned, and in the process I noticed that the CSS was being called up twice..
I have also changed the regex so that it adds class="thickbox" actually I'm not sure if that is needed but would like a way to automatically add class="thickbox" and in a controlled manner.

You can see my test Here

The code generated appears to be all OK.

Code: Select all

<a   class="thickbox" href="/uploads/Image/reboot_yourself.jpg" title="Dilberts latest Book" ><img vspace="5" hspace="5" border="0" src="/uploads/Image/reboot_yourself.serendipityThumb.jpg" alt=""  /></a></p>
So am still rather stuck. :(

TIA

Andy

PS new source here

Posted: Mon Jul 03, 2006 4:09 pm
by garvinhicking
Hhhm...sadly I'm not experienced with lightobx/thickbox, so I don't really know what is happening there. Did you try to put the CSS into your main s9y stylesheet, just to see if that works?

Best regards,
Garvin

Posted: Mon Jul 03, 2006 4:33 pm
by Andyman77
Hiya Again Garvin

Well your advice to pop the thickbox css into the theme CSS file did the trick

Now, that we know that, is there a way so that when one generates the script it will add the css to the main theme css?

You can see it in action Here

Posted: Mon Jul 03, 2006 6:09 pm
by Andyman77
Fixed the problem, now all is working smoothly. :D
Took some elements out of the css file, there were a lot of duplicate commands,
You can download it from Here

How would I be able to upload it for others to try?

I think I may need to remove the regex part of the script? What do you think?

TIA.

Andy

Posted: Tue Jul 04, 2006 12:21 pm
by garvinhicking
Hi Andy!

Thanks a million. :)

I committed your plugin to Spartacus, but went a slightly different route: I added the thickbox support to the lightbox plugin. Now you can choose which to use in the dropdown. I think this is best to ease up the usage of this plugin witholut too much overhead, do you agree?

While I was at it, I also added the lightbox2 files. :)

Best regards,
Garvin

Posted: Tue Jul 04, 2006 1:25 pm
by Andyman77
Hiya Garvin,

yes, that's a good idea. However, I found a wee problem with thickbox, it doesn't appear to work with my copy of s9y 1.0 so that may be a problem. I have built a test s9y V1.0 with no plugins or anything to see if it's a problem with my setup or a s9y v1.0 issue.
I have done some more updates overnight, as I found some small errors in some of the scripts. ie, not showing loading graphics and other minor issues. Once fully sorted I'll repost my versions.

Other than that, thanks for the great support and great software.

TIA,

Andy

Update: Have just tested thickbox on S9y v1.0 and it doesn't appear to work. check Here :(

Posted: Tue Jul 04, 2006 2:08 pm
by garvinhicking
Hi!

I think thickbox didn't work for you because s9y emits "class='serendipity_image'" on its own. This overrides the thickbox class, because sadly thickbox uses 'class' instead of 'rel'. That is pretty bad, BTW.

So ideally a regexp would check if the <a> has already a class attribute and then just add the 'thickbox' class to it. But that's a tad complicated, so in my variant of the plugin I just shaffle the thickbox class to the beginning of the tag so that it seems to work there.

Checkout the new variant of thickbox, it should be in CVS soon.

Best regards,
Garvin

Posted: Tue Jul 04, 2006 2:19 pm
by Andyman77
Thank you very much Garvin.

As I'm not the creator of the original script, I don't think I had much choice in the class or Rel issue, but we can only work with what we have. :)

I'll try out your version when it come available or you could e-mail it to me if you like ?

Again, thanks very much, this is my first attempt at doing a plugin for s9y and it was good fun!

Just one question, it seems to work well in s9y v1.1 alpha 7 without much change just curious.

TIA,

Andy

Posted: Tue Jul 04, 2006 2:28 pm
by garvinhicking
Hi!

About the Rel: Yes, of course -- I didn't want it to sound like I was blaming you :-) :-)

But it might be nice to ask the thickbox author, if using "rel" alterantively would also work? Semantically that would also be a quite nice way...

My version is now online here:

http://php-blog.cvs.sourceforge.net/php ... t_lightbox

(I swapped around some paths to not create so many directories)
Again, thanks very much, this is my first attempt at doing a plugin for s9y and it was good fun!
Great to hear that! Your plugin idea also seemed to work out pretty well, so I hope you'll have fun in the future when it comes down to new plugins :)
Just one question, it seems to work well in s9y v1.1 alpha 7 without much change just curious.
Yes, I tested it with 1.1 on my machine :)

Best regards,
Garvin

Posted: Tue Jul 04, 2006 4:30 pm
by Andyman77
Thank you very much Garvin for the compliment. Don't worry I took no offence what's so ever.

I'm not totally up to speed in how to download from a CVS system, so I'll wait till it's available on Spartacus :)

Posted: Wed Jul 05, 2006 1:52 pm
by Andyman77
Good day Garvin,

I'm still not 100% sure if thickbox works smoothly with s9y 1.0 I have tested it on my test build of 1.0 and it doesn't want to work. So, I'm wondering whether it should have a version 1.1 only? Otherwise your modification is very good indeed.

TIA,

Andy

Posted: Wed Jul 05, 2006 2:50 pm
by garvinhicking
Hi!

Could you give me the URL to your testbuild, then I could check things?

1.1 and 1.0 shouldn't really be that different in this regard...

Best regards,
Garvin

Posted: Wed Jul 05, 2006 3:58 pm
by Andyman77
OK with pleasure.

My live blog: www.andyramblings.co.uk
Test s9y 1.1: blog.andyhopkins.com (this is normally using the latest nightly build)
Clean s9y 1.0 blog.andyramblings.co.uk (minimal extensions)

Personally I would prefer to have thinkbox to work as it automatically resizes images to fit the screen, Lightbox doesn't do this, so it can be quite messy.

Again, thanks for all the help :)

Update: Have contacted the developer of thickbox, and he mentioned that he will add the rel= part for the 'gallery' feature of thickbox. This is already available in lightbox.2.02