Slimbox 2 Phoo Integration (lightbox for photo gallery)

Cool tips and tricks about Jaws

Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby hayden » Mon Jan 10, 2011 5:20 am

Ok, this is another easy one (4 steps). Firstly let me say thanks to the jaws dev team for an excellent cms, its a real pleasure to work with.

This guide as the title suggests is for Slimbox 2, my current lightbox of choice but im sure you could substitute another with little effort by learning the process from this guide.

Firstly you'll actually need the lightbox so head over here to download it: http://www.digitalia.be/software/slimbox2

note: at the time of writing this the current version is Slimbox 2.04 and ill be integrating it into Jaws 0.8.14, but it's just as easy to add it to past and possible future versions of jaws.

now as it turns out there is actually the 'original' Lightbox JS: by Lokesh Dhakar code in jaws's libraries folder but it doesn't appear to be implemented.(correct me if im wrong) i might write a guide to activating it, but for now im doing this guide as this lightbox has more features.

Step #1:
    download and unpack slimbox-2.04.zip to folder slimbox-2.04 and put this in jaws's /libraries folder

Step #2:
    download jquery http://jquery.com/ (needed by slimbox), rename it to jquery.js and put it into /libraries/slimbox-2.04/js/ folder

Step #3:
    Edit /include/Jaws/Layout.php

in the blank gap at line 210 add the following:
Code: Select all
$this->AddScriptLink('libraries/slimbox-2.04/js/jquery.js');
$this->AddScriptLink('libraries/slimbox-2.04/js/slimbox2.js');
$this->AddHeadLink('libraries/slimbox-2.04/css/slimbox2.css', 'stylesheet', 'text/css');



OK, so at this point the scripts needed for this to work will be loaded in your front end head.
Now the next step to make it work is to add rel='lightbox' to any image link:


Now theres a few ways ive used a lightbox with jaws and you might think of others. Im going to tell you how to integrate into Phoo gadget my favourite way. But first a little tip:


Tip:
You may not have noticed but in the 'advanced' tab of the tinymce add/edit link editor popup, there is an option called "Relationship target to page" and if you make this "lightbox" guess what ? it adds rel='lightbox' to your a href link and slimbox will activate on that link assuming the link is to an image.

You could also do this by editing the source with the tinymce html button. note that slimbox has the option to link a set of images together into a slide show. to do this you use rel='lightbox[group]' anything assigned the same [group] value becomes part of a slideshow.


Now onto the Phoo integration...

So by default photos are presented in a grid of thumbnails in a album, and if you click a thumb it takes you to another page with a larger version of the image. So you could either launch the slimbox popup from the larger versions page to view an even larger version again ! or you could do what is my favorite way and launch the slimbox from the thumbnails page and make them all part of a slideshow ! 8-)

Step #4:
to do this you need to edit the thumbnails page template file located here:
/gadgets/Phoo/templates/ViewAlbumPage.html

Line 8-
Before:
Code: Select all
    <a href="{url}" title="{img_desc}"><img width="{width}" height="{height}" src="{thumb}" title="{name}" alt="{name}" /></a>


After:
Code: Select all
    <a href="{medium}" rel="lightbox[grp1]" title="{name}"><img width="{width}" height="{height}" src="{thumb}" title="{name}" alt="{name}" /></a>



That's it ! Now you have three image copies you can use in Phoo, there's the original uploaded {image}, the medium one {medium} and the thumbnail {thumb}.

I used {medium} as you can see, and used group name 'grp1' and for the caption/title {name} (the images name).


Tip:
In Jaw's registry there are some gadget settings for phoo you will want to have a look at: (here they are with a brief description)

/gadgets/Phoo/image_quality (this is the jpeg compression quality percentage, 100% best largest file, less is smaller file less quality, i like 90, default is 75)

/gadgets/Phoo/keep_original (this is whether to keep the original image uploaded once the thumb and medium versions are created ref: {image})

/gadgets/Phoo/mediumsize (the size to resize the {medium} copy to. eg 900x600 (width pixels by height pixels)

/gadgets/Phoo/thumbsize (the size to resize the {thumb} copy to. eg 100x100 (width pixels by height pixels)

note with all these options, if they are changed, it will have no effect on already uploaded images, images must be re-uploaded to be affected by the changed settings.


for more information on slimbox2 usage see:
http://www.digitalia.be/software/slimbox2


i hope i haven't confused you too much and you got it working ok, please feel free to post comments and questions in this thread.
hayden
 
Posts: 96
Joined: Wed Oct 22, 2008 12:17 pm
Location: Sydney, Australia

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby raulelenes » Mon Jan 10, 2011 9:33 pm

It worked ok!! Thanks a lot!!!
raulelenes
 
Posts: 100
Joined: Mon Aug 25, 2008 1:59 am

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby exceptionz » Tue Jan 11, 2011 9:28 am

@rauleness
Please post your things about this tutorial only here and do not duplicate your posts...
exceptionz
 
Posts: 101
Joined: Tue Nov 16, 2010 2:41 pm
Location: somewhere between / and /home/user/

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby raulelenes » Tue Jan 11, 2011 5:19 pm

How about include the pict description entered in Phoo or a custom footer each? How can do that with this slimbox hack?
raulelenes
 
Posts: 100
Joined: Mon Aug 25, 2008 1:59 am

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby hayden » Sun Feb 13, 2011 4:19 am

do you mean show the image name or desc in the lightbox as caption ?? as it does name already.

if you mean as well as that have a second field/line like the description, well i personally have done it for some sites ive made and i can show you how to do that if hat what you want ? can you please confirm.
hayden
 
Posts: 96
Joined: Wed Oct 22, 2008 12:17 pm
Location: Sydney, Australia

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby raulelenes » Sun Feb 13, 2011 6:23 pm

hayden wrote:do you mean show the image name or desc in the lightbox as caption ?? as it does name already.

if you mean as well as that have a second field/line like the description, well i personally have done it for some sites ive made and i can show you how to do that if hat what you want ? can you please confirm.


Yes, I would like to show the description of photo entered in Phoo or manually instead of file name as a caption. Please share us how to do it. Thanks in advance.
raulelenes
 
Posts: 100
Joined: Mon Aug 25, 2008 1:59 am

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby hayden » Sun Feb 13, 2011 8:41 pm

if you want to show description ather than name in lightbox simple change the following:

Code: Select all
<a href="{medium}" rel="lightbox[grp1]" title="{name}"><img width="{width}" height="{height}" src="{thumb}" title="{name}" alt="{name}" /></a>


to

Code: Select all
<a href="{medium}" rel="lightbox[grp1]" title="{desc}"><img width="{width}" height="{height}" src="{thumb}" title="{name}" alt="{name}" /></a>
hayden
 
Posts: 96
Joined: Wed Oct 22, 2008 12:17 pm
Location: Sydney, Australia

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby sharktooth » Wed Jun 29, 2011 10:04 pm

Can I create an alt tag for files I have created with a video converter and taken a screen shot of? I have been learning how much these kinds of tags can mean to optimizing your content for the web or email marketing campaigns. I struggle a bit with code, but if somebody is willing to share something simple I feel like I could follow along pretty well. Thanks in advance for helping me out.
Last edited by sharktooth on Wed Jan 18, 2012 10:39 pm, edited 2 times in total.
sharktooth
 
Posts: 7
Joined: Fri Jun 24, 2011 8:09 pm

Re: Slimbox 2 Phoo Integration (lightbox for photo gallery)

Postby raulelenes » Fri Jul 01, 2011 4:20 pm

There is a error in changed code in order to show Image description instead of Image name, just to "{img_desc}" instead of "{desc}", thus it must be:

Code: Select all
<a href="{medium}" rel="lightbox[grp1]" title="{name}"><img width="{width}" height="{height}" src="{thumb}" title="{name}" alt="{name}" /></a>


to

Code: Select all
<a href="{medium}" rel="lightbox[grp1]" title="{img_desc}"><img width="{width}" height="{height}" src="{thumb}" title="{name}" alt="{name}" /></a>
[/quote]
raulelenes
 
Posts: 100
Joined: Mon Aug 25, 2008 1:59 am


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 1 guest

cron