Δημιουργία μίας απλής CSS gallery εικόνων + εφέ με jQuery

Anastasis · November 10, 2016

Το CSS tutorial που ακολουθεί σας εξηγεί αναλυτικά πως μπορείτε να δημιουργήσετε μια gallery εικόνων με χρήση CSS.H gallery αυτή θα είναι εύκολη στο σχεδιασμό και οι φωτογραφίες σας θα εμφανίζονται σε αυτή σαν να ήταν από μηχανή POLAROID.Αφού δημιουργήσουμε την gallery αυτή εν συνεχεία θα της δώσουμε κάποια εφέ με τη βοήθεια της jQuery (η οποία είναι javascript βιβλιοθήκη και πολύ διαδεδομένη στις μέρες μας).

Το βοήθημα αποτελείται από δύο μέρη ..Στο πρώτο μέρος δημιουργούμε την css gallery και στο δεύτερο μέρος χρησιμοποιώντας τη jQuery δημιουργούμε κάποια εφέ κίνησης.
Ας δούμε πρώτα από όλα δύο live demos του τι θα φτιάξουμε.

1.)CSS gallery Live Demo

2.)Css gallery με jQuery -Live Demo

Στο δεύτερο demo μπορείτε με την χρήση των κουμπιών να ανοίγετε/κλείνετε την gallery καθώς και να εμφανίζετε/εξαφανίζετε τις περιγραφές από τις φωτογραφίες.

ΠΡΩΤΟ ΜΕΡΟΣ ΒΟΗΘΗΜΑΤΟΣ-ΔΗΜΙΟΥΡΓΙΑ ΤΗΣ CSS GALLERY

Βλέποντας το πρώτο demo παραπάνω, αυτό που μας ενδιαφέρει είναι πως θα δημιουργήσουμε τη κάθε μία φωτογραφία και το πλαίσιο της με τη βοήθεια του css κώδικα.Ας δούμε λοιπόν ένα σχέδιο της φωτογραφίας....

Ας εξηγήσουμε μία- μία τις παραπάνω περιοχές στη φωτογραφία.

Περιοχή 1: Αυτό είναι το container κάθε μιας φωτογραφίας -ο χώρος που την περιέχει και την περιβάλλει δηλαδή. Είναι με γκρι χρώμα .Βλέπουμε ότι μέσα σε αυτό υπάρχουν και η μικρογραφία της φωτογραφίας μας, η περιοχή 3 καθώς και η περιοχή 2 όπου είναι ο χώρος όπου θα βρίσκεται η περιγραφή της φωτογραφίας. Επίσης βλέπουμε ότι εξωτερικά της περιοχής 1 υπάρχει μία λεπτή γκρι γραμμή, ένα border το οποίο έχει πλάτος 1px. Επίσης, ένα λεπτό border περιβάλλει και τη μικρογραφία της φωτογραφίας δηλαδή την περιοχή 3.Αρα συνοψίζοντας:

Περιοχή 1: Το container περιβάλλει τη μικρογραφία της φωτογραφίας μας καθώς και την περιγραφή της.
Περιοχή 2:Η περιοχή που περιβάλλει την περιγραφή της φωτογραφίας.
Περιοχή 3:H περιοχή που περιέχει την μικρογραφία της φωτογραφίας μας.

Επίσης:
1)Για τις μικρογραφίες των φωτογραφιών που θα εμφανίζονται στη css gallery θα χρησιμοποιήσουμε 4 φωτογραφίες που κατεβάσαμε από το site www.publicdomainpictures.net/

2)Στην gallery θα πρέπει όλες οι μικρογραφίες να είναι στο ίδιο μέγεθος. Αλλιώς θα προκληθεί ασυμμετρία και δεν το θέλουμε.

3)Με τον όρο φωτογραφία θα εννοούμε ολόκληρο το περίγραμμα της φωτογραφίας μαζί με τη μικρογραφία της φωτογραφίας που βρίσκεται μέσα του.

Μετά από όλα τα παραπάνω ξεκινάμε με το html και css μέρος της css gallery.

Ας δούμε λοιπόν το ΗΤΜL μέρος της css-gallery:

