• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

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

SIMPLE SLIDESHOW
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 ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG ►

<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>

5 σχόλια:

  1. 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.

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Στην 7η γραμμή απο το τέλος εκεί που λέει top:50% κάντο bottom: -25px;

      Διαγραφή
  2. 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/

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Καλά το έχεις στο κέντρο είναι, αλλά το οριζόντιο μενού καλό θα ήταν να πάει ακριβώς πάνω απο τις αναρτήσεις.

      Διαγραφή

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

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.