Lightbox JS

[altumdesign]

How about integrating Lightbox JS into the WYSIWYG? Can anyone help me do this?

The Javascript in the beginning can be echoed through a "code" section. What I'm having trouble with is creating an option in the WYSIWYG Editor to add [rel="lightbox"] to the link. I know you can do this manually, but it's all about simplicity these days.

Here's a link to Lightbox JS:

http://www.huddletogether.com/projects/lightbox2/

Thanks,

William Wnekowicz
Altum Design Studios
services@altumdesign.com

[hudge]

I would add the code to your template file and then when you need to add a link switch into html mode by clicking the <> and add the code you need. Not pretty but should be the easiest solution.

[kweitzel]

If you are using one of our gallery modules you could adapt the file "view(.)php" of the module to integrate the links. I think you could then also put the script in that file.

Maybe, if you talk to one of the creators of the galleries, they'll even lend you a hand in integrating ...

cheers

Klaus

[baZzz]

It's not that hard; I integrated Lightbox in the 'Another Image Gallery', check it out here: http://www.gummbah.nl (Click on a link with images first, like 'English'.)

Update:
Scroll on down to my next comment detailing how it's done.

[zoommdn]

Hello baZzz ... Could you give the source code please? 

[vierja]

Very good! Can I have a copy of the source code?

Thanks

[mathetos]

I tinkered around with this a bit, but I only made a mess, I am no programmer. But the instructions from the lightbox JS site are VERY simple. I tried adapting the Pickle mod but I couldn't get any result that was installable.

Is anyone working on this? baZzz? From your site all we can see is the generated xhtml code, which looks just like the instructions from the site. But, the question is, how did you get the php code to insert it?

~mathetos~

[maxbrax]

HI  to all!   

I have tried to modify the module Image Gallery 1.8RC5b integrating it with LIGHTBOX JS.

It still remains to optimize the code in order to more eliminate the not used functions.   

Only one what me is not still clear, and that is like modifying automatically the file: ".\modules\lightbox\js\lightbox.js"

at rows line Number 61:   "http://mysite.xyz/modules/lightbox/images/loading.gif";

in such way to replace  "mysite.xyz" with  the value of constant "WB_URL"     

I ask to you if and like and possible to make this.   

Pleas test the module works well.

Tested on WB2.6.4 on windows XP under EasyPHP 1.8

See page http://www.maxbrax.com/pages/photogallery/ligthbox.php

[mathetos]

Your module works fine, the lightbox.js works perfectly, thanks for that.

The only problem is that you did not use the "New Image Gallery 1.8RC5b" because that module is able to read pictures from a specified file. With yours, you have to upload the images one at a time. Here's the link to the forum:
http://forum.websitebaker.org/index.php/topic,1201.msg21942.html#msg21942

Are you willing to try to integrate lightbox js into the "New Image Gallery"? That's what I would really be needing!

@baZzz
so far, by looking at your source code, I can only figure that you integrated the js calls into your template, and then added the rel=lightbox line into the module. Is that all you did? I'd really appreciate a tip.

[maxbrax]

  The module that I have modified is that best one because it allows than to insert a every comment to single photo and of being able to manage the change of every photo. 

  At moment I do not preview to integrate lightbox js in other modules.   

The lightbox js call  is not integrated in the template, but directly in the module, so that it can work without  to modify the templates.

------------------------------------------------------------------------------------------------------------------
There is someone that can modify the rows lightbox.js in order to make this modification?

Only one what me is not still clear, and that is like modifying automatically the file: ".\modules\lightbox\js\lightbox.js"

at rows line Number 61:   "http://mysite.xyz/modules/lightbox/images/loading.gif";

in such way to replace "mysite.xyz" with  the value of constant "WB_URL"     

I ask to you if and like and possible to make this.   

[baZzz]