Θα δημιουργήσουμε μία div η οποία θα περιβάλλει όλα τα στοιχεία της σελίδας μας-την “wrapper”- και εν συνεχεία θα δημιουργήσουμε μία div όπου θα περιβάλλει την gallery και θα της δίνει το ελαφρύ γκρι φόντο. Επίσης θα δημιουργήσουμε μόνο μία φωτογραφία καταρχάς διότι όλες οι φωτογραφίες θα είναι παρόμοιες. Οπότε αν τη δημιουργήσουμε σωστά θα το επαναλάβουμε 8 φορές αυτό..!Τέλος , θα "αναγκάσουμε" τις μικρογραφίες των φωτογραφιών να εμφανίζονται στη σελίδα σε μέγεθος 150*150px.Αυτό θα γίνει μέσα από τον html κώδικα.Ο κώδικας που θα μπει μέσα στα body tags της σελίδας μας είναι:

κώδικας:

<div id="wrapper">

<div class="galleryContainer">
<div class="ourPhoto">
<img src="images/img1.png" width= “150” height= “150” />
<div class="ourTitle">
Perigrafi 1
</div>
</div>
</div>
</div>

Εξηγώντας τον παραπάνω κώδικα :
H div με class "galleryContainer" είναι αυτή που θα περιέχει όλες τις φωτογραφίες μας. Βλέπουμε ότι η div που περιέχει όλη την φωτογραφία μας είναι η "ourPhoto".Αυτή λοιπόν είναι η περιοχή 1 που μιλήσαμε πριν. Επίσης, υπάρχει η div "ourTitle", στο σημείο που γράφουμε την περιγραφή μας. Αυτή είναι η περιοχή 2.Η περιοχή 3 είναι ουσιαστικά στο σημείο που βρίσκεται η μικρογραφία μας δηλαδή το

κώδικας:

Τα "width" και "height" αναγκάζουν τη μικρογραφία μας να έχει μέγεθος 150*150 pixels.

Για να δούμε την gallery μας χωρίς να έχουμε εφαρμόσει css..

Όμορφα.Ας δημιουργήσουμε τώρα και το CSS κομμάτι ώστε να δώσουμε στυλ στη φωτογραφία μας και να μοιάζει με polaroid.

Ας δούμε λοιπόν το CSS μέρος της css-gallery:

Κάτι πολύ σημαντικό!Ξέρουμε ότι όταν θέλουμε να εφαρμόσουμε ένα css στυλ πάνω σε ένα html στοιχείο,για παράδειγμα μία div ,μια παράγραφο p κλπ μπορούμε να το κάνουμε χρησιμοποιώντας το id του στοιχείου αυτού.Σε αυτό το tutorial θα χρησιμοποιήσουμε όχι το id του αλλά την κλάση του,class.Θα μπορούσαμε να χρησιμοποιήσουμε και το id εδώ αλλά ΔΕΝ ΤΟ ΚΑΝΟΥΜΕ ΔΙΟΤΙ:

παράθεση:

Το id αναφέρεται ΜΟΝΟ ΣΕ ΕΝΑ ΣΤΟΙΧΕΙΟ ΣΤΗ ΣΕΛΙΔΑ ΜΑΣ. Δηλαδή θα αναφερόταν μόνο σε μία φωτογραφία. Άρα για τις 8 φωτογραφίες θα έπρεπε να είχαμε 8 διαφορετικά ids με ίδιο κώδικα, κάτι που δεν το θέλουμε . Θέλουμε ο κώδικας μας να μην επαναλαμβάνεται .Από την άλλη πλευρά η css «class» αναφέρεται σε όλα τα στοιχεία της σελίδας μας που έχουν μία συγκεκριμένη class.Άρα θα γράψουμε ένα κώδικα για την εμφάνιση της κλάσης "ourPhoto" και θα το εφαρμόσουμε σε όλες τις φωτογραφίες!!!

Το *{margin:0;padding:0;} το κάνουμε διότι:Όλα τα html elements έχουν προκαθορισμένα margins και paddings.Με την παραπάνω εντολή αφαιρούμε κάθε margin και padding που έχει κάθε html στοιχείο στη σελίδα μας με σκοπό να ορίσουμε εμείς τα paddings και τα margins που θέλουμε.

