Hello and please help with Lightbox.

[akejo]

Hi all.

I've just installed Serendipity, added a few templates and tried out static pages and this far I am liking it very much. My idea in using this blogtool is to write stories which is mostly about pictures I take or find and from screenshots from games, kind of an 'online rpg game diary'.

I found the lightbox plugin when I was checking out Spartacus, installed it and then went blank on how to add it to an entry.

I added a picture to my media directory and then, as I edited an entry I added a picture with the 'media' button. The picture didnt become clickable as it should with the lightbox plugin, so I manually added the href tag around the image, pointing to the 'full' image and voila, it worked.

The code in my entry looks like this:

Code: Select all

<a href="/uploads/beard.jpg" class="lightbox"><img width='72' height='110' style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/uploads/beard.serendipityThumb.jpg" alt=""/></a>

Now ... I liked to be able to add it more easy so I scanned these forums to see if I had missed something. I found
http://www.s9y.org/forums/viewtopic.php?t=5647, and followed the directions in the last post in that thread.

The new post, with a picture, I created didnt work as it should. The image tag added from using the 'media' button looked like this:

Code: Select all

<a class='serendipity_image_link' href="/uploads/NCity.bmp"><img width='110' height='83' style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/uploads/NCity.serendipityThumb.bmp" alt="" /></a>

I even changed the ' to " and placed the code for picture 2 into the first entry, placed it beside the first, working, picture but only the first one use the lightbox feature, no matter if they are in same or in different entries.

Im starting to wonder if Im blindfolded and missing something here. I am using the default template to and have tested with others, same result.

Please help.

Thanks in advance.

EDIT: It seems it had something to do with adding a bmp image, don't know why. I added a new jpg picture and now THAT one works. only problem is that lightbox don't resize the picture so it won't be bigger then the browser..

[garvinhicking]

Hi!

Yes, I think the lightbox plugin does only check usual web graphics files like PNG and JPG; BMP should avoided in web context!

Sadly about lightbox resizing not larger than the browser window, that would be a lightbox issue. :-/

But I do think in most cases it makes sense to prevent scrolling?

Best regards,
Garvin

[akejo]

Hi!

Yes, I think the lightbox plugin does only check usual web graphics files like PNG and JPG; BMP should avoided in web context!

Sadly about lightbox resizing not larger than the browser window, that would be a lightbox issue. :-/

But I do think in most cases it makes sense to prevent scrolling?

Best regards,
Garvin

EDIT: I solved the issue by checking the lightbox 1 in configuration and the addon Lightbox Plus from http://serennz.cool.ne.jp/sb/sp/lightbox/. Not as fancy as v2 but it gets the job done


Hello and thanks for the response. I didn't realize I was using a bmp image until I saw, and read, the code of it myself. I was intending to use jpg ones, just gravved that one as a test

I am currently trying to get LB to center the images and make its size right so I guess its all about poking in LB's plugin directory.. My problem is basically that the picture is roughly 10% to bigger then the browser window.

I know its not a serendipidy issue in it self, but any hint about where the sizing/placing of the image is in LB's files would be most helpful [/i]

[stm999999999]

Hey, lightbox plus is a nice adaption! I like it so much, I add it to the lightbox-plugin.

Second, I did some bugfixes in the plugin and make sub-folders for each script (lightbox, lightbox2 ...).

You can find it here: http://blog.stephan.manske-net.de/uploa ... ghtbox.zip

So, my question: how can I put my work to the official lightbox-plugin? I changed a lot, but I did not have the time to learn diff, yet

[garvinhicking]

Hi!

Maybe this would then be a good time to look into 'diff'? It's not that hard. Or immediately use TortoiseCVS or WinCVS, they also have 'cvs diff' implemented via point+click.

Regards,
Garvin

[stm999999999]

Sorry, in the moment it is not a so good time to do so.

But, I found a program on my computer, that seems to make diff-outputs. But I have problems, because I changed the folder-structure of the plugin - so I do not know how to compare this correctly.

Please, use the complete zip-archive above to see the new files and the new structure.

For the differences to the old files, which I have changed, download this here: http://blog.stephan.manske-net.de/uploa ... ghtbox.zip

Perhaps this is a help?

[garvinhicking]

Hi!

I'll do that once I have my dev server back online. If I forget about this, please tell me again next week.

Best regards,
Garvin

[judebert]

I almost committed this.

I especially like how you've moved everything into separate directories.

That leaves me with one question, though: I notice that the CSS previously included a path, but it doesn't any more. Are you certain / have you tested that this will work?

