GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

SLIDESHOW WITH THUMBNAILS No 1

SLIDESHOW
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="http://i.imgur.com/fiVofHIt.jpg" /><div>
<a href="http://i.imgur.com/fiVofHI.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/fiVofHIh.jpg" alt="ZAKYNTHOS NAYAGIO BEACHwidth:960px;height:600px;/></a>
<p>ZAKYNTHOS NAYAGIO BEACH</p></div>
</li><li><img src="http://i.imgur.com/rcivwQJt.jpg"/><div>
<a href="http://i.imgur.com/rcivwQJ.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/rcivwQJh.jpg" alt="LEYKADA PORTO KATSIKI BEACH"/></a>
<p>LEYKADA PORTO KATSIKI BEACH</p></div>
</li><li><img src="http://i.imgur.com/0nyxX2Lt.jpg"/><div>
<a href="http://i.imgur.com/0nyxX2L.jpg title="Click to see full image" target="_blank">
<img src=" http://i.imgur.com/0nyxX2Lh.jpg" alt="KEFALONIA MYRTOS BEACH" /></a>
<p>KEFALONIA MYRTOS BEACH</p></div>
</li><li><img src="http://i.imgur.com/gptb8xnt.jpg" /><div>
<a href="http://i.imgur.com/gptb8xn.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/gptb8xnh.jpg" alt="KRITI MPALOS BEACH" /></a>
<p>KRITI MPALOS BEACH</p></div>
</li><li><img src="http://i.imgur.com/oSC4D7Rt.jpg"/><div>
<a href="http://i.imgur.com/oSC4D7R.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/oSC4D7Rh.jpg" alt="SKIATHOS KOYKOYNARIES BEACH" /></a>
<p>SKIATHOS KOYKOYNARIES BEACH</p></div>
</li><li><img src="http://i.imgur.com/9GqSG9at.jpg" /><div>
<a href="http://i.imgur.com/9GqSG9a.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/9GqSG9ah.jpg" alt="ALONNISOS KOKKINOKASTRO BEACH" /></a>
<p>ALONNISOS KOKKINOKASTRO BEACH</p></div>
</li><li><img src="http://i.imgur.com/7X4wjWSt.jpg" /><div>
<a href="http://i.imgur.com/7X4wjWS.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/7X4wjWSh.jpg" alt="KERKYRA PONTIKONISI VIEW" /></a>
<p>KERKYRA PONTIKONISI VIEW</p></div>
</li><li><img src="http://i.imgur.com/XZLp5MAt.jpg" /><div>
<a href="http://i.imgur.com/XZLp5MA.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/XZLp5MAh.jpg" alt="SAMOS MEGALO SEITANI BEACH" /></a>
<p>SAMOS MEGALO SEITANI BEACH</p></div>
</li><li><img src="http://i.imgur.com/xHwALvDt.jpg" /><div>
<a href="http://i.imgur.com/xHwALvD.jpg" title="Click to see full image" target="_blank">
<img src="http://i.imgur.com/xHwALvDh.jpg" alt="RODOS TSAMPIKA BEACH" /></a>
<p>RODOS TSAMPIKA BEACH</p></div>
</li></ul></div>

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

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

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

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