Στη div με class = "galleryContainer" δίνουμε κάποια paddings –περιθώρια από τη μέσα μεριά του galleryContainer – έτσι ώστε η φωτογραφία μας που βρίσκεται μέσα σε αυτό το container να μην ξεκινάει από πάνω αριστερά αλλά να έχει ένα μικρό περιθώριο και από πάνω και από κάτω και από αριστερά..

Το float:left κάνει τη galleryContainer να μετακινηθεί όσο πιο αριστερά γίνεται στο μέσα στο "wrapper" , το element που την περιέχει δηλαδή.

Ο κώδικας CSS που θα χρησιμοποιήσουμε για τις φωτογραφίες μας.
Στον παραπάνω css κώδικα προσθέτουμε..

κώδικας:

.ourPhoto {
border: 1px solid #cccccc;
height: auto;
float: left;
background:#ffffff;
margin-right: 10px;
margin-bottom:10px;

}

.ourPhoto img{

margin-top:10px;
margin-left:10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid silver;
}

.ourTitle {
text-align: center;
font-size:10px;
width: 150px;
margin-left: 5px;
margin-right:5px;
margin-top:3px;
margin-bottom:5px;
height:30px;
}

Για να δούμε λίγο την gallery μας τώρα..

Μία χαρά η φωτογραφία μας ,όπως ακριβώς τη θέλουμε. Για να εξηγήσουμε κάποια σημεία του παραπάνω CSS κώδικα.

.ourPhoto :H div που εφαρμόζουμε αυτή την css class είναι ουσιαστικά η περιοχή 1 που είδαμε πιο πάνω. Σε αυτή την div φροντίζουμε να δώσουμε το χρώμα που θα περιβάλλει τη μικρογραφία της φωτογραφία μας και ,το λευκό .Επίσης δίνουμε και ένα border 1px πλάτος. Επίσης της δίνουμε ένα margin-top και ένα margin-right που ουσιαστικά είναι το πόσο θα απέχει αυτή η div -με class ourPhoto-από τα άλλα elements από πάνω και προς τα δεξία. Δηλαδή η επόμενη div με class “ourPhoto” ξεκινάει 10px δεξιότερα.

.ourPhoto img: Aυτή η κλάση αναφέρεται σε οποιοδήποτε image link υπάρχει μέσα σε divs με class = "ourPhoto".Δηλαδή στο

κώδικας:

.

Εδώ είναι το στυλ που εφαρμόζουμε στη μικρογραφία που βρίσκεται μέσα στην "ourPhoto" div.Tης δίνουμε ένα border και κάποια margins που με αυτά δημιουργούμε την απόσταση μεταξύ της μικρογραφίας και του εξωτερικού border της φωτογραφίας μας (αυτου του border που δημιουργούμε στη div με class "ourPhoto").

.ourTitle:Εδώ ορίζουμε μία div στην οποία θα γράψουμε την περιγραφή της φωτογραφίας μας! Δεν έχει τίποτα ιδιαίτερο να εξηγήσουμε εδώ.
Στη συνέχεια στον html κώδικα προσθέσαμε και τις υπόλοιπες φωτογραφίες.Δείτε όλο τον κώδικα html και css εδώ.

Βασικα τελειώσαμε!!Στον html κώδικα θα επαναλάβουμε τη div "ourPhoto" και ό,τι περιλαμβάνει αυτή ώστε να δημιουργήσουμε την gallery μας για 8 φωτογραφίες.

ΟΛΟΚΛΗΡΟΣ Ο HTML ΚΩΔΙΚΑΣ ΕΔΩ

κώδικας:

<div id="wrapper">

<div class="galleryContainer">

<div class="ourPhoto">

<img src="images/img1.png" width="150" height="150"/>

<div class="ourTitle">
Photo 1

</div>

</div>

<div class="ourPhoto">
<img src="images/img2.png" width="150" height="150"/>

<div class="ourTitle">
Photo 2
</div>
</div>

<div class="ourPhoto">
<img src="images/img3.png" width="150" height="150"/>

<div class="ourTitle">
Photo 3
</div>

</div>

<div class="ourPhoto">
<img src="images/img4.png" width="150" height="150"/>

<div class="ourTitle">
Photo 4
</div>
</div>
<div class="ourPhoto">
<img src="images/img2.png" width="150" height="150"/>
<div class="ourTitle">
Photo 5
</div>
</div>

