Latest articles
Latest articles of category




View-gallery.tpl


As we already know we need to parse our CMS variables within literal tags otherwise Smarty will parse them as text. This is how we call for example the THEME_ROOT variable in order to have abstract paths no matter the location of the files.
You need to include three files; that is lightbox.css, jquery.js and lightbox-slideshow.js. We have already in place under includes the latest version of Jquery and this is why you need to call it from there to avoid having same file in several locations.
Of course if you use another AJAX library to handle the gallery (you have the freedom to include whatever you like) who needs a different version of Jquery then feel free to add your own.
Let's go to the code again. The first four lines do all the includes as described above.

We are using a modified version of Jquery Lightbox library to extend its capabilities by adding slideshow as well.
Let's see the code of gallery-view.tpl to understand how it works.

{literal}
<link href="{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{/literal}{$smarty.const.WEBSITE_ROOT}{literal}/includes/js/jquery.js"></script>
<script type="text/javascript" src="{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/js/lightbox-slideshow.js"></script>

As we are going lower to the code, we'll see the following part of it:

<script type="text/javascript">
$(document).ready(function(){
$('.thumbnails A').lightBox({
slideshow: true, nextSlideDelay: 7000,
imageLoading:           '{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/images/lightbox-ico-loading.gif',
imageBtnPrev:           '{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/images/lightbox-btn-prev.gif',
imageBtnNext:           '{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/images/lightbox-btn-next.gif',
imageBtnClose:          '{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/images/lightbox-btn-close.gif',
imageBlank:         '{/literal}{$smarty.const.THEME_ROOT}{literal}/ydronautes/images/lightbox-blank.gif',
});
});
</script>

In this part we are overwriting the settings of lightbox by defining again the same into the view-gallery.tpl
What we need to adjust is the delay of the slideshow, the image paths and how to call it. Pay attention to .thumbnails A.
This is about where to call AJAX and how to call it. In this example you need to place a span before the href that you want to call it. See code below:

<span class="thumbnails">
<a href="{$smarty.const.WEBSITE_ROOT}/gallery/images/category{$smarty.get.alb_category_id}/{$view_images_name[the_images]}" rel="lightbox" title="{$smarty.get.alb_album_title} - {$view_images_description[the_images]}">
<img src="{$smarty.const.WEBSITE_ROOT}/gallery/images/thumbnails/category{$smarty.get.alb_category_id}/tn_{$view_images_name[the_images]}" style="border-width:0px;" /></a>
</span>

If you do not place the span it will not work. Then just add a rel=lightbox to the href (taken from the code below) and you've done.

<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>

{/literal}
Page 2

Posted on: 23/03/2011