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

ΑΠΛΟ SLIDESHOW
ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW No 5
Αυτό είναι ένα απλό slideshow που μπορεί να μπεί είτε σαν gadget είτε μέσα στον κώδικα της σελίδας σας. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον εκεί που θέλετε να εμφανίζεται το slideshow. Τα κίτρινα 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<style>
* {box-sizing: border-box;}
body {background:#115599;font-family:Arial;}
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {max-width: 100%;position: relative;margin:0;}
.text {background:rgba(0,0,0, 0.7);color:#FFF;font:16px arial;padding:8px;position:absolute;bottom:1px;width:auto;text-align: center;}
.numbertext {color: #FF0000;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.dot {height: 15px;width: 15px;margin: 0 2px;background-color: #FF0000;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
.active {background-color: #009900;}
.fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
@media only screen and (max-width: 300px) {.text {font-size: 11px}}
</style>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="https://i.imgur.com/phbIVY1.jpg" style="width:100%">
<div class="text">SANTORINI-1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="https://i.imgur.com/Jrw6vMy.jpg" style="width:100%">
<div class="text">SANTORINI-2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="https://i.imgur.com/KGh0xkb.jpg" style="width:100%">
<div class="text">KERKYRA-1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="https://i.imgur.com/OWulAvD.jpg" style="width:100%">
<div class="text">KERKYRA-2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="https://i.imgur.com/KX8ScuV.jpg" style="width:100%">
<div class="text">KERKYRA-3</div>
</div>
</div>
<div style="text-align:center">
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span>   
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";}
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");}
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 3000);}
</script>

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

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

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

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