Photo gallery
From Online Business Wiki
Click on + to expand the category
Contents |
Introduction
The Photo gallery feature enables you to present any set of your images on your website so customers can easily navigate through and view them. The Photo Galleries feature is extremely easy to use and can be implemented on any web page with just a few clicks of the mouse. It automatically generates thumbnails for every image in the set and allows visitors to navigate from one to another. You can optionally provide a description for each photo which is displayed when the user views the full size image.
Create a Photo gallery
Creating your own photo gallery is extremely easy. There are 3 key steps to this process:
1. Create a folder via the File manager or FTP and upload all your photos. You don't need to create thumbnails as the system will automatically do this for you. 2. Go to Modules -> Photo Galleries and select Create a New Photo Gallery to create a Photo gallery.
You can optionally provide a description for every photo in your image set. To do click on Manage items and descriptions link.
Note: Descriptions are only displayed when the full image is being shown and not whilst display the list of images.
3. Use Add Photo Gallery to a web page link to add the module for this Photo Gallery to any web page. You can also use the Module manager or Triangle to add your Photo gallery to any web page.
That’s all it takes to create a photo gallery. Now view your web page in your browser to see your photo gallery in action!
Customizing your Photo Gallery
By default the Photo gallery module looks like:
{module_photogallery,id}
This module takes in the additional parameters that allow you to customize it further:
'''{module_photogallery,id,rowLength,targetFrame,resultsPerPage,Width,Height,UseStandardMethod}'''
- id - System generated ID (do not change)
- rowLength - Number of photos per row
- targetFrame - e.g. _blank. Specify the frame you want the photos to open in
- resultsPerPage - Number of photos per page
- Width/Height - The width and height of the thumbnail images. The default is 80 pixels.
- UseStandardMethod - Use the standard Thumbnail Generation. Set to False for better thumbnail quality (but increased file size).
E.g.
Here is an example to display 4 photos per line and a maximum of 12 photos per page. The thumbnail size has also been set to 120x120 pixels.
{module_photogallery,id,4,,12,120,120,true}
Note: If an image is 640 pixels wide x 400 pixels high and you set the thumbnail size to 120 x 120 pixels the thumbnail image will have a maximum width of 120 and a smaller height. Proportions are respected when creating the thumbnail image. Alternatively if the image dimensions are 400 pixels wide x 640 pixels high then the height will be 120 pixels and the width smaller. The thumbnail size dictates the maximum width or the maximum height of the image.
Changing the Photo Gallery navigation
Sometimes you may wish to adkust the look of the 'photo view' navigational options. To do this you will need to use some CSS and Javascript.
Changing the next and previous buttons
To change the Next and Previous button images, you will have to use CSS.
For an example:
#nextLink:hover, #nextLink:visited:hover, #nextBLink:hover, #nextBLink:visited:hover, #nextBLink{
background: transparent url(/YourNextImage.gif) no-repeat scroll right 15% !important;
}
#prevLink:hover, #prevLink:visited:hover, #prevBLink:hover, #prevBLink:visited:hover, #prevBLink {
background:transparent url(/YourPrevImage.gif) no-repeat scroll right 15% !important;
}
Changing the Iage text and Close button
To change the 'Image' text and Close button, you will have to use JavaScript as follows -
<script type="text/javascript">
fileBottomNavCloseImage ="YourCloseImage.gif" ;
lang = {Image: "Your Images ",Of: " of "};
</script>
And you will need to insert these changes after the module on the page.....for example
<html>
<head>
</head>
<body>
{module_photogallery,id}<br />
<!-- Styles should come here-->
<script type="text/javascript">
fileBottomNavCloseImage ="/YourCloseImage.gif" ;
lang = {Image: "Images ",Of: " off "};
</script>
</body>
</html>
