Slideshow σε javascript

Θέλετε την γνώμη των άλλων για την σελίδα σας; Τότε βρίσκεστε στο σωστό μέρος.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
bxd
Δημοσιεύσεις: 34
Εγγραφή: 10 Αύγ 2007 18:59

Slideshow σε javascript

Δημοσίευση από bxd » 10 Αύγ 2007 19:07

Ένα προντζεκτάκι που ξεκίνησα πρόσφατα για την δημιουργία slideshow σε javascript.

Σχόλια, γνώμες very much welcome

====== UPDATE ============

Καταραμένο copy-paste :P

Το link είναι:

projects.littlewebthings.com/slideshow/

====== /UPDATE ============
Τελευταία επεξεργασία από το μέλος bxd την 10 Αύγ 2007 19:23, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Slideshow σε javascript

Δημοσίευση από skeftomilos » 10 Αύγ 2007 19:20

Welcome bxd. :-)

Κάπου ξεχάστηκε το url μάλλον, εκτός αν είναι τόσο μικρό που δεν το βλέπω. :-P
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Slideshow σε javascript

Δημοσίευση από skeftomilos » 10 Αύγ 2007 21:47

Nice job Bill! Αρκετά αξιόλογη η library, και πολύ ωραία η παρουσίαση. Τα θετικά της στοιχεία είναι περισσότερα από τα αρνητικά.

Οπότε ας ασχοληθούμε με τα αρνητικά. :-P

- Το script δεν είναι εντελώς unobtrusive. Απαιτεί έξτρα markup με συγκεκριμένα ids (π.χ. id="the_image").
- Όταν το scripting είναι disabled οι εικόνες δεν είναι προσβάσιμες (εκτός από την πρώτη).
- Με styles disabled γίνεται μόνιμα εμφανές το "Loading..." animated gif.
- Με images disabled δεν υπάρχει πρόβλεψη για εναλλακτικό κείμενο (alt attribute).
- Το <a href="#"> με disabled scripting δεν είναι κομψό. Προτιμότερο το <a href="javascript:void(0)">.
- Αντί για <a href="javascript:slideShow.next()"> καλύτερα ο κώδικας να μπαίνει στο onclick, και να επιστρέφει false για να μην κάνει ήχο ο IE.
- Το window.onload συμβαίνει μετά το φόρτωμα όλων των images. Η ενεργοποίηση του script θα καθυστερήσει πολύ σε μια βαριά σελίδα.
- Το href="javascript:slideShow.next() σημαίνει ότι αν γίνει κλικ πριν τη δημιουργία του αντικειμένου slideShow θα προκύψει script run-time error.
- Το εφέ λειτουργεί άψογα μόνο στον Firefox λόγω χρήσης της browser specific ιδιότητας MozOpacity. Στον IE6 υπάρχει κι ένα προβληματάκι με τη θέση του "Loading..." image., ενώ στον Opera 9.20 συμβαίνει ένα διαφορετικό quirkάκι στο τελείωμα του εφέ.
- Η χρήση της Function.apply() σημαίνει ότι το script θα αποτύχει στον IE5.
- Γίνεται περιττή χρήση του try-catch. Αν φύγουν τα try-catch θα αποφευχθούν parsing errors στον IE4.
- Αν για κάποιο λόγο μια εικόνα κολλήσει στον server, το Loading... συνεχίζεται επ' άπειρο. Καλό θα ήταν να παγιδευτεί το img.onerror.
- Μικρό memory leak στον IE6.
- Το tile2.onload είναι μάλλον περιττό αφού το tile2 είναι div.
- Και το tile.className = 'outerGrid'; μάλλον δε χρειάζεται.
- Γίνεται τόσο συχνή χρήση της document.getElementById, που θα ήταν βολική η ρουτίνα $():

Κώδικας: Επιλογή όλων

function $&#40;id&#41; &#123;return document.getElementById&#40;id&#41;&#125;
- Οι ρουτίνες flip και flip_h καταλαμβάνουν χώρο στο global namespace χωρίς ιδιαίτερο λόγο. Αυτό είναι ίσως το πιο σοβαρό ελάττωμα.

Στην αρχική σελίδα του demo (Overview), το εφέ ίσως να ήταν πιο ωραίο στο μάτι αν άρχιζε από αντίθετες κατευθύνσεις στα next και previous.

Αυτά τα ολίγα. :-)

Btw, πόσο καιρό σου πήρε να το γράψεις, και ποια είναι η κύρια γλώσσα στην οποία ειδικεύεσαι;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Slideshow σε javascript

Δημοσίευση από emphasy » 12 Αύγ 2007 00:55

Εμένα μου άρεσε σαν παρουσιάση, δλδ αν έψαχνα κάτι τέτοιο θα καθόμουν άνετα στην σελίδα σου ;-)

bxd
Δημοσιεύσεις: 34
Εγγραφή: 10 Αύγ 2007 18:59

Slideshow σε javascript

Δημοσίευση από bxd » 12 Αύγ 2007 21:51

Ευχαριστώ πολυ για τα σχόλια! :D

Αλλά κυριως ευχαριστώ τον skeftomilos για το χρόνο που διάθεσε.

