Τελευταία άρθρα
Τελευταία άρθρα της κατηγορίας




View-gallery.tpl


Όπως ήδη γνωρίζουμε πρέπει να εισάγουμε τις μεταβλητές μας εντός literal tags αλλιώς η Smarty θα τις διαχειριστεί ως κείμενο με αποτέλεσμα να μην έχουμε το επιθυμητό και αναμενόμενο αποτέλεσμα.

Ακολουθούν παραδείγματα στο πως χρησιμοποιούμαι εν πράκτος τα παραπάνω.

{literal}
<link href="{/literal}{$smarty.const.THEME_ROOT}{literal}/portalblue/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}/portalblue/js/lightbox-slideshow.js"></script>

Στον παρακάνω κώδικα συμπεριλαμβάνουμε στο αρχείο μας τρία αρχεία, δηλαδή το lightbox.css, το jquery.js και το lightbox-slideshow.js χρησιμοποιώντας τη μεταβλητή THEME_ROOT την τιμή της οποίας δηλώνουμε στο αρχείο μας includes/settings.php.

Φυσικά, αν χρησιμοποιείτε μια άλλη βιβλιοθήκη AJAX για να διαχειριστείτε την gallery που χρειάζεται μια διαφορετική έκδοση του Jquery τότε μπορείτε να προσθέσετε το δικό σας.

Εμείς χρησιμοποιούμε μια τροποποιημένη έκδοση της βιβλιοθήκης jQuery Lightbox για να επεκτείνουμε τις δυνατότητές αυτού.

Καθώς προχωράμε παρακάτω στον κώδικα, θα δούμε:

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

Σε αυτό το κομμάτι αντικαθιστούμε τις ρυθμίσεις του lightbox, ορίζοντας εκ νέου τις ίδιες στο view-gallery.tpl
Αυτό που χρειαζόμαστε για την προσαρμογή είναι η καθυστέρηση της παρουσίασης, τα image paths και πώς να τα φωνάξουμε. Δώστε προσοχή στο .thumbnails A.
Αυτή είναι για το που να καλέσουμε το AJAX και πώς να το καλέσουμε. Σε αυτό το παράδειγμα θα πρέπει να τοποθετήσετε ένα span πριν από την href που θέλετε να το φωνάξετε. Δείτε παρακάτω τον κώδικα:

<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>

Εαν δεν βάλετε το span δεν θα δουλέψει. Μετά προσθέστε ένα rel=lightbox στο href (μπορείτε να το πάρετε από τον παρακάτω κώδικα) και είστε έτοιμοι.

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

Μην ξεχάσετε να κλείσετε το literal στο τέλος του κώδικα.

undefined Αντιμετώπιση προβλημάτων
Εαν δεν μπορείτε να δείτε το AJAX παράθυρο τότε είτε ξεχάσατε να αντιγράψετε τις εικόνες στο template φάκελό σας ή έχετε τυπογραφικό λάθος στα paths.
Παρακαλώ ελένξτε προσεκτικά αυτές τις δυο παραμέτρους.
Δημοσιεύτηκε στις: 16/03/2011