SlideShow Thumbnails

TH THUMBNAILS

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



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

- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more

SLIDESHOW WITH THUMBNAILS

SlideShow with Thumbnails

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

Η διάσταση της προβαλόμενης εικόνας αλλάζει αλλάζοντας το πορτοκαλί νούμερο στην 37η γραμμή του κώδικα. Αντικαταστήστε τα μώβ links των εικόνων μου με τα δικά σας links. Το γαλάζιο link αντικαταστήστε το με ένα σύνδεσμο που θα οδηγεί είτε στην ίδια την εικόνα σας είτε σε ένα site που εσείς θέλετε.
- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more




<style type="text/css">
<!--/*Slideshow CSS. */
.slideshow {
 font-family:Arial, Helvetica, sans-serif;
 width:556px;
 height:562px;
 overflow:hidden;
 background-color:#115595;
 color:#FFFFFF;
 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:#FFFFFF;
}
.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;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
 display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.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> - See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more

http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more