...
@baZzz
so far, by looking at your source code, I can only figure that you integrated the js calls into your template, and then added the rel=lightbox line into the module. Is that all you did? I'd really appreciate a tip.

Sorry for the late reply guys... Have been busy and out of town for a couple of days. I don't know exactly what I changed, I think it was only those things that you mention already. However, I will be upgrading the Another Image Gallery script I use on Gummbah.nl and therefor will have to implement the Lightbox script again. This time, I will keep a record of the changes made and post them here.
Update: See next comment.

[baZzz]

This page has been updated on 18-03-2008, in order to work with Another Image Gallery 1.7

Finally, here's a 'how to' on installing Lightbox in combination with the 'Another Image Gallery' script.

1) Install the latest 'Another Image Gallery' (formerly known as the 'New Image Gallery') script. (At this time, 1.7 is the latest version and you can find it in the modules repository here: http://addons.websitebaker.org/pages/modules/image-galleries.php )

2) Open up 'view.php' (from '/modules/imagegallery/') and add the following function to the top of the script:

Code:

function stripcomment($filename, $divider)
{
  $commentTemp = explode($divider, $filename);
  $comment = substr($commentTemp[1], 0, (strlen((string) $commentTemp[1]) - 4));
  $comment = str_replace("<-", "</", $comment);
  $comment = str_replace("->", "/>", $comment);
  return htmlentities($comment);
}

Around line 69 you'll find this:

Code:

$included = true;
$inline = true;

Set these values to 'false', so change into:

Code:

$included = false;
$inline = false;

And around line 408 you'll find this:

Code:

echo '<a href="?';

Add  ' rel="lightbox[name]" title="'.stripcomment($filename, "--").'"', so change into:

Code:

echo '<a rel="lightbox[name]" title="'.stripcomment($filename, "--").'"LIGHT href="?';

Do the same for line 414, where you'll find:

Code:

echo '<a href="'.html($dirnamehttp.'/'.$filename).'">';

And change this into:

Code:

echo '<a rel="lightbox[name]" title="'.stripcomment($filename, "--").'" href="'.html($dirnamehttp.'/'.$filename).'">';

Alternative: For the ppl who would rather be lazy than tired (Dutch saying ) you can download an already adapted version of the view.php which was taken from 'Another Image Gallery 1.7' here:
http://baZzz.com/downloads/websitebaker/AnotherImageGallery_1.7/view.zip

3) Install Lightbox. You can install the original, but it would be easier to just use my version and unpack it to the root of your website. You can find this version here:
http://baZzz.com/downloads/websitebaker/lightbox_websitebaker.rar
After doing this, going to http://www.youdomain.com/lightbox should give a working example page of Lightbox. On this page you'll find some notes by me, because I've adapted the lightbox version. It's probably too adapted, so if you'd like to change back to a more original version download the normal version from the Lightbox website or download a slightly modfied version from here:
http://baZzz.com/lightbox/lightbox2.02+.zip (this version doesn't contain the adaptations made for Gummbah.nl. However, it might need some more tweaking to work 'out of the box', so I'd recommend using the earlier mentioned version to start with.) In case you do like the adapted Gummbah.nl version (which includes support for a Mail-A-Friend script I wrote), you can find some details on how to use this script below.

4) Add references to lightbox in your WB template. Add the following lines in the HEAD of your template:

Code:

  <link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="/lightbox/js/prototype.js"></script>
  <script type="text/javascript" src="/lightbox/js/scriptaculous.js?load=effects"></script>
  <script type="text/javascript" src="/lightbox/js/lightbox.js"></script>

