SLIDESHOW WITH
THUMBNAILS No 4
Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του
ορίσουμε όταν πατήσουμε με το ποντίκι μας πάνω στις μικρογραφίες των εικόνων
που εμφανίζονται στο κάτω μέρος του slideshow.
Είναι πολύ απλό και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι
διαστάσεις του slideshow μπορούν να αλλάξουν
αλλάζοντας τα γαλάζια νούμερα στη 2η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών
των εικόνων αλλάζουν αλλάζοντας το γαλάζιο νούμερο
που βρίσκεται αμέσως μετά από το γαλάζιο link των εικόνων.
Η διάσταση της προβαλόμενης
εικόνας στο συγκεγκριμένο slideshow είναι 960px πλάτος για να
μην υπάρχουν κενά. Το ύψος της προβαλόμενης εικόνας είναι 600px αλλά το ύψος
του slideshow είναι 630px όπως γράφει στην 2η γραμμή
του κώδικα και αυτό γιατί πρέπει να υπολογιστεί και το κενό των 30px μεταξυ του slideshow και των
εικονιδίων προεσκόπησης των εικόνων, τα οποία εικονίδια προεσκόπησης έχουν ύψος
60px για
κάθε σειρά οπότε το συνολικό ύψος είναι 750px. Εσείς μπορείτε να αλλάξετε όλες τις διαστάσεις αλλά
αναλογικά πάντα. Αλλάξτε επίσης τα γαλάζια και πράσινα links των
εικόνων μου με τα δικά σας links εικόνων οι
οιποίες εικόνες πρέπει να έχουν όλες την ίδια διάσταση για να μην υπάρχουν
κενά. Μπορείτε να το δείτε σε λειτουργία πρίν το βάλετε στο τέλος αυτής της
ανάρτησης.
<style>
.slider{width:960px;position:relative;padding-top:630px;margin:0px;box-shadow:rgba (0,0,30,0.95);}
.slider>img{position: absolute;left:
0; top: 0;transition:
all 0.5s;}
.slider input[name='slide_switch']
{display: none;}
.slider label {margin:0;float: left;cursor: pointer;transition: all 0.5s;}
.slider label img{display: block;}
.slider input[name='slide_switch']:checked+label
{opacity: 1;}
.slider input[name='slide_switch']
~ img {opacity:0;transform: scale(1.1);}
.slider input[name='slide_switch']:checked+label+img
{opacity: 1;transform: scale(1);}
</style>
<div class="slider">
<input type="radio"
name="slide_switch" id="id1"
checked="checked"/><label
for="id1">
<img src="http://i.imgur.com/fiVofHI.jpg"
width="96"/></label>
<img src="http://i.imgur.com/fiVofHI.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id2"/><label
for="id2">
<img src="http://i.imgur.com/rcivwQJ.jpg"
width="96"/></label>
<img src="http://i.imgur.com/rcivwQJ.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id3"/><label
for="id3">
<img src="http://i.imgur.com/0nyxX2L.jpg"
width="96"/></label>
<img src="http://i.imgur.com/0nyxX2L.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id4"/><label
for="id4">
<img src="http://i.imgur.com/gptb8xn.jpg"
width="96"/></label>
<img src="http://i.imgur.com/gptb8xn.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id5"/><label
for="id5">
<img src="http://i.imgur.com/oSC4D7R.jpg"
width="96"/></label>
<img src="http://i.imgur.com/oSC4D7R.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id6"/><label
for="id6">
<img src="http://i.imgur.com/9GqSG9a.jpg"
width="96"/></label>
<img src="http://i.imgur.com/9GqSG9a.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id7"/><label
for="id7">
<img src="http://i.imgur.com/7X4wjWS.jpg"
width="96"/></label>
<img src="http://i.imgur.com/7X4wjWS.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id8"/><label
for="id8">
<img src="http://i.imgur.com/kbCkBYe.jpg"
width="96"/></label>
<img src="http://i.imgur.com/kbCkBYe.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id9"/><label
for="id9">
<img src="http://i.imgur.com/XZLp5MA.jpg"
width="96"/></label>
<img src="http://i.imgur.com/XZLp5MA.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id10"/><label
for="id10">
<img src="http://i.imgur.com/uFoNudk.jpg"
width="96"/></label>
<img src="http://i.imgur.com/uFoNudk.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id11"/><label
for="id11">
<img src="http://i.imgur.com/DgCJJQe.jpg"
width="96"/></label>
<img src="http://i.imgur.com/DgCJJQe.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id12"/><label
for="id12">
<img src="http://i.imgur.com/1Yul3Hv.jpg"
width="96"/></label>
<img src="http://i.imgur.com/1Yul3Hv.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id13"/><label
for="id13">
<img src="http://i.imgur.com/Nq06hwX.jpg"
width="96"/></label>
<img src="http://i.imgur.com/Nq06hwX.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id14"/><label
for="id14">
<img src="http://i.imgur.com/0pOnQXw.jpg"
width="96"/></label>
<img src="http://i.imgur.com/0pOnQXw.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id15"/><label
for="id15">
<img src="http://i.imgur.com/W8LjNt5.jpg"
width="96"/></label>
<img src="http://i.imgur.com/W8LjNt5.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id16"/><label
for="id16">
<img src="http://i.imgur.com/zamfiLB.jpg"
width="96"/></label>
<img src="http://i.imgur.com/zamfiLB.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id17"/><label
for="id17">
<img src="http://i.imgur.com/YezgGht.jpg"
width="96"/></label>
<img src="http://i.imgur.com/YezgGht.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id18"/><label
for="id18">
<img src="http://i.imgur.com/l9hrZQQ.jpg"
width="96"/></label>
<img src="http://i.imgur.com/l9hrZQQ.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id19"/><label
for="id19">
<img src="http://i.imgur.com/UMQ2IrD.jpg"
width="96"/></label>
<img src="http://i.imgur.com/UMQ2IrD.jpg"
width="960"/>
<input type="radio"
name="slide_switch" id="id20"/><label
for="id20">
<img src="http://i.imgur.com/1l2cZBC.jpg"
width="96"/></label>
<img src="http://i.imgur.com/1l2cZBC.jpg"
width="960"/></div>
