Photo Gallery, self-explanatory terms that says its a bunch of photos displayed in a proper manner and can be traversed next-previous.
And below picuture will come to your mind.
Let see how this can be achieved in Liferay by AUI library.
Its very simple, you just need to have below html structure.
<div id="photogallery">
<a href="photo-1.jpg">
<img src="photo-1-thumbnail.jpg"/>
</a>
<a href="photo-2.jpg">
<img src="photo-2-thumbnail.jpg"/>
</a>
<a href="photo-3.jpg">
<img src="photo-3-thumbnail.jpg"/>
</a>
</div>
This could be achieved by Web-Content Structure-Tempalte or custom entity.
And below javascript.
<script type="text/javascript">
AUI().ready('aui-image-viewer-gallery', function(A) {
var imageGallery1 = new A.ImageGallery({
links : '#photogallery a',
caption : 'Images',
autoPlay : true,
paginator : {},
delay : 20000
}).render();
});
</script>
And you are done!!
You will be shown with thumbnail images in row, by clicking on any of images gallery would be shown as image shown above.
Its very simple, isnt it?
Lets understand above code a bit.
In javascript, you just need to construct ImageGallery with links "#photogallery a", here photogallery is id of outer div containing anchor tags.
For ImageGallery you can define certain attributes like
autoplay: true by which Slideshow will be played automatically,
caption: 'Images', Images word would be displayed below images.
delay:20000, this parameter is in milli-second means after each 20 second next image would come.
paginator:{}, you can define total attribute inside paginator in order to show less images in horizontal bar.
There are many such attributes AUI ImageGallery comes with.
Example portlet code available at Photo Gallery Portlet.
I hope this would be helpful.
Regards,
