GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me 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="http://i.imgur.com/fiVofHIh.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/rcivwQJh.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/0nyxX2Lh.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/gptb8xnh.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/oSC4D7Rh.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/9GqSG9ah.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/iMTctrxh.jpgwidth:800px;height:500px;>
<img src="http://i.imgur.com/xHwALvDh.jpgwidth:800px;height:500px;>
</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>

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

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

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