<div class="ourPhoto">
<img src="images/img1.png" width="150" height="150"/>

<div class="ourTitle">
Photo 6
</div>
</div>

<div class="ourPhoto">

<img src="images/img4.png" width="150" height="150"/>
<div class="ourTitle">
Photo 7
</div>

</div>

<div class="ourPhoto">
<img src="images/img3.png" width="150" height="150"/>

<div class="ourTitle">
Photo 8
</div>
</div>
</div>

</div>
</div>

ΟΛΟΚΛΗΡΟΣ Ο CSS ΚΩΔΙΚΑΣ ΕΔΩ.....

κώδικας:

*{
margin:0;
padding:0;
}

#wrapper {
width:850px;
margin: 0 auto;
color: blue;

}
.galleryContainer{
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
width:736px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
float: left;
background:#eeeeee;
}

.ourPhoto {
border: 1px solid #cccccc;
height: auto;
float: left;
background:#ffffff;
margin-right: 10px;
margin-bottom:10px;

}

.ourPhoto img{

margin-top:10px;
margin-left:10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid silver;
}

.ourTitle {
text-align: center;
font-size:10px;
width: 150px;
margin-left: 5px;
margin-right:5px;
margin-top:3px;
margin-bottom:5px;
height:30px;
}

ΔΕΥΤΕΡΟ ΜΕΡΟΣ ΒΟΗΘΗΜΑΤΟΣ-ΛΕΙΤΟΥΡΓΙΚΟΤΗΤΑ ΜΕ JQUERY

Αφού δημιουργήσαμε τη gallery μας θέλουμε:

1)Πατώντας ένα κουμπί να "ξεδιπλώνεται"- ανοίγει η gallery μας προς τα κάτω.

2)Πατώντας ένα κουμπί να διπλώνεται η gallery μας προς τα πάνω.

3)Πατώντας ένα κουμπί εμφανίζονται οι περιγραφές των φωτογραφιών.Εάν το ξαναπατήσουμε να εξαφανίζονται.

Σαν πρώτη σκέψη είναι ότι πρέπει στο html κομμάτι να προσθέσουμε μια div στην οποία θα μπουν τα κουμπιά που θα δημιούργησουμε.Αυτή η div θα είναι μέσα στο wrapper και μετά την div με class = "galleryContainer". Επίσης στα κουμπιά μας ,που θα προέλθουν από την html tag "button", θα δώσουμε στυλ μέσω CSS!Στη συνέχεια θα προσθέσουμε την jQuery η οποία θα ελέγχει το τι θα συμβεί όταν πατηθούν τα κουμπιά..!Και τελειώσαμε..
Ξεκινάμε λοιπόν…

Δημιουργώντας τη div με τα κουμπιά-Html μέρος..

Προσθέτουμε τον παρακάτω κώδικα ΜΕΤΑ το τέλος της div με κλάση "galleryContainer”

κώδικας:

<div id="buttons">

<button id="slideBtn" value="Δείξε το portfolio">Portfolio</button>
<button id="closeSlide" value="Κλείσε το portfolio">Κλείσε το portfolio!</button>
<button id="descBtn" value="Δείξε το portfolio">Περιγραφές.</button>
</div>

Εδώ λοιπόν δημιουργούμε μία div με id ="buttons" και μέσα σε αυτή τοποθετούμε 3 κουμπιά το καθένα από τα οποία έχει ένα συγκεκριμένο id.Αυτό το id θα χρησιμοποιηθεί όχι μόνο από το CSS αλλά και από την jQuery.Για να δούμε τι έχουμε φτιάξει..

Ωραία…Ας μετακινήσουμε λίγο τα κουμπιά μας τώρα και ας εφαρμόσουμε σε αυτά CSS ώστε να γίνουν πιο όμορφα…

Δημιουργώντας τη div με τα κουμπιά-CSS μέρος..

Ας δούμε λίγο τον κώδικα css που μπορούμε να προσθέσουμε στον παραπάνω css κώδικα-αυτόν στο πρώτο μέρος.

κώδικας:

#buttons{

width:750px;
margin:0 auto;
}

Με το παραπάνω block κώδικα τοποθετούμε τη div με τα κουμπιά κάτω από την div με class=”galleryContainer"..Με το margin:0 auto κεντράρουμε στη μέση τη div με id “buttons”.

Για να δούμε πώς μοιάζει η gallery μας πλέον…

Αυτό που θα κάνουμε τώρα θα είναι το εξής..Θα εφαρμόσουμε CSS στυλ στα κουμπιά μας ώστε να τα κάνουμε πιο όμορφα.Παρακάτω δίνεται ο κώδικας CSS των κουμπιών και όπου χρειάζεται τον εξηγούμε.

CSS στυλ των κουμπιών.

κώδικας:

#slideBtn{
float:left;
padding:5px;
border:2px double green;
background: #A3CA80;
margin-left:10px;
color:white;
font-family:Calibri;
font-size:25px;
float:left;

}

#closeSlide{
float:left;
padding:5px;
border:2px double red;
background: #FC98A9;
margin-left:20px;
color:white;
font-family:Calibri;
font-size:25px;
display: inline;
}

#descBtn{
float:left;
padding:5px;
border:2px double gray;
background: #DDDDDD;
margin-left:20px;
color:white;
font-family:Calibri;
font-size:25px;
display: inline;
}

Στον παραπάνω κώδικα δεν υπάρχει κάτι ιδιαίτερα δύσκολο που χρήζει εξήγησης…Κάτι λείπει όμως.. Ναι ,λείπουν τα εικονίδια από τα κουμπιά.

Εικονίδια στα κουμπιά-HTML και CSS κώδικας.

Εδώ με μία απλή αλλαγή στον html κώδικα θα προσθέσουμε τα εικονίδια μέσα στα κουμπιά.

κώδικας:

<div id="buttons">

<button id="slideBtn" value="Δείξε το portfolio"><span class="spans"><img src="images/btnOpen.png"/></span>Portfolio</button>

<button id="closeSlide" value="Κλείσε το portfolio"><span class="spans"><img src="images/btnClose.png"/></span>Κλείσε το portfolio!</button>

<button id="descBtn" value="Δείξε το portfolio"><span class="spans"><img src="images/btnDesc.png"/></span>Περιγραφές.</button>
</div>

Βλέπετε μία μικρή διαφορά στα κουμπιά;Έχει προστεθεί μέσα σε αυτά ένα στοιχείο html - το span μέσα στο οποίο έχουμε προσθέσει το εικονίδιο μας!!!Τι είναι όμως το span element;

Το span είναι ένα html στοιχείο το οποίο μοιάζει πολύ με τo div..Η διαφορά είναι η εξής..Το span δεν προκαλεί μορφοποίηση της σελίδας μας.Δηλαδη εάν έχουμε μία div και τοποθετήσουμε μία δεύτερη μέσα της ,εκεί που την τοποθετούμε υπάρχει line-break (αλλαγή γραμμής).Με το span όμως δεν συμβαίνει αυτό..Γι αυτό μέσα στο button τοποθετούμε ένα span στοιχείο ώστε μέσα σε αυτό να τοποθετήσουμε το εικονίδιο μας και να βρίσκεται στην ίδια γραμμή με τον τίτλο του κουμπιού μας!

Για να ορίσουμε css στυλ για την κλάση "spans" προσθέτουμε στον παραπάνω css κώδικα το :

κώδικας:

.spans{float:left;
margin-right:10px;
}

Για να δούμε τώρα…!

To μόνο που μένει είναι: όταν φορτώνουμε τη σελίδα να μη φαίνεται η gallery μας…Αυτό το επιτυγχάνουμε προσθέτοντας στο css της κλάσης "galleryContainer" την εντολή: display:none;.

Επίσης το ίδιο θα κάνουμε για τις περιγραφές των φωτογραφιών.Αυτές ελέγχονται με την κλάση "ourTitle".Για να δούμε το συνολικό κώδικα..

ΝΑΙ τελειώσαμε….Ας πάμε τώρα στο τελευταίο κομμάτι…

CSS gallery- jQuery κώδικας…

Εάν είστε πλήρως αρχάριος από jQuery μπορείτε να δείτε Jquery.com για να πάρετε μία πρώτη γεύση σχετικά με αυτή.

Στο τελευταίο αυτό κομμάτι θα χρησιμοποιήσουμε jQuery η οποία θα μας εμφανίζει-εξαφανίζει την gallery μας.Επίσης θα χρησιμοποιήσουμε κουμπί που θα εμφανίζει και θα εξαφανίζει τις περιγραφές των εικόνων..

Κώδικας jQuery.
Το αρχείο μας θα το ονομάσουμε sliding.js..
Στο head της σελίδας html προσθέστε τις δύο ακόλουθες γραμμές..

κώδικας:

Η πρώτη γραμμή δηλώνει ότι χρησιμοποιούμε τη βιβλιοθήκη της jQuery και η δεύτερη γραμμή δηλώνει ότι θα χρησιμοποιήσουμε και το αρχείο "sliding.js".
Και το "jquery-1.4.2.min.js" και το "sliding.js" σας το δίνουμε στο τέλος του βοηθήματος για κατέβασμα.

Αρχείο "sliding.js":

κώδικας:

$(document).ready(function(){

});

Πάντα στην jQuery ελέγχουμε πρώτα εάν έχει φορτώσει πλήρως η σελίδα μας.Με τον παραπάνω κώδικα ελέγχουμε ακριβώς αυτό.Μέσα στις "{ }" θα μπει ολόκληρος ο κώδικας που θα ελέγχει τα κουμπιά μας.Όπως έχουμε πει η jQuery θα ελέγξει την δράση των κουμπιών με βάση το id του κάθε κουμπιού.

Για να δούμε ολοκληρωμένο τον κώδικα της jQuery.

κώδικας:

$(document).ready(function(){
$('#slideBtn:button').click(function()
{
$(".galleryContainer").slideDown("slow");

});

$('#closeSlide:button').click(function()
{
$(".galleryContainer").slideUp("slow");

});

$('#descBtn:button').toggle(
function () {
$(".ourTitle").fadeIn("slow");
},
function () {
$(".ourTitle").fadeOut("slow");;
}
);
});

Ας εξηγήσουμε..

$('#slideBtn:button').click(function():Εδώ με τη βοήθεια του jQuery selector '$' διαλέγουμε πιο στοιχείο θα ελέγξουμε.Εδώ ελέγχουμε το στοιχείο που έχει id 'slideBtn' και με το :button δηλώνουμε στη jQuery ότι το στοιχείο με αυτό το id είναι κουμπί.Στη συνέχεια ορίζουμε ότι ο κώδικας γι αυτό το κουμπί θα εκτελεστεί μόνο εάν το κλικάρουμε -αυτό το δηλώνουμε με την συνάρτηση click() .

$(".galleryContainer").slideDown("slow");:Στη γραμμή αυτή χρησιμοποιούμε τη συνάρτηση slideDonw() της jQuery η οποία ,στο στοιχείο που έχει εφαρμοστεί δίνει το εφέ του "ξετυλίγματος" προς τα κάτω.Εδώ την εφαρμόζουμε στο στοιχείο με id ίσο με "galleryContainer".Στη συνάρτηση slideDown μπορούμε να δώσουμε παραμέτρους όπως "slow,medium,fast" καθώς και νούμερα σε miliseconds.Αυτή η παράμετρος είναι που καθορίζει την ταχύτητα με την οποία συμβαίνει το εφέ..

Παρόμοια συμβαίνουν και για τα άλλα δύο μας κουμπιά.Προσοχή στη γραμμή 14.

Εδώ χρησιμοποιούμε τη συνάρτηση toggle() όπου μέσα σε αυτή μπορούμε να γράψουμε 2 εντολές της jQuery και να εκτελούμε μία την μία και μία την άλλη..Δηλαδή πατώντας μία φορά το κουμπί εκτελείται η πρώτη εντολή και αν το ξαναπατήσουμε εκτελείται η δεύτερη ,μετά πάλι η πρώτη κλπ..Εδώ χρησιμοποιούμε τις εντολές fadeIn και fadeOut οι οποίες εμφανίζουν και εξαφανίζουν τα στοιχεία με class "ourTitle" δηλαδή τις περιγραφές μας…

Κάπου εδώ τελειώνει αυτό το tutorial..! :

Κατεβάστε τα html και css αρχεία του τελικου παραδείγματος εδώ..

Sign In

Δημιουργία μίας απλής CSS gallery εικόνων + εφέ με jQuery

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity