SLIDESHOW ΜΕ ΚΟΥΜΠΙΑ ΠΛΟΗΓΗΣΗΣ, ΠΕΡΙΓΡΑΦΗ ΚΑΙ LINK

SLIDESHOW ΜΕ ΚΟΥΜΠΙΑ ΠΛΟΗΓΗΣΗΣ, ΠΕΡΙΓΡΑΦΗ ΚΑΙ LINK

Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε, και σε κάθε μία από αυτές να εμφανίζεται κάτω δεξιά η περιγραφή που θέλετε η οποία μπορεί να είναι αν θέλετε και ενεργό link που ανοίγει σε νέα καρτέλα. Το συγκεκριμένο slideshow διαθέτει και κουμπιά πλοήγησης για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του. Αλλάξετε τα πράσινα και γαλάζια links μου με τα δικά σας links εικόνων. Τις διαστάσεις του slideshow τις αλλάζετε στην πρώτη γραμμή του κώδικα css (style) εκεί που γράφει width:960px; height:580px;

Τις διαστάσεις των εικόνων οι οποίες πρέπει να είναι μικρότερες από το σκελετό του slideshow τις αλλάζετε σε κάθε μία εικόνα ξεχωριστά μετά το alt="ALONISOS" που γράφει width="880" height="550". Ο χρόνος εναλλαγής είναι μέσα στο script και για να τον αλλάξετε θα πρέπει να κατεβάσετε το script, να αλλάξετε τον χρόνο εναλλαγής από 3500 σε μεγαλύτερο ή μικρότερο και μετά να το ανεβάσετε στο δικό σας googledrive και να αντικαταστήσετε το link του δικού μου script με το δικό σας το διορθωμένο. Δείτε πως θα είναι το slideshow σε λειτουργία ακριβώς κάτω από εδώ.

<figcaption><a href="http://i.imgur.com/UMQ2IrD.jpg" target="_blank">ALONISOS-1</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/9GqSG9a.jpg" target="_blank">ALONISOS-2</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/1l2cZBC.jpg" target="_blank">ALONISOS-3</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/l9hrZQQ.jpg" target="_blank">ALONISOS-4</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/YezgGht.jpg" target="_blank">ALONISOS-5</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/zamfiLB.jpg" target="_blank">ALONISOS-6</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/oSC4D7R.jpg" target="_blank">SKIATHOS-1</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/W8LjNt5.jpg" target="_blank">SKIATHOS-2</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/0pOnQXw.jpg" target="_blank">SKIATHOS-3</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/1Yul3Hv.jpg" target="_blank">SKIATHOS-4</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/Nq06hwX.jpg" target="_blank">SKIATHOS-5</a></figcaption></figure>

<figcaption><a href="http://i.imgur.com/Z7B3z0F.jpg" target="_blank">SKIATHOS-6</a></figcaption></figure>

</div>

<style>

.bss-slides{background: #transparent;position: relative; width:960px; height:580px; display: block;}

.bss-slides:focus{outline: 0;}

.bss-slides figure{position: absolute;top: 0;}

.bss-slides figure:first-child{position: absolute;top: 0;}

.bss-slides figure img{opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s;}

.bss-slides .bss-show img{opacity:1;}

.bss-slides figcaption{position: absolute;font:13px Arial;bottom:8px;right:8px;padding:6px; color: #fff; background: rgba(0,0,0, .50); border-radius: 2px; opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s;}

.bss-slides .bss-show figcaption{ z-index: 2;opacity: 1;}

.bss-slides figcaption a{color: #FFFFFF;}

.bss-next, .bss-prev{color: #FFFFFF; position: absolute; background:#A11111; top: 50%; z-index: 1; font: 13px Arial; margin-top: -1.2em; opacity: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.bss-next:hover, .bss-prev:hover{ background:#255720; cursor: pointer; opacity: 1;}

.bss-next{right: 0; padding: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

.bss-prev{left: 0; padding: 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}

</style>