Lightbox 2 for Drupal 5.x

Fixed a function name. Added Implementation notices.

Using lightbox2 in a Drupal 5 environment breaks nearly all built in Javascript functionality. You can clearly see this on the node/add/something pages: no more resize of textfields, no more working collapsing of options (actually you cant set anything) and so on.

This is not really a lightbox2.module problem, its because of the jquery introduction into the drupal core. As you can read here: http://jquery.com/docs/PrototypeAndJQuery/ to ensure the drupal core javascript functions are working, you would have to ensure the prototype.js is loaded earlier than the jquery.js file. But this would require to hack the common.inc, especially function drupal_add_js() because by default this function assures, that jquery.js and drupal.js are loaded in front of everything else. Beside of this, its not even sure, that the lightbox script is working with the different $() function from jquery.

This will become a big problem for all modules trying to use the prototype or depending frameworks like scriptaculous. As bugs_nz mentioned before, he is planing to make lightbox2.module dependant of the S/P AJax module. Maybe they have some ideas on howto get prototype working in the new drupal 5 jquery environment.

The easiest workaround at this time, to ensure lightbox won't break the whole site, is to disable the prototype dependend lightbox2/plus and just allow the use of lightbox1/lite.

Sorry for breaking on your post with this Gurpartap. But i just disliked the idea people are thinking Lightbox2 would just run fine with Drupal 5. There is much work to do. Beside the patch you commited is also important for the compatibility. Im not sure if it is neccessary to create a special permission for the lightbox options. I mean, they are universal for the whole site and they dont have to change often: so i think i would prefer to restrict them on "administer site configuration". But thats open to discussion i guess...

One little thing needed for Drupal 5 modules still missing in your patches is the module.info file. I'll attach one to my post.

sorry i selected the wrong status before... set now to patch (code needs work)

not preiciously on topic but not off.
I draw your attention to a new module using the JQuery Thick box method
http://drupal.org/project/thickbox

edit conflict over wrote status. Resetting status.

Firsty, thank you to Gurpartap and StIllE for the time they have spent contributing to this module - it is much appreciated.

I haven't done much testing of this module with the latest copy of Drupal 5.0 as I had originally only commited myself to developing the 5.0 branch after the first RC. I was aware of conflicts between JQuery and Prototype and have been looking at ways around this, but with scheduling conflicts, I haven't managed to.

I've managed to fix a number of other bugs in the module as I have been going and will commit them to CVS over this weekend, at this time I will also update my copy of Drupal 5.0 and work out what can be done with Gurpartap's patch.

I see no issues with the last patch above. Anyhow, to avoid conflicts, prototype can be loaded before jquery.js loads.

Also, here's another *box*:

http://cvs.drupal.org/viewcvs/drupal/contributions/sandbox/GurpartapSing...

Demo:
http://jquery.com/demo/grey/

I see no issues with the last patch above. Anyhow, to avoid conflicts, prototype can be loaded before jquery.js loads.

its not the patch, that is problematic. its the protype inclusion, which overwrites the jquery function $() and thus breaks most of the contributed javascripts. if you dont use lightbox plus, there wont be a problem, because it doesn't use prototype. just try to enable it within the lightbox2 options and look at the node/add/page, which uses collapsing, to see the problem.

To the second, as mentioned above the drupal_add_js function allways inserts jquery.js and drupal.js before any other javascript. Maybe you could force prototype/scriptaulous to load before jquery by adding it through drupal_set_html_head(), but its still some sort of a workaround.

Regarding Greybox: there are many more *box* scripts. Heres a nice overview http://www.fortysomething.ca/mt/etc/archives/005400.php . I think i would prefer ThickBox because it has more functions than Greybox.

It's becoming a little chaotic in this issue comments, but i have to mention one last thing.

I finally found the time to test the original Lightbox v2 Script on jQuery compatibilty. Short: It wont work when jquery is enabled.
You can test for yourself on http://lab.kleingeist.info/lightbox-jquery/ .

I know there are some changes between this drupal version and the original, but the core functionality and so the incompatiblity to drupal will be the same. Hope i can submit some more specific drupal tests tomorrow.

