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

ΑΠΛΟ SLIDESHOW
ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 6
Αυτό είναι ένα απλό 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
var slideShowSpeed = 4000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'https://i.imgur.com/phbIVY1.jpg'
Pic[1] = 'https://i.imgur.com/Jrw6vMy.jpg'
Pic[2] = 'https://i.imgur.com/V4V4YZI.jpg'
Pic[3] = 'https://i.imgur.com/ylGwxGw.jpg'
Pic[4] = 'https://i.imgur.com/X1GGnpj.jpg'
Pic[5] = 'https://i.imgur.com/HD6dsKg.jpg'  
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=4)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);}
window.onload=runSlideShow;
</script>
<table>
<tr>
<td style="position:absolute;top:0px;left:0px;height:800px;width:450px">
<img src="https://i.imgur.com/HD6dsKg.jpg" name="SlideShow" width="800" height="450"/>
</td>
</tr>
</table>

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

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

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

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