• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

SLIDESHOW WITH THUMBNAILS No 2

SLIDESHOW WITH THUMBNAILS
SLIDESHOW WITH THUMBNAILS No 2
Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν πατήσουμε διπλό κλίκ με το ποντίκι μας πάνω στις μικρογραφίες των εικόνων που εμφανίζονται στο κάτω μέρος του slideshow. Είναι πολύ απλό και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα στη 4η και 5η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών των εικόνων αλλάζουν αλλάζοντας τα κίτρινα νούμερα στη 20η και 21η γραμμή του κώδικα.

Η διάσταση της προβαλόμενης εικόνας στο συγκεγκριμένο slideshow πρέπει να είναι 960px πλάτος για να μην υπάρχουν κενά. Το ύψος της προβαλόμενης εικόνας είναι 600px αλλά το ύψος του slideshow είναι 724px όπως γράφει στην 5η γραμμή του κώδικα και αυτό γιατί πρέπει να υπολογιστούν και οι 2 σειρές των εικονιδίων προεσκόπησης των εικόνων τα οποία εικονίδια προεσκόπησης έχουν ύψος 59px για κάθε σειρά οπότε το συνολικό ύψος + τα περιγράμματα φτάνει τα 724px. Εσείς μπορείτε να αλλάξετε όλες τις διαστάσεις αλλά αναλογικά πάντα. Αλλάξτε επίσης τα μώβ και τα πορτακαλί links των εικόνων μου με τα δικά σας links εικόνων οι οιποίες εικόνες πρέπει να έχουν όλες την ίδια διάσταση για να μην υπάρχουν κενά. Μπορείτε να το δείτε σε λειτουργία πρίν το βάλετε στο τέλος αυτής της ανάρτησης.

<style>
.slider {background: #115595;width: 960px;height: 724px;padding: 1px;position:relative; top: 0px;overflow: hidden;}
.images {background: #115595;width: 100%;height: 100%;transition: background .5s linear;}
input[type='radio'] {-webkit-appearance: none;appearance: none;background-color: #115595;  background-size: 94px 59px;width: 94px;height: 59px; margin: 1px;cursor: pointer;position: relative;float: left;top: 601px;}
input[type='radio']:checked {content: ''; border: solid 1px #4EFF44; box-shadow: none;  -webkit-filter: none;}
input[type='radio']:hover{border: solid 1px #4EFF44; -webkit-filter: none; transform: scale(1.05); z-index: 9999;}
.slide1 {background: url(http://i.imgur.com/fiVofHIt.jpg);}
.slide2 {background: url(http://i.imgur.com/gCr4ycDt.jpg);}
.slide3 {background: url(http://i.imgur.com/qrKer61t.jpg);}
.slide4 {background: url(http://i.imgur.com/Pq9Dexat.jpg);}
.slide5 {background: url(http://i.imgur.com/oSC4D7Rt.jpg);}
.slide6 {background: url(http://i.imgur.com/xHwALvDt.jpg);}
.slide7 {background: url(http://i.imgur.com/3Jk6C5nt.jpg);}
.slide8 {background: url(http://i.imgur.com/gptb8xnt.jpg);}
.slide9 {background: url(http://i.imgur.com/H2PNDWBt.jpg);}
.slide10 {background: url(http://i.imgur.com/2OIqV1bt.jpg);}
.slide11 {background: url(http://i.imgur.com/1l2cZBCt.jpg);}
.slide12 {background: url(http://i.imgur.com/qMMDdhYt.jpg);}
.slide13 {background: url(http://i.imgur.com/FURuBVWt.jpg);}
.slide14 {background: url(http://i.imgur.com/tZsqBn7t.jpg);}
.slide15 {background: url(http://i.imgur.com/n5IesXRt.jpg);}
.slide16 {background: url(http://i.imgur.com/7X4wjWSt.jpg);}
.slide17 {background: url(http://i.imgur.com/0M4jTZTt.jpg);}
.slide18 {background: url(http://i.imgur.com/C83SL17t.jpg);}
.slide19 {background: url(http://i.imgur.com/QWjXsdPt.jpg);}
.slide20 {background: url(http://i.imgur.com/15wHDCct.jpg);}
.slide1:checked ~ .images {background: url(http://i.imgur.com/fiVofHIh.jpg);}
.slide2:checked ~ .images {background: url(http://i.imgur.com/gCr4ycDh.jpg);}
.slide3:checked ~ .images {background: url(http://i.imgur.com/qrKer61h.jpg);}
.slide4:checked ~ .images {background: url(http://i.imgur.com/Pq9Dexah.jpg);}
.slide5:checked ~ .images {background: url(http://i.imgur.com/oSC4D7Rh.jpg);}
.slide6:checked ~ .images {background: url(http://i.imgur.com/xHwALvDh.jpg);}
.slide7:checked ~ .images {background: url(http://i.imgur.com/3Jk6C5nh.jpg);}
.slide8:checked ~ .images {background: url(http://i.imgur.com/gptb8xnh.jpg);}
.slide9:checked ~ .images {background: url(http://i.imgur.com/H2PNDWBh.jpg);}
.slide10:checked ~ .images {background: url(http://i.imgur.com/2OIqV1bh.jpg);}
.slide11:checked ~ .images {background: url(http://i.imgur.com/1l2cZBCh.jpg);}
.slide12:checked ~ .images {background: url(http://i.imgur.com/qMMDdhYh.jpg);}
.slide13:checked ~ .images {background: url(http://i.imgur.com/FURuBVWh.jpg);}
.slide14:checked ~ .images {background: url(http://i.imgur.com/tZsqBn7h.jpg);}
.slide15:checked ~ .images {background: url(http://i.imgur.com/n5IesXRh.jpg);}
.slide16:checked ~ .images {background: url(http://i.imgur.com/7X4wjWSh.jpg);}
.slide17:checked ~ .images {background: url(http://i.imgur.com/0M4jTZTh.jpg);}
.slide18:checked ~ .images {background: url(http://i.imgur.com/C83SL17h.jpg);}
.slide19:checked ~ .images {background: url(http://i.imgur.com/QWjXsdPh.jpg);}
.slide20:checked ~ .images {background: url(http://i.imgur.com/15wHDCch.jpg);}
</style>
<div class='slider'>
<input checked='' class='slide1' name='thumbnail' type='radio' />
<input class='slide2' name='thumbnail' type='radio' />
<input class='slide3' name='thumbnail' type='radio' />
<input class='slide4' name='thumbnail' type='radio' />
<input class='slide5' name='thumbnail' type='radio' />
<input class='slide6' name='thumbnail' type='radio' />
<input class='slide7' name='thumbnail' type='radio' />
<input class='slide8' name='thumbnail' type='radio' />
<input class='slide9' name='thumbnail' type='radio' />
<input class='slide10' name='thumbnail' type='radio' />
<input class='slide11' name='thumbnail' type='radio' />
<input class='slide12' name='thumbnail' type='radio' />
<input class='slide13' name='thumbnail' type='radio' />
<input class='slide14' name='thumbnail' type='radio' />
<input class='slide15' name='thumbnail' type='radio' />
<input class='slide16' name='thumbnail' type='radio' />
<input class='slide17' name='thumbnail' type='radio' />
<input class='slide18' name='thumbnail' type='radio' />
<input class='slide19' name='thumbnail' type='radio' />
<input class='slide20' name='thumbnail' type='radio' />
<div class='images'></div>
</div>



1 σχόλιο:

  1. ευχαριστώ για την ανάρτηση. έχεις κάνει καταπληκτική δουλειά :)

    ΑπάντησηΔιαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.