CMS Photo Album plugin with PrettyPhoto lightbox

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

CMS Photo Album plugin with PrettyPhoto lightbox

Post by supersonictt »

Hello all,

After granting permission from Pablo, here is a tutorial on how you can make the CMS Photo Album plugin display images in a lightbox gallery.
First, you need to be familiar with CMS tools. Please read here: http://wysiwygwebbuilder.com/cms_tools.html
I am going to explain the process with "PrettyPhoto" lightbox. Am using this lightbox because it is the only lightbox that can reduce large images to fit the screen resolution.

Now let's start:
1. Make sure the database details are ready (database name, username, password and host).
2. Create a page and add the "CMS view" object and the "CMS menu" object and set their properties. Do not forget to set the page extension to php. Now, right-click on the page and choose "Page HTML". In "Between <head></head> tags" paste this code:

Code: Select all

<link rel="stylesheet" href="prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_PhotoGallery1']").prettyPhoto({theme:'facebook',social_tools:false});
});
</script>
This code it to initiate the PrettyPhoto script.
3. Create another page for the "CMS admin" object, set its properties and in the "Behavior" section, go to "Plugins" and choose "photoalbum". Do not forget to set the page extension to php.
4. Publish the files to the server. For demonstration purpose, create a folder called "galleryimages".
5. Add some photos to the folder "galleryimages".
6. Access the admin area and create a new page, enter the title, and just beside "General" tab above, click on the "Photo album" tab.
7. Enable the Photo Album plugin, and set the images folder to "./galleryimages/", then save it.
8. Now if you preview the page, when you click on an image you will see that the image is opened in a new window (tab) and placed on the top left corner. You don't want that, do you?!!
OK, now let's start the real work:
9. Go back to WWB and create a dummy page, place a "Photo gallery" object, add some photos, and in the "Behavior" section, choose "Gallery mode : Light Box Gallery", and "Type : prettyPhoto".
10. Publish this page ONLY to a folder on your hard drive. Open this folder, you will find a folder called "prettyPhoto", copy this folder and paste to where you published the CMS site to.
11. Now go the published files, you will find a folder called "plugins", then go to "photoalbum" folder and open "plugin.php" with any advanced text editor, I use Notepad++.
12. Go to line 58, it has this code:

Code: Select all

$link = "<a href=\"$photoalbum_images_folder$filename\" target=\"_blank\">";
Change it to:

Code: Select all

$link = "<a href=\"$photoalbum_images_folder$filename\" rel=\"prettyPhoto_PhotoGallery1[PhotoGallery1]\">";
13. Now, go back to the CMS page where you added the Photo album plugin, refresh the page and click on an image, it will open in a lightbox.

Extras
1. If you add a portrait photo in a middle of landscapes ones, its thumbnail will not be as the same dimension as the landscape photos, so if you want to make them the same size, do the following:
- In the "plugin.php" file, go to line 70 with this code:

Code: Select all

$cms_content .= "<td align=\"center\" valign=\"bottom\">$link<img src=\"".$photoalbum_images_folder.$filename."\" alt=\"\" class=\"photoalbum_img\" style=\"width:".$thumbnail_width."px;height:".$thumbnail_height."px\"></a></td>\r\n";
You can see that the width and height are calculated within the script, so let's say that you want the width of the thumbnail to be 120px and the height to be 80px, replace:
".$thumbnail_width." with 120
and
".$thumbnail_height." with 80
so the code will be:

Code: Select all

$cms_content .= "<td align=\"center\" valign=\"bottom\">$link<img src=\"".$photoalbum_images_folder.$filename."\" alt=\"\" class=\"photoalbum_img\" style=\"width:120px;height:80px\"></a></td>\r\n";
2. You might have noticed that when clicking on an image, when it opens in a lightbox, there is no description for the image. Well I found a workaround (might not be the best solution, but it is good so far) to display some text (description) for the image. This description will be displayed from the image name, so if the image name is "01.jpg", the lightbox will display "01.jpg". Now you don't want ".jpg" to be displayed in the description. Ok, do the following:
- In the "plugin.php" file, go to line 56 with this code:

Code: Select all

}
go to the end of the line and press enter to create another line just under it, and add this code:

Code: Select all

$info = pathinfo($filename);
				  $f = basename($filename,'.'.$info['extension']);
Now "$f" will be added in another code later, but it means to display the name WITHOUT its extension.
Now go to line 60 (which was 58 in step 12) and replace it with this code:

Code: Select all

$link = "<a href=\"$photoalbum_images_folder$filename\" rel=\"prettyPhoto_PhotoGallery1[PhotoGallery1]\" title=\"$f\">";
you can see in the end of this code that title=\"$f\" is added to the end of the code. This code will display the file name as title (description) without the photo extension (.jpg).

That was all. Hope it is useful for you guys :)
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: CMS Photo Album plugin with PrettyPhoto lightbox

Post by supersonictt »

What do you exactly mean?
User avatar
madebyibloo
 
 
Posts: 371
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Photo Album plugin with PrettyPhoto lightbox

Post by madebyibloo »

Awesome post! thanks supersonic! :)



Cheers,
Scott
Cheers,
Scott


www.madebyibloo.com - a creative design studio.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: CMS Photo Album plugin with PrettyPhoto lightbox

Post by Pablo »

Maybe you have moved them? Or did you change the 'system folder' in Tools->Options->Files & Folders?
Post Reply