If you have, let me know and I'll commit it, along with one minor change to an if statement.

While we're checking, may I also ask why there are so many new files in lightbox2/? The prev/next stuff doesn't bother me, but I'm a bit concerned about the image-1.jpg and thumb-1.jpg.

Finally, I notice that the thickbox JS and CSS hasn't changed. Shouldn't it, considering it's in a new directory?

Thanks; let me know how to proceed from here, and we'll get this checked in quickly.

[stm999999999]

I especially like how you've moved everything into separate directories.

sometimes chaos isn't the right way - but only sometimes!

That leaves me with one question, though: I notice that the CSS used to include a path, but it doesn't any more. Are you certain / have you tested that this will work?

Do you mean things like this?

Code: Select all

url(lightbox_images/prevlabel.gif)

I changed them to the image-name only, because now every image is in the same folder as their css-file. Or do you mean something else?

While we're checking, may I also ask why there are so many new files in lightbox2/? The prev/next stuff doesn't bother me, but I'm a bit concerned about the image-1.jpg and thumb-1.jpg.

They are all from the dir "lightbox_images" in the original plugin.

Finally, I notice that the thickbox JS and CSS hasn't changed. Shouldn't it, considering it's in a new directory?

What should I change there? I make changes in the plugin-php like for every of the js/css:

Code: Select all

                    
} elseif ($type == 'thickbox') {
    			    	echo '<link rel="stylesheet" type="text/css" href="' . $pluginDir . '/thickbox.css" />' . "\n";
    					echo '<script type="text/javascript">var thickbox_path = "' . $pluginDir . '/thickbox";</script>' . "\n";
                        echo '<script type="text/javascript" src="' . $pluginDir . '/thickbox/thickbox_jquery.js"></script>' . "\n";
    					echo '<script type="text/javascript" src="' . $pluginDir . '/thickbox/thickbox.js"></script>' . "\n";

the js-code itself should be path-free!?

Ah, I see, what you mean: There is only one image referenced by the js and their was still the right code with "+ thickbox_path +":

Code: Select all

		
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img src='" + thickbox_path + "/circle_animation.gif' /></div></div>");

But, to take a closer look:

this in the php should be changed:

Code: Select all

    			    	
echo '<link rel="stylesheet" type="text/css" href="' . $pluginDir . '/thickbox.css" />' . "\n";

to

Code: Select all

echo '<link rel="stylesheet" type="text/css" href="' . $pluginDir . '/thickbox/thickbox.css" />' . "\n";

Hm, take a second closer look:

Hm, I try the original plugin with thickbox - it does not work in the IE!? I get an overlay, but no image inside!?

But a bugfix - line 108:

Code: Select all

            
if ($regex == null) {
                if ($type == 'lightbox' || $type ==  'lightbox_plus' || $type == 'lightbox2') {

now, thickbox works well in the new folder-structure, but not in the IE, but it worked not in the IE with the original plugin structure, too.

Another problem with thickbox: on my test-installation at home (WAMP), thickbox did not work with all browsers, perhaps a problem with blogs not in the root of the domain? My test-installation is at localhost/blog/xxx!

[judebert]

Yup, that's the if-statement bug I fixed. I updated the thickbox path, as you specified, and then committed everything to CVS.

I now understand about the CSS paths. I was a little confused.

Thanks for the great work!

[stm999999999]

hm, I see the new folders, but no change to the php etc!? And lightbox2 etc is empty?

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

[judebert]

Weird; I made the new folders two days ago, but I only deleted/moved the files yesterday. Since the deleted files are gone, the new files should be inserted.

Maybe it updated while I was still making commits?

No, apparently I just missed the files. D*mn! I fixed 'em (love having a VPN running; I can even access the home computers from work, in an emergency).

Well, that should've taken care of it. I wonder why it still shows lightbox_images? I'm sure I've deleted it, and it doesn't show up when I update...

[stm999999999]

a little bugfix:

old:

Code: Select all

class serendipity_event_lightbox extends serendipity_event {

    function introspect(&$propbag) {

neu:

Code: Select all

class serendipity_event_lightbox extends serendipity_event {

    var $title = PLUGIN_EVENT_LIGHTBOX_NAME;

    function introspect(&$propbag) {

without this, in the extended entry properties / disalbed text-plugins there is an empty line instead of the name of the plugin

[garvinhicking]

Hi!

This already was patched in CVS some time ago. But thanks for offering a patch, neverthe less

Best regards,
Garvin