If you do not want to have these lines in every page (so if you don't want them in your template), you can also add them only to the page that will contain the image gallery by adding a 'code' section before the Another Image Gallery and in this 'code' section you should paste the following:

Code:

echo "<link rel=\"stylesheet\" href=\"/lightbox/css/lightbox.css\" type=\"text/css\" media=\"screen\" />\n";
echo "<script type=\"text/javascript\" src=\"/lightbox/js/prototype.js\"></script>\n";
echo "<script type=\"text/javascript\" src=\"/lightbox/js/scriptaculous.js?load=effects\"></script>\n";
echo "<script type=\"text/javascript\" src=\"/lightbox/js/lightbox.js\"></script>\n";

5) Insert a section with the Another Image Gallery and set it up. All the options except for 'Show Filenames' have become irrelevant at this point because of Lightbox, even if the user has JavaScript turned off. However, the gallery will still function in that case, but after clicking an image it will just show the full version in the same browser window. (Note: In case you want to use the comment feature as described below, turn off the option 'Show Filenames' or it will look weird.)

Now you're done! Please let me know whether this guide was helpful or contains any errors. Good luck!

Update: Next you'll find some instructions regarding the 'comment' feature.

Usage:
To add a comment to a picture, you simply add the text, preceded by a double dash ('--'), to its filename. So lets say you have a picture of your dog, named 'lassie_01.jpg' and you want the text 'This is Lassie, my St. Bernard!' as a comment, you change the filename to: 'lassie_01--This is Lassie, my St. Bernard!.jpg'. That's it!

