ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 3

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 3

Αυτό είναι ένα απλό slideshow που μπορεί να μπεί σε μία κενή html σελίδα του blogger ή σε μία καθαρή html σελίδα σε κάποιον html editor ή στο github διότι εμφανίζεται σε absolute position. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον μία κενή html σελίδα του blogger όπου θα έχετε καθαρίσει το style της. Τα κίτρινα links των εικόνων του slideshow αλλάξτε τα με τα δικά σας links εικόνων.

Καλό θα είναι οι εικόνες σας να έχουν ένα σύντομο link όπως βλέπετε στον παρακάτω κώδικα και να έχουν την δυνατότητα για να φορτώνουν μικρότερα μεγέθη εικόνας για ταχύτερη φόρτωση του slideshow. Αυτό μπορείτε να το πετύχετε αν ανεβάσετε τις εικόνες σας στο imgur.com το οποίο προσφέρει και σύντομα link εικόνων και πολλά και διαφορετικά μεγέθη εικόνων ώστε να μή φορτώνεται το αρχικό μέγεθος της εικόνας π.χ. 1980Χ1080 αλλά ένα μικρότερο κοντά σε αυτό που θα φαίνεται εντός της σελίδας που θα εμφανίζεται το συγκεκριμένο slideshow π.χ. 800Χ450.

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ΕΔΩ ►

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeIn(2000) .next() .fadeOut(1000) .end() .appendTo('#slideshow'); },3000); </script> <style> #slideshow > div{position:absolute;top:0px;left:0px;right:0px;bottom:0px;} </style> <div id="slideshow"> <div><img src="https://i.imgur.com/UKrGMoA.jpg" width="800" height="450"></div> <div><img src="https://i.imgur.com/phbIVY1.jpg" width="800" height="450"></div> <div><img src="https://i.imgur.com/Jrw6vMy.jpg" width="800" height="450"></div> <div><img src="https://i.imgur.com/pxOfj7v.jpg" width="800" height="450"></div> <div><img src="https://i.imgur.com/1OB6MoL.jpg" width="800" height="450"></div> <div><img src="https://i.imgur.com/okL2Ovk.jpg" width="800" height="450"></div> </div>