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 με το δικό σας το διορθωμένο.
<div class="bss-slides">
<figure><img src="http://i.imgur.com/UMQ2IrD.jpg"
alt="ALONISOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/UMQ2IrD.jpg"
target="_blank">ALONISOS-1</a></figcaption></figure>
<figure><img src="http://i.imgur.com/9GqSG9a.jpg"
alt="ALONISOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/9GqSG9a.jpg"
target="_blank">ALONISOS-2</a></figcaption></figure>
<figure><img src="http://i.imgur.com/1l2cZBC.jpg"
alt="ALONISOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/1l2cZBC.jpg"
target="_blank">ALONISOS-3</a></figcaption></figure>
<figure><img src="http://i.imgur.com/l9hrZQQ.jpg"
alt="ALONISOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/l9hrZQQ.jpg"
target="_blank">ALONISOS-4</a></figcaption></figure>
<figure><img src="http://i.imgur.com/YezgGht.jpg"
alt="ALONISOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/YezgGht.jpg"
target="_blank">ALONISOS-5</a></figcaption></figure>
<figure><img src="http://i.imgur.com/zamfiLB.jpg"
alt="ALONISOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/zamfiLB.jpg"
target="_blank">ALONISOS-6</a></figcaption></figure>
<figure><img src="http://i.imgur.com/oSC4D7R.jpg"
alt="SKIATHOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/oSC4D7R.jpg"
target="_blank">SKIATHOS-1</a></figcaption></figure>
<figure><img src="http://i.imgur.com/W8LjNt5.jpg"
alt="SKIATHOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/W8LjNt5.jpg"
target="_blank">SKIATHOS-2</a></figcaption></figure>
<figure><img src="http://i.imgur.com/0pOnQXw.jpg"
alt="SKIATHOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/0pOnQXw.jpg"
target="_blank">SKIATHOS-3</a></figcaption></figure>
<figure><img src="http://i.imgur.com/1Yul3Hv.jpg"
alt="SKIATHOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/1Yul3Hv.jpg"
target="_blank">SKIATHOS-4</a></figcaption></figure>
<figure><img src="http://i.imgur.com/Nq06hwX.jpg"
alt="SKIATHOS" width="880" height="550"
/>
<figcaption><a href="http://i.imgur.com/Nq06hwX.jpg"
target="_blank">SKIATHOS-5</a></figcaption></figure>
<figure><img src="http://i.imgur.com/Z7B3z0F.jpg"
alt="SKIATHOS" width="880" height="550"
/>
<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>
<script src='https://github-codes.github.io/mycodes/javascripts/Slideshow-4.js'></script>
kalhspera paidia tha ithela na mou peite an mporw na metafero ta velakia katw apo thn eikona anti na einai sto plai. syxaritiria gia thn doulia pou kanete mathenoume polla pragmata apo esas.
ΑπάντησηΔιαγραφήΣτην 7η γραμμή απο το τέλος εκεί που λέει top:50% κάντο bottom: -25px;
Διαγραφήse euxaristo poly egine
ΑπάντησηΔιαγραφήkalhspera tha ithela na mou peis thn gnomi sou to slide ekei pou to exw pos to vlepeis einai ok h xriazete na kanw kapia allagi kalo mesimeri!!! http://radio-music-news.blogspot.gr/
ΑπάντησηΔιαγραφήΚαλά το έχεις στο κέντρο είναι, αλλά το οριζόντιο μενού καλό θα ήταν να πάει ακριβώς πάνω απο τις αναρτήσεις.
Διαγραφή