GADGETS FOR BLOGS

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

ZOOM SLIDESHOW

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>

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

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

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