theportraitofageek.com | περί κατασκευής ιστοσελίδων

Δημιουργία jQuery slideshow

17.01.2010

3 ΣΧΟΛΙΑ

Web Development

Όπως με όλα τα πράγματα, έτσι και με τα slideshows που βλέπουμε συχνά πυκνά σε διάφορα blogs π.χ. με featured posts, αν χρησιμοποιηθούν σωστά τότε πράγματι είναι ένας καλός τρόπος να προωθήσετε κάποιες συγκεκριμένες ενότητες ενός site ή κάποια άρθρα σε κάποιο blog.

Ας δούμε λοιπόν πως μπορούμε να φτιάξουμε ένα slideshow σε jQuery χρησιμοποιώντας το jQuery cycle plugin. Προσωπικά χρησιμοποιώ το συγκεκριμένο plugin σαν να είναι μέρος του core της βιβλιοθήκης jQuery. Πραγματικά θα μπορούσε να είναι μιας και μπορεί να κάνει τα πάντα.

Ένα απλό Slideshow πρώτα

Με το jQuery cycle μπορούμε να δημιουργήσουμε slideshows όχι μόνο με εικόνες αλλά και με set περιεχομένου π.χ:

http://www.theportraitofageek.com/blog/stuff/slideshow/slideshow1.html

Αν δούμε το κώδικα του παραπάνω slideshow, Θα δούμε πόσο εύκολο είναι να γίνει το παραπάνω. Με πολύ λίγες δηλώσεις (css – js), έχουμε ένα όμορφο αποτέλεσμα. Για το παραπάνω παράδειγμα λέμε στο plugin:

$(function() {
    $('.slides').cycle({
          fx:     'shuffle',
          speed:  'slow',
          timeout: 4000
          });
  });

Ορίζουμε την εναλλαγή σε “shuffle”, τη ταχύτητα της εναλλαγής στο “αργό” και το χρόνο εμφάνισης του κάθε slide στα 4 δευτερόλεπτα. Μπορείτε να δείτε το σύνολο των διαθέσιμων options του plugin. Είναι πραγματικά όλα όσα χρειάζεται κάποιος για να φτιάξει ότι slideshow θέλει.

Με μενού πλοήγησης

Στο επόμενο παράδειγμα θα χρησιμοποιήσουμε 2 μαγικά options του plugin. Το pager και το pagerAnchorBuilder:

$('.slides')
    .before('ul id="nav"')
    .cycle({
     fx:     'shuffle',
     speed:  'slow',
     timeout: 4000,
     pager:  '#nav',
     pagerAnchorBuilder: function(idx, slide) {
      var src   = $(slide).find('img').attr('src');
      var title = $(slide).find('img').attr('title');
      var desc  = $(slide).find('img').attr('alt');
      return '
'+title+''+desc+'

';
     }
    });

Και το παράδειγμα μας. Αν δούμε λοιπόν τον κώδικα θα δούμε πως κάθε slide αποτελείται από τον εξής κώδικα:

Slide 01

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Read more

Με άλλα λόγια λέμε στο plugin πριν από το slideshow (div.slides) πρόσθεσε ένα ul με id = nav (.before(‘ul id=”nav”‘)) και με το option pager (pager: ‘#nav’) όρισε το σαν το μενού πλοήγησης του slideshow. Μετά, με το option pagerAnchorBuilder του λέμε πάρε τις ιδιότητες img, title και alt της κάθε εικόνας στο slideshow και βάλτε σαν list items μέσα στο ul#nav. Όλα τα υπόλοιπα τα έχει αναλάβει το plugin. Φυσικά, την μορφοποίηση την αναλαμβάνουμε εμείς μέσω CSS.

Οι επιλογές είναι πραγματικά αμέτρητες με το συγκεκριμένο plugin. Μελετήστε τα options του και δε νομίζω να χρειαστεί να ψάξετε για slideshow plugin ξανά. Μπορείτε πραγματικά να το πάτε πολύ μακριά το όλο θέμα. Δες και αυτό το slideshow. Τσίρκο ναι, απλά μπορείτε να πάρετε μια ιδέα για το που μπορείτε να φτάσετε.