• 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 No 2

SIMPLE-SLIDESHOW
ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 2
Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow χωρίς κουμπιά εναλλαγής μεταξύ των εικόνων, αλλά με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, αρκεί να έχουν όλες την ίδια διάσταση. Αλλάξτε τα ελαφρώς κόκκινα links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζια νούμερα στο width="960" και το height="600". Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το κίτρινο νούμερο 3000.
Η πρώτη γραμμή του κώδικα (jquery) καλό είναι να μπεί μέσα στο πρότυπο πρίν την ετικέτα </head>. Μπορείτε να βάλετε τον κώδικα και όπως είναι σαν gadget απλά προσέξτε να μην υπάρχει και 2η φορά από άλλο gadget η πρώτη γραμμή κώδικα (jquery) μέσα στοblog σας.


ΔΕΙΤΕ ΕΔΩ ΠΩΣ ΛΕΙΤΟΥΡΓΕΙ ΣΕ ENA DEMO BLOG

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
#slideshow > div {position:absolute;top:0px;left:0px;}
</style>
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');},  3000);
</script>
<div id="slideshow">
<div><img src="http://i.imgur.com/fiVofHIh.jpg" width="960" height="600"></div>
<div><img src="http://i.imgur.com/rcivwQJh.jpg" width="960" height="600"></div>
<div><img src="http://i.imgur.com/0nyxX2Lh.jpg" width="960" height="600"></div>
<div><img src="http://i.imgur.com/gptb8xnh.jpg" width="960" height="600"></div>
<div><img src="http://i.imgur.com/oSC4D7Rl.jpg" width="960" height="600"></div>
<div><img src="http://i.imgur.com/9GqSG9al.jpg" width="960" height="600"></div>
<div><img src="http://i.imgur.com/iMTctrxh.jpg" width="960" height="600"></div>
</div>

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

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

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

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