SLIDESHOW WITH THUMBNAILS No
3
Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν περάσουμε το ποντίκι μας πάνω από τις μικρογραφίες των εικόνων που εμφανίζονται στο κάτω μέρος του slideshow.
Είναι πολύ απλό και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι
διαστάσεις του slideshow μπορούν να αλλάξουν
αλλάζοντας τα γαλάζια νούμερα στη 2η και 3η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών
των εικόνων αλλάζουν αλλάζοντας τα κίτρινα νούμερα που βρίσκονται αμέσως μετά από τα γαλάζια και πράσινα
links των εικόνων.
Η διάσταση της προβαλόμενης εικόνας στο συγκεγκριμένο slideshow είναι 960px πλάτος για να μην υπάρχουν κενά. Το ύψος της προβαλόμενης εικόνας είναι 600px αλλά το ύψος του slideshow είναι 720px όπως γράφει στην 2η και 3η γραμμή του κώδικα και αυτό γιατί πρέπει να
υπολογιστούν και οι 2 σειρές των εικονιδίων προεσκόπησης των εικόνων τα οποία εικονίδια προεσκόπησης έχουν ύψος 60px για κάθε σειρά οπότε το συνολικό ύψος είναι 720px. Εσείς μπορείτε να αλλάξετε όλες τις διαστάσεις αλλά αναλογικά πάντα. Αλλάξτε επίσης τα γαλάζια και πράσιναlinks των εικόνων μου με τα δικά σας links εικόνων οι οιποίες εικόνες πρέπει να έχουν όλες την ίδια διάσταση για να μην υπάρχουν κενά. Μπορείτε να το δείτε σε λειτουργία πρίν το βάλετε στο τέλος αυτής της ανάρτησης.
<style>
.container {position:relative;width:960px;height:730px;center;overflow:hidden;margin:0 auto;}
.big {position: absolute;top:0px;left:
-960px;
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
-o-transition: left 0.2s ease;
-ms-transition: left 0.2s ease;
transition: left 0.2s ease;}
.featured {left:0px;left:
0px;z-index: -3;}
.container a {float: left;margin: 0px;}
a:hover .big {top: 0px;left:0px;}
</style>
<div class="container">
<img src="http://i.imgur.com/fiVofHI.jpg"
width="960" height="600">
<a href="#"><img
class="thumb" src="http://i.imgur.com/fiVofHI.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/fiVofHI.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/rcivwQJ.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/rcivwQJ.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/0nyxX2L.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/0nyxX2L.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/gptb8xn.jpg" width="96" height="60">
<img class="big" src="http://i.imgur.com/gptb8xn.jpg" width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/oSC4D7R.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/oSC4D7R.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/9GqSG9a.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/9GqSG9a.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/7X4wjWS.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/7X4wjWS.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/kbCkBYe.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/kbCkBYe.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/XZLp5MA.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/XZLp5MA.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/DgCJJQe.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/DgCJJQe.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/1Yul3Hv.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/1Yul3Hv.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/Nq06hwX.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/Nq06hwX.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/Z7B3z0F.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/Z7B3z0F.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/0pOnQXw.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/0pOnQXw.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/W8LjNt5.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/W8LjNt5.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/zamfiLB.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/zamfiLB.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/YezgGht.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/YezgGht.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/l9hrZQQ.jpg"
width="96" height="60">
<img class="big"
src="http://i.imgur.com/l9hrZQQ.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/UMQ2IrD.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/UMQ2IrD.jpg"
width="960" height="600"></a>
<a href="#"><img
class="thumb" src="http://i.imgur.com/1l2cZBC.jpg" width="96" height="60">
<img class="big"
src="http://i.imgur.com/1l2cZBC.jpg"
width="960" height="600"></a></div>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.