Καλησπέρα σας! Σε αυτό το jQuery tutorial θα δούμε πώς μπορούμε να δημιουργήσουμε μία jQuery powered gallery εικόνων. Επειδή το συγκεκριμένο tutorial είναι jQuery tutorial και όχι CSS, δε θα αναλύσουμε πολύ τα CSS που θα χρησιμοποιήσουμε. Εάν θέλετε να δείτε τη δημιουργία μιας CSS gallery πιο αναλυτικά μπορείτε να δείτε το άρθρο CSS gallery tutorial: Δημιουργήστε μία CSS gallery εικόνων εύκολα και απλά!. Τέλος, το συγκεκριμένο tutorial είναι για αρχάριους στην jQuery. Μετά από αυτά, ας ξεκινήσουμε το jQuery tutorial! 
Δείτε Live Demo της jQuery gallery.
Δείτε πρώτα ένα live demo της jQuery gallery.
Τι θέλουμε να κάνουμε
Στα δικά μας τώρα. Θα δημιουργήσουμε μία gallery εικόνων στην οποία θα υπάρχει μία περιοχή που θα περιέχει μία φωτογραφία μεγάλη και μία άλλη περιοχή όπου θα βρίσκονται 8 μικρογραφίες φωτογραφιών. Αυτές οι δύο περιοχές θα βρίσκονται μέσα σε ένα DIV με id "container". Ας δούμε λοιπόν ένα σχέδιο το οποίο θα περιέχει τα HTML στοιχεία (DIVs, li κλπ.) που θα χρησιμοποιήσουμε.
Ανάλυση του σχεδίου για το jQuery tutorial και τελικές σκέψεις
Απ' ο,τι βλέπουμε στο παραπάνω σχέδιο, θα έχουμε τα εξής DIVs:
1) DIV με id="container": Μέσα σε αυτό το DIV θα περιέχονται και η μεγάλη φωτογραφία και οι 8 μικρογραφίες.
2) DIV με class="largePic": Σε αυτό το DIV θα περιέχεται η μεγάλη φωτογραφία μας.
3) DIV με id="smallPic": Σε αυτό το DIV περιέχονται οι μικρογραφίες των φωτογραφιών μας.
Σημείωση: Αντί για DIV, θα μπορούσαμε να χρησιμοποιήσουμε και <ul>
4) Class "thumb": Αυτή η CSS κλάση θα εφαρμοστεί σε όλες τις μικρογραφίες μας και ορίζει το στυλ που θα έχουν την εμφάνισή τους.
5) Θα χρησιμοποιήσω 8 φωτογραφίες. Το μεγάλο μέγεθος θα είναι 500*337 και το μικρό - η μικρογραφία τους δηλαδή - θα είναι 80*80. Όλες οι φωτογραφίες θα τοποθετηθούν σε ένα φάκελο με την ονομασία "images".
HTML και CSS κώδικας για τη jQuery Gallery και σημειώσεις
Σε αυτό το κομμάτι θα προσπαθήσουμε να μετατρέψουμε σε κώδικα το παραπάνω σχέδιο. Μία σημείωση όμως πρώτα. Οι μικρογραφίες που θα τοποθετηθούν μέσα στο DIV με id="smallPic" θα είναι εικόνες οι οποίες θα είναι μέλη μίας HTML λίστας. Κοινώς, η κάθε μία μικρογραφία θα είναι ένα list item. Στην κάθε μία από αυτές, θα εφαρμόζεται η κλάση που είπαμε πιο πάνω - η "thumb" - που θα ορίζει την εμφάνιση τους.
Τέλος, πρέπει να σκεφτούμε κάτι άλλο. Όταν κλικάρουμε μία μικρογραφία, θέλουμε η αντίστοιχη μεγάλη φωτογραφία να εμφανίζεται. Αυτό γίνεται με έναν πολύ απλό τρόπο. Κάνουμε τη μικρογραφία της εικόνας μας να είναι το link της μεγάλης φωτογραφίας με τον παρακάτω τρόπο:
><a href="images/large1.png"><img src ="images/small1.png"/></a>
Η παραπάνω γραμμή του κώδικα μας δηλώνει ότι η εικόνα "small1.png" εάν πατηθεί μας πηγαίνει αυτόματα στην εικόνα "large1.png". Άρα, η εικόνα "small1.png" είναι link προς την εικόνα "large1.png". Έχοντας όλα τα παραπάνω κατά νου, για πάμε να δημιουργήσουμε το HTML και CSS κομμάτι της jQuery gallery μας.
HTML κώδικας
Ανάμεσα στα body tags της σελίδας γράφουμε:
> <h1>H gallery μας..</h1> <hr /> <div id="container"> <!--Εδώ μέσα θα τοποθετηθεί η κανονικού μεγέθους φωτογραφία --> <div class="largePic"> <!--Αυτή τη φωτογραφία θέλουμε να είναι η εικόνα που βλέπουμε με το που κάνουμε load τη σελίδα μας. --> <img src="images/large1.png" class="large"/> </div> <div id="smallPic"> <li class="thumb"><a href="images/large1.png"><img src="images/small1.png" /></a></li> <li class="thumb"><a href="images/large2.png"><img src="images/small2.png" /></a></li> <li class="thumb"><a href="images/large3.png"><img src="images/small3.png" /></a></li> <li class="thumb"><a href="images/large4.png"><img src="images/small4.png" /></a></li> <li class="thumb"><a href="images/large5.png"><img src="images/small5.png" /></a></li> <li class="thumb"><a href="images/large6.png"><img src="images/small6.png" /></a></li> <li class="thumb"><a href="images/large7.png"><img src="images/small7.png" /></a></li> <li class="thumb"><a href="images/large8.png"><img src="images/small8.png" /></a></li> </div> <div class="clear"></div> </div>
Ο παραπάνω κώδικας είναι το HTML κομμάτι της jQuery gallery μας. Προσέξτε τη γραμμή 9. Θα παρατηρήσετε ότι στη φωτογραφία που έχω ορίσει να φαίνεται by default όταν φορτώνουμε τη σελίδα μας, θα δείτε ότι έχει class="large". Αυτή η κλάση θα μας χρησιμεύσει αργότερα στον jQuery κώδικα. Μην ανησυχείτε, θα δείτε είναι πολύ απλός ο λόγος που τη χρησιμοποιώ. Τέλος, μετά τo CSS κώδικα θα σας εξηγήσουμε γιατί χρησιμοποιούμε το DIV με class="clear" πριν το τελικό κλείσιμο τoy "container DIV".
CSS κώδικας – Ας δώσουμε στυλ!
>
* {
margin: 0;
padding: 0;
}
body {
background: #363636;
}
h1 {
color: #ffffff;
}
hr {
border: 1px solid #202020;
}
#container {
margin: 5px auto;
width: 700px;
border: 5px solid #fafafa;
background-color: #DDDDDD;
}
.clear {
clear: both;
}
.largePic {
float: left;
border: 1px solid #AEAEAE;
width: 500px;
height: 337px;
padding: 2px;
margin-top: 3px;
margin-left: 2px;
}
#smallPic {
width: 185px;
margin-left: 5px;
margin-top: 3px;
float: left;
display: inline;
list-style-type: none;
}
.thumb {
float: left;
width: 80px;
height: 80px;
border: 1px solid #eeeeee;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
/*Για να μη φαίνεται το μπλε border στο mozilla και στο IE γύρω από τις μικρογραφίες επειδή είναι links*/
.thumb img {
border: none;
}
Ο παραπάνω κώδικας είναι πολύ απλός.To μόνο που θέλουμε να εξηγήσουμε είναι γιατί υπάρχει μία κλάση "clear" η οποία εφαρμόζεται σε ένα DIV που χρησιμοποιούμε αμέσως πριν κλείσουμε το "container DIV".
Είναι πολλές φορές που χρησιμοποιούμε κάποια DIVs που περιέχουν μέσα τους άλλα. Συνήθως αυτού του είδους τα DIVs τους δίνουμε id "wrapper" ή "container", ώστε να τα ξεχωρίζουμε. Να θυμάστε λοιπόν το εξής: Όταν μέσα σε ένα DIV, για παράδειγμα το "container DIV", υπάρχουν διάφορα άλλα DIVs τα οποία είναι floated, π.χ. float: right ή left, τότε συμβαίνει το εξής: Εάν δεν ορίσουμε ένα DIV - ακριβώς πριν το κλείσιμο του container DIV - με κλάση "clear" + τον αντίστοιχο CSS κώδικα, τότε δε γίνονται cleared τα floats και έτσι χάνεται το background του container DIV που περιέχει τα floated DIVs. Στο παράδειγμά μας, βλέπετε στην παρακάτω εικόνα ένα απαλό γκρι που υπάρχει σαν background στο container; Εάν δεν χρησιμοποιήσουμε το DIV με κλάση "clear", τότε το χρώμα αυτό θα εξαφανιστεί, θα μαζευτεί στην κορυφή του container DIV.
Tέλος με τον CSS και τον HTML κώδικα. Ας ξεκινήσουμε τη jQuery. 
Χρησιμοποιώντας jQuery
Ας δούμε πώς θα χρησιμοποιήσουμε τη jQuery εδώ. Επειδή είναι μικρός ο κώδικας και για λόγους demo, θα τον γράψουμε μέσα στο head της σελίδας. Επίσης, μην ξεχάσετε να καλέσετε και το αρχείο της jQuery στο head, διότι ο κώδικας δε θα τρέχει. Εάν είστε πλήρως αρχάριοι, δείτε ένα jQuery tutorial.
Τί ζητάμε λοιπόν; Θέλουμε κάθε φορά που πατάμε σε μία μικρογραφία, να εμφανίζεται η αντίστοιχη μεγάλη φωτογραφία μέσα στο χώρο που βρίσκεται στα αριστερά στη gallery μας. Επίσης, θέλουμε τα πάντα να συμβαίνουν αφού φορτωθεί η σελίδα μας. Άρα, ας γράψουμε το πιο απλό κομμάτι του jQuery κώδικα που ελέγχει ότι πρώτα θα φορτωθεί η σελίδα και μετά θα μπορεί να εκτελεστεί ο jQuery κώδικας:
>
$(document).ready(function(){
/*Εντολές--Οτιδήποτε υπάρχει εδώ θα εκτελεστεί ΕΑΝ έχει φορτωθεί πλήρως η σελίδα μας πρώτα.*/
});
Έτοιμοι. Μένει λοιπόν να δω, πώς μπορώ όταν κλικάρω πάνω σε μία μικρογραφία, να μπορώ να εμφανίζω την αντίστοιχη φωτογραφία κανονικού μεγέθους. Ας δούμε λίγο τη φωτογραφία που εμφανίζεται σε κανονικό μέγεθος όταν ανοίγει η σελίδα μας και επίσης ας δούμε ένα link των μικρογραφιών μας.
Η φωτογραφία που εμφανίζεται σε κανονικό μέγεθος είναι η:
> <!-- Έστω ότι το ονομάζω Link1 --> <img src="images/large1.png" class="large"/>
Ας δω και ένα Link μιας από τις μικρογραφίες:
><a href="images/large2.png"><img src="images/small2.png" /></a>
Μάλιστα. Ας κάνουμε την εξής σκέψη. Στο στο link της μικρογραφίας υπάρχει η "διεύθυνση-href" της αντίστοιχης της μεγάλης φωτογραφίας που είναι η "images/large2.png". Άρα, εάν αντικαθιστούσα το src του Link1 με το href του link της μικρογραφίας, θα πετύχαινα το στόχο μου - να άλλαζα τη μεγάλη φωτογραφία με μία άλλη. Πώς μπορώ να αντικαταστήσω το src του Link1 με το href του link της μικρογραφίας;
Χρήση του .attr και πυρήνας jQuery κώδικα
Για να δώσω την απάντηση δεν έχω παρά να χρησιμοποιήσω μία συνάρτηση της jQuery, την ".attr()". Η συνάρτηση αυτή έχει τη δυνατότητα και να διαβάζει αλλά και να σετάρει την τιμή ενός attribute ("href", "title", "src", "rel" κλπ.) του στοιχείου που την εφαρμόζουμε. Δηλαδή εδώ μπορούμε να κλικάρουμε πάνω στη μικρογραφία, να παίρνουμε την τιμή του href attribute που είναι η διεύθυνση της μεγάλης φωτογραφίας, να την αποθηκεύουμε κάπου, σε μία μεταβλητή και εν συνεχεία να σετάρουμε το attribute "src" της φωτογραφίας που έχει κλάση "large", ώστε να είναι ίσο με τη διεύθυνση της φωτογραφίας που είναι αποθηκευμένη μέσα στη μεταβλητή. Επίσης, δε θέλω όταν κλικάρω μια μικρογραφία να μου ανοίγει την μεγάλη φωτογραφία σε άλλη σελίδα. Διότι ένα απλό link με image αυτό κάνει. Ας τα μετουσιώσουμε όλα αυτά σε κώδικα:
>
$(".thumb a").click(function(){
var theLargeImage = $(this).attr("href");
$(".large").attr('src',function(){
return theLargeImage;
});
return false;
});
Εξηγήσεις στον κώδικα της jQuery gallery:
Γραμμή 1: Σε αυτή τη γραμμή ελέγχουμε για το εάν πατηθεί link (a) το οποίο θα του εφαρμόζεται η κλάση ".thumbs". Είναι απλό να καταλάβουμε ότι αυτό το link είναι ουσιαστικά ένα link της μικρογραφίας μας!
Γραμμή 2: Έχοντας πατήσει το link παραπάνω, σε αυτή τη γραμμή ορίζουμε μία μεταβλητή στην οποία αποθηκεύουμε το href attribute της μικρογραφίας-link που πατήσαμε. Εάν για παράδειγμα πατήσουμε το link:
><a href="images/large1.png"><img src="images/small1.png" /></a>
τότε στη μεταβλητή μας "theLargeImage" αποθηκεύεται η τιμή "images/large1.png".
Γραμμές 4, 5: Σε αυτές τις γραμμές σετάρουμε το attribute "src" του στοιχείου που έχει κλάση "large", δηλαδή της μεγάλης φωτογραφίας μας. Το σετάρισμα αυτό γίνεται εδώ:
>
.attr('src',function(){
return theLargeImage
});
Εδώ λέμε ότι στο 'src' θα μπει η τιμή που θα μας δώσει η συνάρτηση (function) η οποία από ότι βλέπουμε μας επιστρέφει την τιμή της μεταβλητής "theLargeImage". Μη σας φοβίζει που ορίσαμε συνάρτηση. Μπορείτε να διαβάσετε απλά παραδείγματα της .attr() εδώ.
Γραμμή 7: Η εντολή "return:false" είναι πάρα πολύ σημαντική διότι είναι αυτή που αποτρέπει τον browser από το να ανοίξει νέα σελίδα στην οποία θα προβάλλει τη φωτογραφία που κλικάραμε. Εάν δεν μπει αυτή η εντολή εκεί, τότε θα αλλάζει το περιεχόμενο της μεγάλης φωτογραφίας στη gallery, αλλά δε θα το βλέπουμε διότι με το που θα πατάμε στο link θα ανοίγει σε επόμενο παράθυρο η φωτογραφία μας.
Αυτό ήταν! Τα εξηγήσαμε όλα!
Head σελίδας μας ολοκληρωμένο
>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<title>Απλή jQuery Gallery</title>
<script>
$(document).ready(function(){
$(".thumb a").click(function(){
var theLargeImage = $(this).attr("href");
$(".large").attr('src',function(){
return theLargeImage
});
return false;
});
});
</script>
</head>
Εδώ κάπου τελειώνει το tutorial μας. Δείτε τις πηγές μας και κατεβάστε τα αρχεία μας.
Πηγές του jQuery gallery tutorial
Οι φωτογραφίες που χρησιμοποιήθηκαν είναι οι εξής:
1. Tulips with blue sky by Petr Kratochvil
2. Pink Rose and Buds by John Edwards
3. Traditional house by Petr Kratochvil
4. Modern Building by Sharee Basinger
5. Tulip by Anna Cervova
6. Summer Rainbow over open field by Barb Ver Sluis
7. Sunset by Vera Kratochvil
8. Christmas decoration by Petr Kratochvil
Κατεβάστε τα αρχεία που χρησιμοποιήθηκαν
Πηγή tutorial:akisplace.com