Limitations:
- The filenames can contain all kinds of special characters as well. Which ones probably depends most on whether you're using Windows or Linux as a server and which webserver. Using trial and error I found out that on my server (with Linux and Apache), a filename containing these characters is still being accepted and viewed correctly: !@$^&*()-+=|<>[]{}:;'~`
These characters however do not work: %#?"\/ (these are the number and percent signs, (back)slashes, question marks and double quotes).
Because Lightbox has support for HTML code in its comments, I've added this as well. To use HTML in your comment you have to replace your forward slash ('/') with a dash ('-'). So, let's say you want to have the comment 'This is Lassie, my St. Bernard!', you use the filename: 'lassie_01--This is <i>Lassie<-i>, my <b>St. Bernard!<-b>.jpg'.
- Another limitation is that the filename extension should be 3 letters. Not 2, not 4, just 3. (Which will already be in 99% of the time.) I could adapt the script to be independent of the number of letters used in the extension, but I don't see the need for it at this time.

Tip:
Use FTP to change the filenames on your server, that way you have more control over the filename. If that's not possible, change the filename locally, before uploading. If that's not possible, you'll have to change filenames using the 'Media' section of the WB administration panel. When doing so, a lot of special characters are not being accepted in the filename.

Mail-A-Friend script: (as used in the Lightbox version that was originally made for Gummbah.nl)
This 'mail-a-friend' script is now available for everyone as well! I've translated everything into English (sorry, no multilanguage yet) and you can find it here:
http://bazzz.com/downloads/websitebaker/mailafriend.phps
Just put this file in the root of your webserver and name it 'mailafriend.php'. You're all set!

A temporary example including the comment feature can be seen here: http://www.verlengdehoutrakgracht.nl/pages/lightbox-example.php

[mathetos]

Thanks baZzz!

Works great so far. I only had a small hang-up. I was testing it on my local machine and the paths to lightbox weren't reading because of the mixed forward/backward slashes (i.e. "/" and "\") within the path name. I had to hard code it, then it worked great. Of course I'll switch the path back before I move it to my live site.

Just what I was looking for!

~mathetos~

EDIT/UPDATE:
I had the same path problem when installing it on my live server. I think the problem is that you never know where the gallery will be exactly. I installed it on a child page and therefore the simple "/lightbox/js/" path didn't work. So I insterted this before each path:

Code:

<?php echo WB_URL;?>
making it look like this:
<link rel="stylesheet" href="<?php echo WB_URL;?>/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo WB_URL;?>/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/lightbox/js/lightbox.js"></script>

That, in effect, hard-codes the paths, which isn't great but at this point I don't think there's another way around it.

This whole module is one step from perfect. The PicKLE module has a setting to automatically resize the larger image as well. Meaning, if innocent clients simply upload stuff directly off their digital cameras (which, yes takes up waaaay too much space, but newbies are newbies) then the linked to image is still the right size. As it is right now, if the link-to image is too large, then the lightbox has to wrap itself around an image that goes off the screen... destroying the whole effect. If we could utilize the PicKLE feature then the lightbox would wrap itself around the resized large image thus keeping the effect and being "newbie-proof". Hope that makes sense.

[cmiper]

Hey folks, thanks for working on this, it has helped me out quite a bit.

I had the Lightbox setup already on my site and in the template but was hand coding it photo by photo...which was time consuming for 10, 20, 30 photo pages.  This module along with the other info has saved me from lots of copy paste. 

I do have 3 things, the first 2 are issues and the other is a nice-to-have.

The issues are as follows...

1. [REMOVED] I just realized that this one was covered already...oops!

2. If Java is not turned on in the browser, there is no plan B.  The old version of the gallery is not intact and there is no page with the "next | index | previous" links.  You get the image all by itself and have to use the browser back button to navigate.  Is there any way to have both the lightbox features and the original Image Gallery navigation?

3. The nice to have...descriptions under the photo.  This is built into Lightbox by default but not an option here without really opening up the page and hand coding it.  Again, it's a nice to have, but if anyone has any ideas, I am all ears. 

Thank you all again for workign on this, it is great.

[Bramus]

i just installed it on websitebaker 2.6 and used your tutorial. It worked for me nice job m8 but is it possible to make an own description and not use the image names because that isn't that nice so that we can make an own description for each image or something like that. I really like this addon it gives the site a professional look.

Thx and nice job on the tut and the addon

--EDIT--

The mail function is not working in it, is there a easy way to fix this? i'm a total n00b in php coding so hope you can help me

[maxbrax]

i just installed it on websitebaker 2.6 and used your tutorial. It worked for me nice job m8 but is it possible to make an own description and not use the image names because that isn't that nice so that we can make an own description for each image or something like that. I really like this addon it gives the site a professional look.

Thx and nice job on the tut and the addon

--EDIT--

The mail function is not working in it, is there a easy way to fix this? i'm a total n00b in php coding so hope you can help me

--------------------------------------------------------------------------
Hi Bramus , plaese test my gallery with ligt box effect.

this module is completely independent :  it does not demand modifications in the template ones used for your sitee and allows to insert one description for every photo. 

See page http://www.maxbrax.com/pages/photogallery/ligthbox.php

[cmiper]

this module is completely independent :  it does not demand modifications in the template ones used for your sitee and allows to insert one description for every photo. 

See page http://www.maxbrax.com/pages/photogallery/ligthbox.php

maxbrax...

I was using this version for a while, and while I do like the ability to add the descriptions for each phot, it doesn't make use of the slideshow feature (view next and prev in the same lightbox window.

Or does it?

[maxbrax]

Sorry cmiper,  but the function next and previous is still from implementing.

[cmiper]

Sorry cmiper,  but the function next and previous is still from implementing.

It's quite alright, I am grateful for the efforts on both mods.

It is a trade off as each mod does it's thing, but each mod also does part of the full function of Lightbox's capabilities.  So all the bases are covered, just not all at the same time.   

[baZzz]

Well allright then, I figured out a simple solution for extending my Lightbox installation with the comment feature! I've tried to keep it as simple as possible, as not to change the Another Image Gallery script too much.

I've also updated my comment above that explains all the steps, but in case you've already followed the old ones, these are the added steps:
1) Open up view.php and add the following function to the top of the script:

Code:

function stripcomment($filename, $divider)
{
  $commentTemp = explode($divider, $filename);
  $comment = substr($commentTemp[1], 0, (strlen((string) $commentTemp[1]) - 4));
  $comment = str_replace("<-", "</", $comment);
  $comment = str_replace("->", "/>", $comment);
  return htmlentities($comment);
}

Now, line 360 (which was line 351 before you added the function above), thats reads:

Code:

echo('" rel="lightbox[name]"><img src="' . html("$dirnamehttp/$thumbdir/$filename.thumb.jpg"));

should be changed into:

Code:

echo('" rel="lightbox[name]" title="'.stripcomment($filename, "--").'"><img src="' . html("$dirnamehttp/$thumbdir/$filename.thumb.jpg"));

2) There is no step 2, you're done! 


Usage:
To add a comment to a picture, you simply add the text, preceded by a double dash ('--'), to its filename. So lets say you have a picture of your dog, named 'lassie_01.jpg' and you want the text 'This is Lassie, my St. Bernard!' as a comment, you change the filename to: 'lassie_01--This is Lassie, my St. Bernard!.jpg'. That's it!

Limitations:
- The filenames can contain all kinds of special characters as well. Which ones probably depends most on whether you're using Windows or Linux as a server and which webserver. Using trial and error I found out that on my server (with Linux and Apache), a filename containing these characters is still being accepted and viewed correctly: !@$^&*()-+=|<>[]{}:;'~`
These characters however do not work: %#?"\/ (these are the number and percent signs, (back)slashes, question marks and double quotes).
Because Lightbox has support for HTML code in its comments, I've added this as well. To use HTML in your comment you have to replace your forward slash ('/') with a dash ('-'). So, let's say you want to have the comment 'This is Lassie, my St. Bernard!', you use the filename: 'lassie_01--This is <i>Lassie<-i>, my <b>St. Bernard!<-b>.jpg'.
- Another limitation is that the filename extension should be 3 letters. Not 2, not 4, just 3. (Which will already be in 99% of the time.) I could adapt the script to be independent of the number of letters used in the extension, but I don't see the need for it at this time.

