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>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\">";Code: Select all
$link = "<a href=\"$photoalbum_images_folder$filename\" rel=\"prettyPhoto_PhotoGallery1[PhotoGallery1]\">";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";".$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";- In the "plugin.php" file, go to line 56 with this code:
Code: Select all
}Code: Select all
$info = pathinfo($filename);
$f = basename($filename,'.'.$info['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\">";That was all. Hope it is useful for you guys
