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.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/rcivwQJh.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/0nyxX2Lh.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/gptb8xnh.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/oSC4D7Rh.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/9GqSG9ah.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/iMTctrxh.jpg" width:800px;height:500px;>
<img src="http://i.imgur.com/xHwALvDh.jpg" width: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>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.