there shouldn't be issue with fieldsets, etc at node/add/page, because prototype/lightbox isnt invoked there. It's called only when node is viewed. You might be having your own update/patch? Can you try the patch.

Please forgive me if I'm wrong. I still have to investigate into.

Yes, thats right, i have "Latest Image Block" and "Random Image Block" enabled. Forget about it, sorry. But the problem still remains.
Of course this block is optional, but nevertheless i dont like the idea to be forced to set the block visiblity to false for every page where a form could appear to preserve functionality.
Or is there any other easy way to disable it automatic, i don't see atm?

forgive me but i'm a relative newbie. i'm so confused about the subject of various ways to do drupal galleries and using lightbox or somekindabox with them.

whatever i do i want it to work with 5.0 when that hits, of course. i came across this thread and wondered, does litebox (instead of lightbox) provide a solution?

http://www.doknowevil.net/litebox/

as it uses moo.fx and prototype.lite, does this avoid problems?

anyone wishing to help me understand how to implement an image gallery using image nodes, perhaps with litebox or similar as part of it all, perhaps storing links instead of images in the database, and importing links or images from existing sites, feel free to write me off list. blake is my name and roadskater.net is the domain. rsn2.com is my beta site.

hoping this information on litebox helps.

blake

http://interface.eyecon.ro/development/demos/imagebox.html

ooh ooh !

Hi,

Can anyone tell me something about the status of Lightbox V2 for Drupal 5.x and/or the chances that it will work (because of jQuery and such)? I like to update my Drupal website to 5.x but I'm not sure yet, because I really need something like Lightbox. Like mentioned before: does Litebox avoid certain problems?

Thanks,
Marc

As has been mentioned previously, I will not be able to provide much more information on this. I have commited to work on attempting to fully port this module over to Drupal 5.x as soon as the first Drupal 5.x Release Candidate is made available.

If it can be made to work successfuly with JQuery then it will be ported reasonably quickly, if it cannot, then I will work on an alternative solution for those who wish to keep using the module.

Any news/updates on this?

I'm interested in this aswell.

Thx for news
agent

subscribing

subscribing

subscribing

Sorry for my "me too" approach. But I'm begging :-P tongue in cheek for the implementation of any Lightbox (V1, V2, Lite/Protoypeless, etc.) to Drupal 5. Please. :-D. I am also subscribing to this thread.

subscribe

subscribing ;)

hope someone with more knowledge than me will give it a try...

subscribing ;)

hope someone with more knowledge than me will give it a try...

What about using slimbox? It uses the mootools framework and is compatble with lightbox.
http://www.digitalia.be/software/slimbox

Please stay on topic, at least with the title ;)

Any "box" is just fine for me... :) The problem is to get it to get it going with the buildin javascript of drup5 or what?

I found a jQuery documentation page that explains how to use jquery with other libraries without conflicts. Is this solution implementable?
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Slimbox seems like a good work around. What would it take for someone to build a drupal module for it?

I am also interested on a module for Drupal 5.1

Does LB2 play videos (quicktime movies, for example)?

I've made Prototype available for Drupal 5, the only thing which I had to changed was the name of the $()-Function to $ID(), so you may have to change it in your Scripts and/or Lightbox too.

Grab it at : http://xhochy.org/en/2007/03/18/using-prototype-with-drupal-5/

subscribing

:-)

Has anyone implemented the changes for the Prototype in item #31 into Lightbox V2? Does it work?

I will try to implement the changes with the help of the same script into lightbox.

BUT: Is there a test-environment for lightbox, so that I can check if it works?

Ok I modified all the necessary code for the use of Lightbox2 in Drupal. This are the steps to build a package that works with Drupal:

• Grab the Lightbox2 package at http://www.huddletogether.com/projects/lightbox2/
• Get the prototype.js from http://xhochy.org/en/2007/03/18/using-prototype-with-drupal-5/ and replace the one in the Lightbox package
• Get the scriptaculous.js and effects.js from http://xhochy.org/en/2007/04/03/scriptaculous-for-drupal/ and replace the ones in the Lightbox package
• Get the Lightbox-javascript-file from http://xhochy.org/en/2007/04/03/lightbox2-now-too/ and put it too into the Lightbox package

Now your lightbox effects should work again in Drupal 5.x, but notice: I've tested script.aculo.us and prototype.js, but not lightbox.js, so it might be broken.

http://www.huddletogether.com/projects/lightbox2/ - seems to be a dead link.

link works fine for me ;-)

subscribe

The link is working now, it wasn't working yesterday. I received a timeout using the Firefox browser. Perhaps it was a problem with Firefox. Thanks.

hope bugzie keeps all these hearts :D although the above patch is tested to work :)

Hi,

I've assembled the files as described above, but shouldn't there be a lightbox2 module file as well? I have uploaded the files into the module folder but it isn't found by the /admin/build/modules "module manager".

I have a folder called "Lightbox2"
containing index.html
subfolder "css" containing "lightbox.css"
subfolder "js" containing " effects.js, lightbox.js, prototype1.js & scriptaculous.js"
subfolder "images" with various.
What am I missing and how do I get it?

Thanks in advance!

You have to download the old module and replace the files effects.js, lightbox.js, prototype.js and scriptaculous.js with the versions I posted some days ago

Thanks Xhochy,

I tried that too but it just don't show up in /admin/build/modules "module manager".

Could you just please post your module as zip or so...

Thanks again, this is my assembled file; http://www.azurkayak.com/lightbox2.zip

There's no .info file in this zip so the module will not show up in the admin modules list. You need something like this (lightbox2.info, from #2 above):

; $Id$
name = Lightbox2
description = Enables Lightbox V2 for Drupal

Module works, but image_nodes.js does not work, since isJsEnabled is not defined in Drupal 5. I fixed it through replacing

with

And to go on with problems: The CSS file is not incuded, so the images will only be shown at the and of the page, not in a (Light)box

Thanks - I have added the info file (also to the zip file) and the module is now on my list and I have enabled it.

This now figures in my code on all pages;

The module still doesn't work though, I use it on this 4.7 site;
http://www.quintadaslagoas.com/en/node/84

and copied the html / pictures over to
http://www.azurkayak.com/node/33 in order to test

but can't get it to work...

In the 4.7 site I have "admin/settings/lightbox2" to configure lightbox,

But nothing similar in the Drupal 5 site configuration or building.

Ok I fixed the lightbox2.module to include the CSS in Drupal 4 and 5 but the settings still don't work, because this hook changed in 5.x.

You can get my hole version at
http:/xhochy.org/en/wp-content/uploads/2007/04/

The patch for lightbox2.module is posted with this comment.

Ok, the correct link to the whole package is:

http://xhochy.org/en/wp-content/uploads/2007/04/lightbox2.zip

I just use preview more often....

it still doesn't work for me (using your package), could the problem be jquery.js as mentioned above?

My page head;

No, you needn't to remove jquery.js(or you shouldn't because Drupal 5 relies on that), because all these javascripts that I published some days ago do not use prototype's $(), they use the renamed $ID() (same effect, other name, no conflicts with jquery...). The problem could be the paths to the images in js/lightbox(_lite).js on line 60 and following, you need to change them to the location of yours(my location was /sites/all/modules/lightbox2/..., I think you may not have the same)

The only file I could find this reference (/sites/all/) in is lightbox.js - I've changed it to just /modules/lightbox2/... as it works in my 4.7

installation on the same server.

In js/lightbox(_lite).js it is already set to be;

but it still doesn't work...

You just have to add rel="lightbox" to your a-Tags, that's the problem, lightbox loads without any problem but thinks there no imagelinks which lightbox should extend.

Hi Xhochy,

Please excuse; the tags are removed (TinyMCE?) if I am not careful.
Anyhow it is now working perfectly.

Thanks for all your efforts!

I'm afraid this isn't working for me on my site, e.g. http://www.irlandiaceramics.com/image/tid/70. The image gallery module normally generates the links, but does so without the rel attribute on the a tag. I've created my own theming function for the images so the rel attribute is now appearing in the source. However, still nothing is happening. The lack of the rel tag wasn't a problem with the drupal 4.7 version of the site, see http://www.stellapowerdesign.net/image/tid/68 for an example.

Stella

Your problem is your're linking in the href-attribute of the a-tag to a whole Drupal-HTML-Node, not to a single image, if you want to have lightbox working well you need to change the link, so that it directly links to an image.

Yes, I should have spotted that, but as it turns out that wasn't really the problem. I decided to find and fix the root cause rather than fix the symptoms. First of all the lightbox2 configuration page wasn't appearing due to differences between form generation in drupal 4.7.x and 5.x. Attached you will find a patch for that.

I also fixed image_nodes.js and image_nodes_nogroup.js. It wasn't modifying the url for image nodes since it was trying to match on the css class 'thumbnail' rather than 'image-thumbnail' which is used in drupal 5.x. I'll attach these patches too.

Cheers,
Stella

image_nodes.js patch

images_nodes_nogroup.js patch

Managed to get the Module working but instead of the preview image the original file is being used.
Anyone fixed this?
Tried the patches from snpower but they didn't solve the problem

Evildad: I thought the idea was that when you clicked on the preview/thumbnail image, that the larger original would be displayed in the lightbox, no?

That's right snpower...

OK shame on me ;-)
Then everything's fine

snpower, which version are you patching? I tried both the 4.7 version and the lastest download xhochy posted, neither match the date in your patch...

I patched the latest zip File without problems... what's the error message you get?

snpower how did you get closelabel.gif and loading.gif to work? They don't appear in ff2 and ie.
The prevlabel and nextlabel work.

Could you plz make a zip File from your module folder? Thanks.

My patch is to be used after you use xhochy's patch from comment #51. So first install the drupal 4.7.x version of the module, then xhochy's patch and then my 3 patches.

This is really getting complicated :-§

Would some genius please zip a complete file ready to upload and use?

Thanks in advance!

Try the attached zipfile. I just zipped up my directory, which also includes another patch for linking to the image node from the lightbox - let me know if you want me to remove this. You'll need to remove the .txt ending before unzipping.

cheers,
Stella

Thanks a lot Stella!

It works fine, but I am missing the close button/label;
http://www.notre.info/node/55

although it is uploaded;
http://notre.info/modules/lightbox2/images/closelabel.gif
http://notre.info/modules/lightbox2/images/close.gif

Oops, I fixed that myself;

I just removed "/sites/all" from the lines below in lightbox.js

Thanks again!!

:-)

Many thanks Stella!
However I am having an issue with image galleries. Should the module be automatically formatting the thumbnail links in a gallery to include the relevant ? Lightbox works perfectly when I manually create a page and reference an image but my pre-existing galleries show up as normal (i.e clicking the thumbnail simply links to the node and displays the image 'statically'. I suspect I am missing something very simple here.
Many thanks, this module will be incredibly useful for the site I currently have under development. If you need any more info I will be subscribed.

Edit:
Sorry I forgot this,
the following relevant pieces of script are loaded

Thanks again!

I got it to work with the "image_gallery" module by enabling the options on Administer >> Site Configuration >> Lightbox2 (admin/settings/lightbox2). In particular it's important to set the "Enable for Image Nodes" checkbox (found under the collapsible "Lightbox2 Plus Image Node options" fieldset).

Cheers,
Stella

Also just in case you downloaded the wrong zipfile, you need the one that I posted in comment #71. Previous ones didn't have a necessary fix for the image galleries.

Stella

Sorry Stella, I'm afraid I already have the relevant boxes checked. I originally dl'd it from your link but I did a fresh install just to make sure, which had no effect. I've tried creating a new gallery which did nothing. In my case my drupal install is not in the root directory, could that be an issue? If it is any help I attach the source of a gallery page. If any other files would be of any use, or if you would like access to the site I would be more than happy to oblige.
Thankyou for your quick reply!
Gareth

Yeah if you could attach the source of the gallery page that would be good. I don't see how it the drupal install not being in the root directory should be a problem. Where is the lightbox2 module installed - modules? or sites/all/modules? or sites/www.mysite.com/modules?

Stella

Source of the gallery page attached to my last post.
The module is with all the others in the usual place -
www.mysite.com/drupal/modules/
with the lightbox2 folder inside the modules folder.
If it is one of these random problems with no obvious solution then thankyou anyway. I am running the most recent drupal 5 with a customised version of the abac_dark template if that could in any way affect it. Any more info that would help you?
Many thanks again

Sorry, didn't see the attachment!

Ok, I think I see the problem, but am not sure why the css class is different between our two installations, it may be to do with your template or maybe different versions of the image_gallery module.

In lightbox2/js/ directory you will find two files: image_nodes.js and image_nodes_nogroup.js. I want you to make the following change to both of them.

On line 7, (if (Element.hasClassName(nodes[i], "image-thumbnail")) {) change "image-thumbnail" to "image thumbnail", i.e. replace the dash with a space. If that doesn't work, then change "image thumbnail" to just "thumbnail.

In addition, as from drupal5 the modules directory is ideally for core drupal modules only and you should start installing your modules in sites/all/modules/, or if you just want it available to one site in a multi-site install then sites/www.mysite.com/modules/. If you don't move the lightbox2 module to sites/all/modules, you will need to modify lightbox2/js/lightbox.js so that the path to the images on lines 62 and 63 points to your lightbox2 directory.

Cheers,
Stella

Bingo! This module conflicts with jtools module. I simply unloaded the jtools module and now it is working marvellously. Maybe time to think about resizing some images :-) . Many thanks for all your help Stella, it's people like you that makes open-source software what it is.

Bingo! This module conflicts with jtools module. I simply unloaded the jtools module and now it is working marvellously. Maybe time to think about resizing some images :-) . Many thanks for all your help Stella, it's people like you that make open-source software what it is.

