GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

ΠΩΣ ΒΑΖΩ ΑΠΛΟ 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="https://lh4.googleusercontent.com/-zMkXjvF2sVo/VI6-1YMTizI/AAAAAAAAP8g/nDoooHxrP2A/w960-h600-no/SAMOS-50.jpg" width="960" height="600"></div>
<div><img src="https://lh6.googleusercontent.com/-WIP_q6utLFg/VPgR-BhpoxI/AAAAAAAAPlY/xYAY4MfvAIE/w960-h600-no/LEYKADA-24.jpg" width="960" height="600"></div>
<div><img src="https://lh4.googleusercontent.com/--XVgaOXi3jE/UhTJsPzQPAI/AAAAAAAAI1U/g0V_CnJpb0E/w960-h600-no/KERKYRA-16.jpg" width="960" height="600"></div>
<div><img src="https://lh6.googleusercontent.com/-U1SYDXEuglg/UhTDYo1ooyI/AAAAAAAAIuQ/BFAInM46G2M/w960-h600-no/ZAKYNTHOS-13.jpg" width="960" height="600"></div>
<div><img src="https://lh4.googleusercontent.com/-SsVOsOo7Ck8/UhTEq2KOgkI/AAAAAAAAIx8/G-rHBQxmMjA/w960-h600-no/SKOPELOS-30.jpg" width="960" height="600"></div>
<div><img src="https://lh6.googleusercontent.com/-BaLHN2zvMfA/Unedm8xQ1uI/AAAAAAAAKCs/nftivsUvIuE/w960-h600-no/SKIATHOS-20.jpg" width="960" height="600"></div>
<div><img src="https://lh6.googleusercontent.com/-J_Rk_piwwB0/UneUATS4u5I/AAAAAAAAJuw/6JcMeTQs1jI/w960-h600-no/KEFALONIA-38.jpg" width="960" height="600"></div>
</div>

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

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

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