ZOOM SLIDESHOW

ZOOM SLIDESHOW

Το παρακάτω zoom slideshow κάνει zoom in και zoom out εναλλάξ στις εικόνες που περιέχει. Τις διαστάσεις τις ρυθμίζετε εκεί του γράφει width:800px;height:500px; Αν εσείς θέλετε να βάλετε εικόνες αναλογίας π.χ. 3:2 θα αλλάξετε το width: σε 900px; και το height: σε 600px; Πρέπει όμως να αλλάξετε και το margin-left:-400px; σε -450 και το margin-top:-250px; σε -300. Όποια διάσταση δηλαδή δώσετε στο slideshow πρέπει να δώσετε ακριβώς την μισή ½ στα margin-left και margin-top. Για να αλλάξετε τον χρόνο εναλλαγής μεταξύ των εικόνων αλλάξτε το 5000 που βρίσκεται σχεδόν στο τέλος του κώδικα.

<style>

#slideshow {position:relative;width:800px;height:500px;overflow:hidden;border:5px solid #F11111;}

#slideshow img {position:absolute;width:800px;height:500px;top:50%;left:50%;margin-left:-400px;margin-top:-250px; opacity:0;

-webkit-transition-property: opacity,

-webkit-transform; -webkit-transition-duration: 3s, 10s;

-moz-transition-property: opacity,

-moz-transform; -moz-transition-duration: 3s, 10s;

-ms-transition-property: opacity,

-ms-transform; -ms-transition-duration: 3s, 10s;

-o-transition-property: opacity,

-o-transform; -o-transition-duration: 3s, 10s;

transition-property: opacity,

transform; transition-duration: 3s, 10s;}

#slideshow img  {

-webkit-transform-origin: bottom left;

-moz-transform-origin: bottom left;

-ms-transform-origin: bottom left;

-o-transform-origin: bottom left;

transform-origin: bottom left;}

#slideshow :nth-child(2n+1) {

    -webkit-transform-origin: top right;

       -moz-transform-origin: top right;

        -ms-transform-origin: top right;

         -o-transform-origin: top right;

            transform-origin: top right;}

#slideshow :nth-child(3n+1) {

    -webkit-transform-origin: top left;

       -moz-transform-origin: top left;

        -ms-transform-origin: top left;

         -o-transform-origin: top left;

            transform-origin: top left;}

#slideshow :nth-child(4n+1) {

  -webkit-transform-origin: bottom right;

     -moz-transform-origin: bottom right;

      -ms-transform-origin: bottom right;

       -o-transform-origin: bottom right;

          transform-origin: bottom right;}

#slideshow .fx:first-child + img ~ img  {z-index:-1;}

#slideshow .fx {opacity:1;

    -webkit-transform: scale(1.1);

       -moz-transform: scale(1.1);

        -ms-transform: scale(1.1);

         -o-transform: scale(1.1);

            transform: scale(1.1);}

</style>

<div id="slideshow">

<img src="https://lh5.googleusercontent.com/-K7auwzq2lPk/UiiIvU7QHPI/AAAAAAAAJLI/c5aQs1DrUUw/w800-h500-no/LEFKADA-03.jpg">

<img src="https://lh3.googleusercontent.com/-iHpUXMPF_2U/UiiIviNxdII/AAAAAAAAJLM/7Q8ShXmAat0/w800-h500-no/LEYKADA-24.jpg">

<img src="https://lh4.googleusercontent.com/-LB8zka6NnYA/UiiIxk_UOSI/AAAAAAAAJLU/YTAWF35UMF8/w800-h500-no/LEYKADA-33.jpg">

<img src="https://lh4.googleusercontent.com/-RA6WwNSgQZs/UiiI00-Hd4I/AAAAAAAAJLk/wAesP7BV1XY/w800-h500-no/LEYKADA-40.jpg">

<img src="https://lh6.googleusercontent.com/-rYFEmmnBIPc/UiiIsH-kt3I/AAAAAAAAJK0/wxyhIm00mb4/w800-h500-no/LEYKADA-15.jpg">

<img src="https://lh5.googleusercontent.com/-xoRjaryAc9g/UiiJQylwIqI/AAAAAAAAJMU/pmISgNnhBIw/w800-h500-no/KERKYRA-16.jpg">

<img src="https://lh3.googleusercontent.com/-iOVUvdDaKYs/UneTpxlN0_I/AAAAAAAAJtg/WwRlzagKsmQ/w800-h500-no/KEFALONIA-27.JPG">

<img src="https://lh5.googleusercontent.com/-HVjJAI6w9oo/UneTzBuu6UI/AAAAAAAAJuA/Fl47Ee-i42A/w800-h500-no/KEFALONIA-30.jpg">

</div>

<script>

(function(){

document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";

window.setInterval(kenBurns, 5000);            

var images          = document.getElementById('slideshow').getElementsByTagName('img'),

numberOfImages  = images.length,

i  = 1;

function kenBurns() {

if(i==numberOfImages){ i = 0;}

images[i].className = "fx";

if(i===0){ images[numberOfImages-2].className = "";}

if(i===1){ images[numberOfImages-1].className = "";}

if(i>1){ images[i-2].className = "";}

i++;}})();

</script>