Ήδη ασχολούμε με κάποια από τα προβλήματα που αναφέρεις.
skeftomilos έγραψε: -Το script δεν είναι εντελώς unobtrusive. Απαιτεί έξτρα markup με συγκεκριμένα ids (π.χ. id="the_image").
Το <a href="javascript:slideShow.next()"> θεωρώ ότι είναι το βαρύτερο παράπτωμα από άποψη unobtrussiveness. Η διόρθωση γι αυτό θα συμπεριληφθεί στην επόμενη έκδοση.

Από κει και πέρα, τα id σε συγκεκριμένα elements δεν αποφεύγονται έυκολα, αν και ίσως απλά μεταφέρθουν τα αντίστοιχα controls σε rel attributes (αυτό όμως θα επιβαρύνει το φόρτωμα σε μεγάλες σελίδες).
skeftomilos έγραψε: - Όταν το scripting είναι disabled οι εικόνες δεν είναι προσβάσιμες (εκτός από την πρώτη).
Η γενική ιδέα που έχω είναι πως το script θα δουλεύει σε συνδυασμό με ένα server-side gallery script, οπότε τα links για επόμενη και προηγούμενη σελίδα θα έχουν νόημα ακόμα και χωρίς παρουσία javascript.

Μάλλον δεν θα φτάσει να είναι ποτέ τόσο ολοκληρωμένη λύση αλλά σκοπός είναι να προκύψει κάτι που μπορεί να προστεθεί σαν εναλλακτική σε μια υπάρχουσα gallery.

skeftomilos έγραψε: - Γίνεται τόσο συχνή χρήση της document.getElementById, που θα ήταν βολική η ρουτίνα $():
Αυτο έγινε για να μην είναι αναγκαία η χρήση του prototype, αλλά μάλλον έχεις δίκιο και θα φτιάξω το shortcut.
skeftomilos έγραψε: Στην αρχική σελίδα του demo (Overview), το εφέ ίσως να ήταν πιο ωραίο στο μάτι αν άρχιζε από αντίθετες κατευθύνσεις στα next και previous.
Ένα από τα πράγματα που θα βάλω σε επόμενη έκδοση. Προς το παρόν μπορείς να προσδιορίσεις μόνο ένα εφε για κάθε slideshow, αλλά αυτό προσαρμόζεται έυκολα.
skeftomilos έγραψε: Btw, πόσο καιρό σου πήρε να το γράψεις, και ποια είναι η κύρια γλώσσα στην οποία ειδικεύεσαι;
Η ιδέα υπήρχε κάμποσο καιρό. H ουσιαστική υλοποίηση (χωρίς τη host σελίδα και τα παραδείγματα) πήρε μερικές ώρες.

Από γλώσσες ασχολούμε κυριώς με PHP και Javascript.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Slideshow σε javascript

Δημοσίευση από skeftomilos » 13 Αύγ 2007 03:37

Έχουμε καιρό να δούμε στο forum ένα τέτοιο script με ωραίο εφέ, που να δίνει και έμφαση στην καλή υλοποίηση εκτός από το εφέ. Οπότε αξίζει ο κόπος για το σχολιασμό του, πόσο μάλλον που συνοδεύεται από τόσο προσεγμένη παρουσίαση. :-)

Αν έχω καταλάβει καλά το concept του unobtrusive scripting, σημαίνει ότι ξεκινάμε από κάτι που είναι πλήρως λειτουργικό και δουλεύει μέτρια, και το μετατρέπουμε σε κάτι που δουλεύει ακόμα καλύτερα. Αφού λοιπόν καταλήγουμε σε μια εντυπωσιακή παρουσίαση πολλών εικόνων θα έπρεπε να ξεκινήσουμε από μια συλλογή εικόνων πλήρη αλλά κοινότυπη. Μπορώ να σκεφτώ δύο εύκολους τρόπους, είτε links του στυλ 1, 2, 3, 4, 5... που το καθένα να δείχνει σε μια διαφορετική εικόνα, είτε μια οριζόντια ή κάθετη παράθεση όλων των εικόνων με πιθανή scrollbar (overflow:scroll). Και τα δύο αποτελούν από μόνα τους επαρκή πηγή δεδομένων για το script, το οποίο θα αφαιρέσει τα elements από το DOM tree αφού πρώτα διαβάσει και αποθηκεύσει τα urls.

Το id δεν είναι ο μόνος τρόπος για να βρεθεί ένα ή περισσότερα elements. Π.χ. η getElementsByTagName επιστρέφει μια συλλογή από elements ενός συγκεκριμένου τύπου, και ελέγχοντας το className μπορεί να γίνει φιλτράρισμα όσων έχουν ή δεν έχουν μια συγκεκριμένη κλάση. Ιδανικά το script θα έπρεπε να περιμένει μόνο ένα id και να μη δημιουργεί άλλα, γιατί τα ids εξαιτίας της μοναδικότητάς τους μπορεί να αποτελέσουν αιτία διένεξης μεταξύ δύο scripts ή ακόμα και μεταξύ δύο stylesheets. Τα καλά scripts είναι αυτά που αφήνουν το μικρότερο δυνατό αποτύπωμα στα διάφορα web namespaces.

Από προσωπική πείρα μπορώ να πω ότι μόλις μία JavaScript library υλοποιηθεί και είναι "σχεδόν" έτοιμη, χρειάζεται δεκαπλάσιο χρόνο μέχρι να τελειοποιηθεί. Ο γνωστός κανόνας 90-90 δεν ισχύει εδώ (μάλλον ο 90-900). :-)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “Θέλω την γνώμη σας για την Σελίδα μου...”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης