GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

SLIDESHOW WITH THUMBNAILS No 1

SLIDESHOW
SLIDESHOW WITH THUMBNAILS No 1
Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν περάσουμε τον δείκτη του ποντικιού μας πάνω από τις μικρογραφίες των εικόνων που εμφανίζονται στο πάνω μέρος του slideshow. Περιέχει κώδικα css και html και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα στη 5η και 6η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών των εικόνων αλλάζουν αλλάζοντας τα πράσινα νούμερα στη 43ηκαι 44η γραμμή του κώδικα. 

Η διάσταση της προβαλόμενης εικόνας αλλάζει αλλάζοντας το πορτοκαλί νούμερο στην 37η γραμμή του κώδικα. Αντικαταστήστε τα μώβ links των εικόνων μου με τα δικά σας linksΤο γαλάζιο link αντικαταστήστε το με ένα σύνδεσμο που θα οδηγεί είτε στην ίδια την εικόνα σας είτε σε ένα site που εσείς θέλετε.


<style>
.slideshow {font-family:Arial;width:956px;height:662px;overflow:hidden;background:#115595;color:#FFF;border:2px solid #207907;}
.slideshow > ul {margin: 0;padding: 0;}
.slideshow > ul > li {display:inline;margin:0px;padding:0px;font-size:1px;margin-right:-1px;}
.slideshow > ul > li > div {display: none;text-decoration: none;float:left;}
.slideshow > ul > li > div > p {font-size:12px;text-align:center;padding:10px 0px 0px 0px;margin:0px;color:#FFF;}
.slideshow > ul > li > div > a > img { border:2px solid #FFFF00; width:880px;}
.slideshow  > ul > li > img {border:2px solid #FFFF00;margin:0px;padding:0px; width:90px;height:56px;}
.slideshow > ul > li:hover > div {display: block;}
.slideshow > ul > li:hover > img {border-color:#FF6600;}
</style>

<div class="slideshow">
<ul>
<li><img src="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1152/ALONISOS-01.jpg"/><div>
<a href="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1152/ALONISOS-01.jpg" title="Click to see full image" target="_blank">
<img src="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1152/ALONISOS-01.jpg" alt="ΑΛΟΝΗΣΟΣ-1"/></a>
<p>ΑΛΟΝΗΣΟΣ-1</p></div>
</li><li><img src="https://lh4.googleusercontent.com/-ODPrrWQ77P0/UpPP2nsWnvI/AAAAAAAAKmE/6uPeiuNa55A/s1152/ALONISOS-04.jpg"/><div>
<a href="https://lh4.googleusercontent.com/-ODPrrWQ77P0/UpPP2nsWnvI/AAAAAAAAKmE/6uPeiuNa55A/s1152/ALONISOS-04.jpg" title="Click to see full image" target="_blank">
<img src="https://lh4.googleusercontent.com/-ODPrrWQ77P0/UpPP2nsWnvI/AAAAAAAAKmE/6uPeiuNa55A/s1152/ALONISOS-04.jpg" alt="ΑΛΟΝΗΣΟΣ-4"/></a>
<p>ΑΛΟΝΗΣΟΣ-4</p></div>
</li><li><img src="https://lh3.googleusercontent.com/-sZdPzMRyT0Q/UpPP4s9hSGI/AAAAAAAAKmM/1e-ObaUwBsY/s1152/ALONISOS-05.jpg"/><div>
<a href="https://lh3.googleusercontent.com/-sZdPzMRyT0Q/UpPP4s9hSGI/AAAAAAAAKmM/1e-ObaUwBsY/s1152/ALONISOS-05.jpg" title="Click to see full image" target="_blank">
<img src=" https://lh3.googleusercontent.com/-sZdPzMRyT0Q/UpPP4s9hSGI/AAAAAAAAKmM/1e-ObaUwBsY/s1152/ALONISOS-05.jpg" alt="ΑΛΟΝΗΣΟΣ-5" /></a>
<p>ΑΛΟΝΗΣΟΣ-5</p></div>
</li><li><img src="https://lh3.googleusercontent.com/-RyFIsGNcp4o/UpPQBtOFk9I/AAAAAAAAKms/I_w9wh2ta3Q/s1152/ALONISOS-11.jpg" /><div>
<a href="https://lh3.googleusercontent.com/-RyFIsGNcp4o/UpPQBtOFk9I/AAAAAAAAKms/I_w9wh2ta3Q/s1152/ALONISOS-11.jpg" title="Click to see full image" target="_blank">
<img src="https://lh3.googleusercontent.com/-RyFIsGNcp4o/UpPQBtOFk9I/AAAAAAAAKms/I_w9wh2ta3Q/s1152/ALONISOS-11.jpg" alt="ΑΛΟΝΗΣΟΣ-11" /></a>
<p>ΑΛΟΝΗΣΟΣ-11</p></div>
</li><li><img src="https://lh3.googleusercontent.com/-JOIQugPPxUU/UnedtKA9PDI/AAAAAAAAKC4/D_akLkG26aI/w1224-h765-no/SKIATHOS-22.jpg"/><div>
<a href="https://lh3.googleusercontent.com/-JOIQugPPxUU/UnedtKA9PDI/AAAAAAAAKC4/D_akLkG26aI/w1224-h765-no/SKIATHOS-22.jpg" title="Click to see full image" target="_blank">
<img src="https://lh3.googleusercontent.com/-JOIQugPPxUU/UnedtKA9PDI/AAAAAAAAKC4/D_akLkG26aI/w1224-h765-no/SKIATHOS-22.jpg" alt="ΣΚΙΑΘΟΣ-22" /></a>
<p>ΣΚΙΑΘΟΣ-22</p></div>
</li><li><img src="https://lh3.googleusercontent.com/-3DzeOY6AkqU/UnedthgphWI/AAAAAAAAKC8/NbG49JLQUak/w1224-h765-no/SKIATHOS-23.jpg" /><div>
<a href="https://lh3.googleusercontent.com/-3DzeOY6AkqU/UnedthgphWI/AAAAAAAAKC8/NbG49JLQUak/w1224-h765-no/SKIATHOS-23.jpg" title="Click to see full image" target="_blank">
<img src="https://lh3.googleusercontent.com/-3DzeOY6AkqU/UnedthgphWI/AAAAAAAAKC8/NbG49JLQUak/w1224-h765-no/SKIATHOS-23.jpg" alt="ΣΚΙΑΘΟΣ-23" /></a>
<p>ΣΚΙΑΘΟΣ-23</p></div>
</li><li><img src="https://lh6.googleusercontent.com/-rOVgXxB5jqQ/UKPhWeDrr5I/AAAAAAAAFGE/zKiihG8R4qo/w1224-h765-no/SKIATHOS-01.jpg" /><div>
<a href="https://lh6.googleusercontent.com/-rOVgXxB5jqQ/UKPhWeDrr5I/AAAAAAAAFGE/zKiihG8R4qo/w1224-h765-no/SKIATHOS-01.jpg" title="Click to see full image" target="_blank">
<img src="https://lh6.googleusercontent.com/-rOVgXxB5jqQ/UKPhWeDrr5I/AAAAAAAAFGE/zKiihG8R4qo/w1224-h765-no/SKIATHOS-01.jpg" alt="ΣΚΙΑΘΟΣ-1" /></a>
<p>ΣΚΙΑΘΟΣ-1</p></div>
</li><li><img src="https://lh6.googleusercontent.com/-AG_z3RoIEtU/UKPhkHYOmaI/AAAAAAAAFGg/vGcOLpinQ58/w1224-h765-no/SKIATHOS-04.jpg" /><div>
<a href="https://lh6.googleusercontent.com/-AG_z3RoIEtU/UKPhkHYOmaI/AAAAAAAAFGg/vGcOLpinQ58/w1224-h765-no/SKIATHOS-04.jpg" title="Click to see full image" target="_blank">
<img src="https://lh6.googleusercontent.com/-AG_z3RoIEtU/UKPhkHYOmaI/AAAAAAAAFGg/vGcOLpinQ58/w1224-h765-no/SKIATHOS-04.jpg" alt="ΣΚΙΑΘΟΣ-4" /></a>
<p>ΣΚΙΑΘΟΣ-4</p></div>
</li><li><img src="https://lh3.googleusercontent.com/-BaLHN2zvMfA/Unedm8xQ1uI/AAAAAAAAKCs/nftivsUvIuE/w1224-h765-no/SKIATHOS-20.jpg" /><div>
<a href="https://lh3.googleusercontent.com/-BaLHN2zvMfA/Unedm8xQ1uI/AAAAAAAAKCs/nftivsUvIuE/w1224-h765-no/SKIATHOS-20.jpg" title="Click to see full image" target="_blank">
<img src="https://lh3.googleusercontent.com/-BaLHN2zvMfA/Unedm8xQ1uI/AAAAAAAAKCs/nftivsUvIuE/w1224-h765-no/SKIATHOS-20.jpg" alt="ΣΚΙΑΘΟΣ-20" /></a>
<p>ΣΚΙΑΘΟΣ-20</p></div>
</li></ul></div>

  • ΑΛΟΝΗΣΟΣ-1ΑΛΟΝΗΣΟΣ-1
  • ΑΛΟΝΗΣΟΣ-4ΑΛΟΝΗΣΟΣ-4
  • ΑΛΟΝΗΣΟΣ-5ΑΛΟΝΗΣΟΣ-5
  • ΑΛΟΝΗΣΟΣ-11ΑΛΟΝΗΣΟΣ-11
  • ΣΚΙΑΘΟΣ-22ΣΚΙΑΘΟΣ-22
  • ΣΚΙΑΘΟΣ-23ΣΚΙΑΘΟΣ-23
  • ΣΚΙΑΘΟΣ-1ΣΚΙΑΘΟΣ-1
  • ΣΚΙΑΘΟΣ-4ΣΚΙΑΘΟΣ-4
  • ΣΚΙΑΘΟΣ-20ΣΚΙΑΘΟΣ-20

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

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