Okay, I downloaded this mod from your attachment in #71 and at first all none of the tags (IE loading, close, prev, next) would show up. I fixed the first two by removing the leading / from lines 62 and 63 in lightbox.js.
However, I still can't get prev and next to show up. I've tried every combination of path to prevlabel.gif and nextlabel.gif in lightbox.css I can think of. What am I missing?
This is the very last missing piece keeping me from upgrading my production site from 4 to 5. Test site here - http://www.technospider.com/~david/drupal5/?q=node/12

Thanks,
David
http://www.FloridaPets.org

NM, I finally solved it myself. Both paths were in the lightbox.css file. Instead of modifying them, I just had to remove one.

This:
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif)url(sites/all/modules/lightbox2/images/nextlabel.gif) left 15% no-repeat; }

Had to become:
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }

Thanks,
David
http://www.FloridaPets.org

Alright, so I took the plunge and updated my site to Drupal 5. Everything works great except that the close label is gone. I've made all the same changes I made to my test site but it's just not showing up.
Any help appreciated.

Thanks,
David
http://www.FloridaPets.org

Hello, first of all thanks a lot for your help.
Does anybody could make lightboxv2 work under IE 7?
I'm using it in Opera and Firefox, and works great, but under IE 7.0, when i click an image, the image is opened, but I do not see any effect...

Thanks a lot.

tknospdr - what's the URL of your live site so I can check it out?

I've just done a dev release of a drupal 5 version of the module. There's a few differences between this release and the patched version added to this issue. First of all, the support for the "zoom" button was added back in. Also, the path to the close, next, etc, images is no longer set in the lightbox.js file - instead you will need to modify the lightbox.css file if you want to use different images.

The release is lightbox2 5.x-1.x-dev. Please, please, please test it out and let me know if you have any problems.

Cheers,
Stella

Marking http://drupal.org/node/113804 as a duplicate of this issue.

cacciaresi - I won't have access to an IE7 browser for another few days, but in the meantime try it out against the new drupal 5 dev release. It includes some fixes for the patches added here.

Perfect, i'll test the new release, and then i will post here, thanks a lot!
Claudio.

Live site is the one in my sig. I'll try the update and see how that works for me.

Thanks,
David
http://www.FloridaPets.org

Sorry, guess you need to see the page that some pics are on. Click on the story called 'Painted Cats' on my front page.
Also, I just updated to your newer version and close is still missing.

Thanks,
David
http://www.FloridaPets.org

And lightbox lite doesn't work at all, I tried it just to see what it looked like.
It just opens up the pic on a blank screen, replacing whatever's already there.

Thanks,
David
http://www.FloridaPets.org

tknospdr - From the generated source code, I can see it's trying to load "closelabel.gif" and "loading.gif" from "sites/all/modules/lightbox2/images/". I guess the most obvious thing is to check whether or not these images exist in this directory and that they have the correct permissions for the web. If they do, then where is the path to these images set? It should only be set in lightbox.css on lines 115 and 124. They should no longer be set in the js file. The path should just be e.g. url(images/closelabel.gif). I'm also assuming you have the lightbox2 module installed in "sites/all/modules/lightbox2/".

Stella

Here's my images folder -

And relevant lines from lightbox.css -

And this is in the lightbox.js file in the package I DLed from you last night -

Thanks,
David
http://www.FloridaPets.org

Forgot to mention that 'fpo-r5' is that site's root.

Thanks,
David
http://www.FloridaPets.org

Ok, those lines in the js file should have been commented out. It looks like I released the wrong version of that file. A proper release is now available from lightbox2 5.x-1.0

Yay, 100th comment. Boo, can't get the file. :)

"The requested URL /pub/drupal/files/projects/lightbox2-5.x-1.0.tar.gz was not found on this server."

Thanks,
David
http://www.FloridaPets.org

It's there now - it usually takes a few minutes before releases are publicly available.

Okay, this version is throwing up an error even though I've installed it the same as I have with every other version.

The script.aculo.us library is in not installed correctly. Please download from http://script.aculo.us/downloads, follow the instructions in the Lightbox V.2 README.TXT file to copy the files to their correct locations.

You can see it on every page of my site.

Thanks,
David
http://www.FloridaPets.org

Ok there was a problem with the 1.0 release, but I've made another one - lightbox2-5.x-1.0-1.

If the script.aculo.us error msg continues, please ensure you have installed the script.aculo.us libraries in your lightbox2/js/ directory as detailed in the README file.

Looks like I got the script errors because even though I changed the name of the old folder for the previous version of lightbox2 to old-lightbox2 it was interfereing with the new install, when I deleted the folder the error went away.
My problem remains though, I'm not getting the lightbox effect at all now just the same effect I described in comment #95.
I'm going to try reinstalling the code from comment #71 and see if I can get things working again.
If you have an IM account maybe we can get this fixed in real-time. I'm on AOL or Yahoo as tknospdr.

Thanks,
David
http://www.FloridaPets.org

Screwing around with all these different versions seems to have messed something else up as now the original version that was working minus the close label doesn't work anymore either. I've made no other changes to my setup.

Thanks,
David
http://www.FloridaPets.org

I forgot to update the release instructions to say that instead of using the files from script.aculo.us, to please use the ones provided by xhochy above. I've also created a zipfile which contains all the modified files and can be accessed at www.stellapowerdesign.net/scriptaculous-drupal.zip. This is necessary because jQuery is now part of Drupal and it conflicts with the prototype script.aculo.us javascript files.

Major thanks to xhochy for the jQuery compatible libraries!

Marking this as fixed since there is now a drupal-5 release. All issues with the drupal-5 release should be reported separately.

Cheers,
Stella

Hello, first of all, thanks a lot!
Second, i've modified the lightboxv2 module to be used with CKK, if anybody is interested, let me now, and i can post the code here!

Claudio
-** www.fileando.com **-

Second, i've modified the lightboxv2 module to be used with CKK, if anybody is interested, let me now, and i can post the code here!

that would be great! do you want to start an extra thread for it?

Hello!!
If you think that it is correct to do it, I've no problem, the modifications are really small, and the code is pretty similar to what tichkbox do be able to be used as a formatter in CCK.

if you think so, tell me (i'm pretty new in Drupal, so i let you decide!!).

Regards,

Claudio
-** www.fileando.com *--.

cacciaresi - post it in a new issue as a feature request and I'll take a look. Thanks!

Stella

I've create the issue here:

http://drupal.org/node/141065

regards,
claudio.

Should be fixed in lightbox2 5.x-1.1. Closing this issue. All new issues should be opened separately.

Cheers,
Stella