SLIDESHOW WITH THUMBNAILS No 7

SLIDESHOW WITH THUMBNAILS No 7

Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν πατήσουμε με το ποντίκι μας πάνω στις μικρογραφίες των εικόνων που εμφανίζονται στο κάτω μέρος του slideshow. Είναι πολύ απλό και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας το width:960px; στη 2η γραμμή του κώδικα και το height:600px; στη 3η γραμμή του κώδικα.

Οι διαστάσεις των μικρογραφιών των εικόνων αλλάζουν αλλάζοντας το width="100" height="62" σε κάθε ένα εικονίδιο ξεχωριστά.

Αλλάξτε επίσης τα γαλάζια και πράσινα links των εικόνων μου με τα δικά σας links εικόνων οι οιποίες εικόνες πρέπει να έχουν όλες την ίδια διάσταση για να μην υπάρχουν κενά. Μπορείτε να το δείτε σε λειτουργία πρίν το βάλετε στο τέλος αυτής της ανάρτησης.

<style>

#maincontent {width:960px;margin:0 auto;background:#173377;color:#FFFFFF;}

#gallery-display {height:600px;margin:0 auto;position:relative;overflow:hidden;background: #000;}

#gallery-display img {display:block;margin:0 auto;height:600px;right:0;left:0;}

</style>

<div id="maincontent">

<h3 align="center" >GREEK ISLANDS PHOTOS</h3>

<div id="gallery-display">

<div id="image-1"><img src="http://i.imgur.com/fiVofHIh.jpg" width="960" height="600"/></div>

<div id="image-2"><img src="http://i.imgur.com/gCr4ycDh.jpg" width="960" height="600"/></div>

<div id="image-3"><img src="http://i.imgur.com/qrKer61h.jpg" width="960" height="600"/></div>

<div id="image-4"><img src="http://i.imgur.com/Pq9Dexah.jpg" width="960" height="600"/></div>

<div id="image-5"><img src="http://i.imgur.com/oSC4D7Rh.jpg" width="960" height="600"/></div>

<div id="image-6"><img src="http://i.imgur.com/xHwALvDh.jpg" width="960" height="600"/></div>

<div id="image-7"><img src="http://i.imgur.com/3Jk6C5nh.jpg" width="960" height="600"/></div>

<div id="image-8"><img src="http://i.imgur.com/gptb8xnh.jpg" width="960" height="600"/></div>

<div id="image-9"><img src="http://i.imgur.com/H2PNDWBh.jpg" width="960" height="600"/></div>

<div id="image-10"><img src="http://i.imgur.com/2OIqV1bh.jpg" width="960" height="600"/></div>

<div id="image-11"><img src="http://i.imgur.com/1l2cZBCh.jpg" width="960" height="600"/></div>

<div id="image-12"><img src="http://i.imgur.com/qMMDdhYh.jpg" width="960" height="600"/></div>

<div id="image-13"><img src="http://i.imgur.com/FURuBVWh.jpg" width="960" height="600"/></div>

<div id="image-14"><img src="http://i.imgur.com/tZsqBn7h.jpg" width="960" height="600"/></div>

<div id="image-15"><img src="http://i.imgur.com/n5IesXRh.jpg" width="960" height="600"/></div>

<div id="image-16"><img src="http://i.imgur.com/7X4wjWSh.jpg" width="960" height="600"/></div>

<div id="image-17"><img src="http://i.imgur.com/uFoNudkh.jpg" width="960" height="600"/></div>

<div id="image-18"><img src="http://i.imgur.com/DgCJJQeh.jpg" width="960" height="600"/></div></div>

<div id="gallery-slider-parent">

<div id="gallery-slider">

<a href="#image-1"><img src="http://i.imgur.com/fiVofHIt.jpg" width="100" height="62"/></a>

<a href="#image-2"><img src="http://i.imgur.com/gCr4ycDt.jpg" width="100" height="62"/></a>

<a href="#image-3"><img src="http://i.imgur.com/qrKer61t.jpg" width="100" height="62"/></a>

<a href="#image-4"><img src="http://i.imgur.com/Pq9Dexat.jpg" width="100" height="62"/></a>

<a href="#image-5"><img src="http://i.imgur.com/oSC4D7Rt.jpg" width="100" height="62"/></a>

<a href="#image-6"><img src="http://i.imgur.com/xHwALvDt.jpg" width="100" height="62"/></a>

<a href="#image-7"><img src="http://i.imgur.com/3Jk6C5nt.jpg" width="100" height="62"/></a>

<a href="#image-8"><img src="http://i.imgur.com/gptb8xnt.jpg" width="100" height="62"/></a>

<a href="#image-9"><img src="http://i.imgur.com/H2PNDWBt.jpg" width="100" height="62"/></a>

<a href="#image-10"><img src="http://i.imgur.com/2OIqV1bt.jpg" width="100" height="62"/></a>

<a href="#image-11"><img src="http://i.imgur.com/1l2cZBCt.jpg" width="100" height="62"/></a>

<a href="#image-12"><img src="http://i.imgur.com/qMMDdhYt.jpg" width="100" height="62"/></a>

<a href="#image-13"><img src="http://i.imgur.com/FURuBVWt.jpg" width="100" height="62"/></a>

<a href="#image-14"><img src="http://i.imgur.com/tZsqBn7t.jpg" width="100" height="62"/></a>

<a href="#image-15"><img src="http://i.imgur.com/n5IesXRt.jpg" width="100" height="62"/></a>

<a href="#image-16"><img src="http://i.imgur.com/7X4wjWSt.jpg" width="100" height="62"/></a>

<a href="#image-17"><img src="http://i.imgur.com/uFoNudkt.jpg" width="100" height="62"/></a>

<a href="#image-18"><img src="http://i.imgur.com/DgCJJQet.jpg" width="100" height="62"/></a>

</div></div></div>

GREEK ISLANDS PHOTOS