SLIDESHOW WITH THUMBNAILS No 1

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

Η διάσταση της προβαλόμενης εικόνας αλλάζει αλλάζοντας το πορτοκαλί νούμερο στην 8^η γραμμή του κώδικα. Αντικαταστήστε τα μώβ 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://i.imgur.com/fiVofHIt.jpg" /><div>

<a href="https://i.imgur.com/fiVofHI.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/fiVofHIh.jpg" alt="ZAKYNTHOS NAYAGIO BEACH" width:960px;height:600px;/></a>

<p>ZAKYNTHOS NAYAGIO BEACH</p></div>

</li><li><img src="https://i.imgur.com/rcivwQJt.jpg"/><div>

<a href="https://i.imgur.com/rcivwQJ.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/rcivwQJh.jpg" alt="LEYKADA PORTO KATSIKI BEACH"/></a>

<p>LEYKADA PORTO KATSIKI BEACH</p></div>

</li><li><img src="https://i.imgur.com/0nyxX2Lt.jpg"/><div>

<a href="https://i.imgur.com/0nyxX2L.jpg title="Click to see full image" target="_blank">

<img src=" https://i.imgur.com/0nyxX2Lh.jpg" alt="KEFALONIA MYRTOS BEACH" /></a>

<p>KEFALONIA MYRTOS BEACH</p></div>

</li><li><img src="https://i.imgur.com/gptb8xnt.jpg" /><div>

<a href="https://i.imgur.com/gptb8xn.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/gptb8xnh.jpg" alt="KRITI MPALOS BEACH" /></a>

<p>KRITI MPALOS BEACH</p></div>

</li><li><img src="https://i.imgur.com/oSC4D7Rt.jpg"/><div>

<a href="https://i.imgur.com/oSC4D7R.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/oSC4D7Rh.jpg" alt="SKIATHOS KOYKOYNARIES BEACH" /></a>

<p>SKIATHOS KOYKOYNARIES BEACH</p></div>

</li><li><img src="https://i.imgur.com/9GqSG9at.jpg" /><div>

<a href="https://i.imgur.com/9GqSG9a.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/9GqSG9ah.jpg" alt="ALONNISOS KOKKINOKASTRO BEACH" /></a>

<p>ALONNISOS KOKKINOKASTRO BEACH</p></div>

</li><li><img src="https://i.imgur.com/7X4wjWSt.jpg" /><div>

<a href="https://i.imgur.com/7X4wjWS.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/7X4wjWSh.jpg" alt="KERKYRA PONTIKONISI VIEW" /></a>

<p>KERKYRA PONTIKONISI VIEW</p></div>

</li><li><img src="https://i.imgur.com/XZLp5MAt.jpg" /><div>

<a href="https://i.imgur.com/XZLp5MA.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/XZLp5MAh.jpg" alt="SAMOS MEGALO SEITANI BEACH" /></a>

<p>SAMOS MEGALO SEITANI BEACH</p></div>

</li><li><img src="https://i.imgur.com/xHwALvDt.jpg" /><div>

<a href="https://i.imgur.com/xHwALvD.jpg" title="Click to see full image" target="_blank">

<img src="https://i.imgur.com/xHwALvDh.jpg" alt="RODOS TSAMPIKA BEACH" /></a>

<p>RODOS TSAMPIKA BEACH</p></div>

</li></ul></div>

• 
  
  ZAKYNTHOS NAYAGIO BEACH
• 
  
  LEYKADA PORTO KATSIKI BEACH
• 
  
  KEFALONIA MYRTOS BEACH
• 
  
  KRITI MPALOS BEACH
• 
  
  SKIATHOS KOYKOYNARIES BEACH
• 
  
  ALONNISOS KOKKINOKASTRO BEACH
• 
  
  KERKYRA PONTIKONISI VIEW
• 
  
  SAMOS MEGALO SEITANI BEACH
• 
  
  RODOS TSAMPIKA BEACH