Tip:
Use FTP to change the filenames on your server, that way you have more control over the filename. If that's not possible, change the filename locally, before uploading. If that's not possible, you'll have to change filenames using the 'Media' section of the WB administration panel. When doing so, a lot of special characters are not being accepted in the filename.

A temporary example page can be seen here: (no longer there, sorry)

[cmiper]

baZzz....

This hits the spot and does exactly what I need it to.

Thank you.

[baZzz]

@cmiper: Good, so I didn't do it for nothing than! 

B.t.w. I've got another update: the 'mail-a-friend' script I use on Gummbah.nl (of which the link is included in the Lightbox version that I use) is now available for everyone as well! I've translated everything into English (sorry, no multilanguage yet) and you can find it here:
http://bazzz.com/downloads/websitebaker/mailafriend.phps
Just put this file in the root of your webserver and name it 'mailafriend.php'. You're all set!

[mathetos]

baZzz !!!

I've been experimenting for quite a while now and this module adaptation is GREAT! Exactly what I was hoping for. I love that you implemented the GDpics resized feature, but then you even added the expanding button to see the full-size pic! Really great.

I would rather not have the "Mail to Friend". I tried to pull it out of the code myself, but each time I tried it broke the script. Could you give a line-by-line account of what to delete (or replace) to eliminate it? Right now I've just set that whole div to display:none, which works on the user side, but is ugly server side.

Thanks again!
~mathetos~

[tomhung]

why isn't this in addons?

[ruebenwurzel]

Hello,

it is not in the addons because it is no stand alone modul. It is a snippet wich could be added to the different image gallerys. The howto is described a few posts above. Also seems to only work with older versions of our modules.

Second reason is that this only works if the frontenduser has javascript enabled. Pages with gallerys with included lightboxJS cannot be seen from everyone.

What can you do? Take the latest version of our image gallerys, integrate ligthbox and made a new modul from this like "Another Image Gallery lightboxJS mod" with own path and own database. This one we then add to the modules on our addons repository.

Matthias