Τρίτη 16 Φεβρουαρίου 2016
Αλλαγή εικόνας με scroll!!
Φίλες και φίλοι γεια σας, ένα ακόμα πολύ ωραίο τρικ για τις φωτογραφίες μας
θα δούμε σε
αυτήν την ανάρτηση με το οποίο κάνοντας scroll πάνω στην εικόνα,
αλλάζει η εικόνα με άλλη δημιουργώντας ένα slideshow σκρολαρίσματος,
αν μπορούμε να το πούμε έτσι!Μοιάζει πολύ με το rollover effect, μόνο
που εδώ η αλλαγή γίνεται με το scroll!Πάμε να δούμε πως γίνεται......
Κάντε scroll πάνω στην φωτογραφία...
θα δούμε σε
αυτήν την ανάρτηση με το οποίο κάνοντας scroll πάνω στην εικόνα,
αλλάζει η εικόνα με άλλη δημιουργώντας ένα slideshow σκρολαρίσματος,
αν μπορούμε να το πούμε έτσι!Μοιάζει πολύ με το rollover effect, μόνο
που εδώ η αλλαγή γίνεται με το scroll!Πάμε να δούμε πως γίνεται......
Κάντε scroll πάνω στην φωτογραφία...
Για να το εφαρμόσετε ...
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript η στο
Html Section της ανάρτησης
και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα
..............................................................................................................
<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
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου