Αλλαγή εικόνας με scroll!!

Γειά σας ένα ακόμα πολύ ωραίο τρυκ για τις φωτογραφίες μας θα δούμε σε
αυτήν την ανάρτηση με το οποίο κάνοντας scroll πάνω στην  φωτογραφία,
αλλάζει η φώτο με άλλη δημιουργώντας ένα slideshow σκρολαρίσματος,
αν μπορούμε να το πούμε έτσι!!Μοιάζει πολυ με το rollover effect,μόνο
που εδώ η αλλαγή γίνεται με το scroll!!!Πάμε να δούμε πως γίνεται......


Κάντε scroll πάνω στην φωτογραφία...

Για να το εφαρμόσετε ...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->

.............................................................................................................. 

 <img id="slideshow" src="PICTURE-1" />

<script type="text/javascript">
var myimages=[
"PICTURE-1",
"PICTURE-2",
"PICTURE-3",
"PICTURE-4",
"PICTURE-5"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>
myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll"
 : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>

.........................................................................................................................................
ΑΛΛΑΓΕΣ

Αλλάζετε τα PICTURE  με τις διευθύνσεις των εικόνων σας!!ΠΡΟΣΟΧΗ το
PICTURE-1 με το PICTURE-1 πρέπει να είναι η ίδια εικόνα και οι διαστάσεις
σε όλες τις εικόνες να είναι ίδιες για να φαίνονται ομοιόμορφα!!!

PICTURE-1-->Εδώ βάζετε την διεύθυνση της εικόνας που θα φαίνεται πρώτη!!


"PICTURE-1",-->Εδώ βάζετε πάλι την ίδια εικόνα που βάλατε στο PICTURE-1 να είναι ίδιες!
"PICTURE-2",-->
"PICTURE-3",--->   ΕΔΩ ΒΑΖΕΤΕ ΤΙΣ ΕΙΚΟΝΕΣ ΠΟΥ ΘΈΛΕΤΕ ΓΙΑ ΠΑΡΟΥΣΙΑΣΗ
"PICTURE-4",-->    ΣΤΑ PICTURE 2-3-4-5!!
"PICTURE-5"-->


Εάν θέλετε να βάλετε πιο πολλές εικόνες προσθέστε κάτω από το "PICTURE-5"
"PICTURE-6" "PICTURE-7" κτλ κτλ.....αλλά μην το παρακάνετε γιατί δεν είναι
αυτόματο το slideshow!!
Μόλις τελιώσετε πατήστε Αποθήκευση!!


Καλή επιτυχία!!!!


Πηγή κώδικα




Edit by vaiol!!!!!!