jQuery: στρογγυλεμένες ακμές στις εικόνες για επικάλυψη

Πέμπτη, 30 Οκτωβρίου 2008

Λόγω των διαφορετικών καθιστώντας τα διάφορα προγράμματα περιήγησης, το οποίο είναι σίγουρα το Microsoft Internet Explorer κατά νου, θα πρέπει πάντα να καταφεύγουν σε τεχνάσματα που εφαρμόζονται για ενέργειες που θα πρέπει τώρα να είναι ένα πρότυπο. Η πολυ-συζητήθηκε στρογγυλεμένες άκρες του είναι ένα κλασικό παράδειγμα της "καταστροφής" που παράγεται από την πλήρη αδυναμία της να επιτύχει ένα πρότυπο για την παροχή σοβαρών HTML / CSS. Υπάρχουν πολλές online λύσεις που σας επιτρέπουν να αποκτήσουν τα "αποτελέσματα" (αποτελέσματα εξαιρώντας dall'HTML παρόντες όπως στρογγυλεμένες γωνίες, σκιά αποτελέσματα, αντανακλάσεις, κλπ. ...) με μπαλώματα στα φύλλα του στυλ, ειδικά κόλπα με τη χρήση του div μπολιασμένα, βιβλιοθήκες Javascript, χρήση του canvas κτλ ...
Για καθαρά εκπαιδευτικούς θα ήθελα να εξηγήσω περαιτέρω τεχνική (πολλαπλή browser) για να εφαρμόσει τις στρογγυλεμένες άκρες με εικόνες:

Επίδειξη και πηγή

Συνεχίστε ... "

Σχετικές Post

Wordpress: βήμα-βήμα πώς να δημιουργήσετε τη δική τους σύνδεση

Παρασκευή 24 Οκτωβρίου, 2008

Σε αυτό το tutorial θα δούμε πώς μπορείτε να δημιουργήσετε μια προσωπική διαδικασία σύνδεσης, χρησιμοποιώντας Ajax λειτουργικότητα χρησιμοποιώντας jQuery. Υπάρχουν διάφοροι τρόποι για να προσαρμόσετε τη σύνδεσή σας σε Wordpress, για παράδειγμα μέσω της χρήσης των αγκιστριών και φίλτρα add_action() add_filter() Θα σας πάω σε ένα πιο χαμηλό επίπεδο, ακόμη και αν υπάρχουν διασυνδέσεις με τον πυρήνα, ωστόσο Wordpress. Επίσης, βεβαιωθείτε για την επικύρωση ενός χρήστη μέσω email dupla / κωδικό πρόσβασης.

Γιατί να δημιουργηθεί μια σύνδεση;

  • Σε ορισμένες περιπτώσεις μπορεί να επιστρέψει uitle έχουν μέγιστο έλεγχο στην σελίδα σύνδεσης, να προτείνει μια προσαρμοσμένη διάταξη για να μας εγγεγραμμένους χρήστες. Μπορείτε επίσης να εμπλουτίσουμε την σελίδα με χρήσιμες πληροφορίες, ένα λογότυπο από το κλασικό "Ξεχάσατε τον κωδικό σας;"
  • Για να καταστεί δυνατή η πρόσβαση μέσω του ηλεκτρονικού ταχυδρομείου (όπως φαίνεται από τα παραπάνω,) αντί για user_login πρότυπο Wordpress
  • Για να μπορέσετε να εισάγετε έναν κωδικό σύνδεσης πάνελ στο sidebar του Blog
  • Και, τέλος, να έχουμε ένα σκελετό - και μια ιδέα - για ένα καλό plugin : D

Περιβάλλον

Στο παράδειγμά μας / φροντιστήριο θα εργαστεί για την ρίζα του Wordpress σε ένα φάκελο mylogin I δημιούργησε δύο php αρχείων σε αυτό το φάκελο: index.php και logon.php Η πρώτη θα περιλαμβάνει τη διασύνδεση του μητρώου, με όλα τα χαρακτηριστικά Javascript / jQuery υπηρετούμε. Το δεύτερο αρχείο logon.php θα περιέχει τον κωδικό, για την επικύρωση των χρηστών. Στη συνέχεια δημιουργήστε ένα φάκελο css και μέσα σε αυτό το αρχείο layout.css και ένα φάκελο images Μέσα στο φάκελο εικόνων θα θέσει ένα κλασικό Ajax loader: createlo online AjaxLoad.info. Στο τέλος θα πρέπει να έχουν:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • εικόνες
        • Ajax-loader.gif

Συνεχίστε ... "

Σχετικές Post

jQuery: Κινούμενα backgroundColor

Τετάρτη, 15 Οκτωβρίου 2008

Δεν κατάλαβα αν είναι κάποιο λάθος ή θέλετε κάτι, ωστόσο παραμένει το γεγονός ότι η μέθοδος animate() του jQuery δεν λειτουργεί με κάποιες CSS χαρακτηριστικά, συμπεριλαμβανομένων background-color (τα οποία, όπως camelize είναι backgroundColor Για παράδειγμα, τα εξής δεν θα παράγει κανένα αποτέλεσμα:

HTML:
  1. > <style "text/css" τύπου =>
  2. div # κουτί (υπόβαθρο-χρώμα: # eee? πλάτος: 100px? ύψος: 100px)
  3. </ Style>
  4. <! - .... ->
  5. > </div> <div id = "box"> </ div>

JavaScript:
  1. ) . animate ( { backgroundColor: "#f90" } ) ; $ ( '# Div κουτί »). Κίνηση ((backgroundColor:" # F90 "))?

Για να επιλύσετε αυτό το ζήτημα πρέπει να εγκαταστήσετε μια επέκταση: jQuery Χρώμα Κινούμενα σχέδια. Αυτό σας επιτρέπει να εκτελέσετε "animation" sull'attributo backgroundColor και πέραν αυτής:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Σχετικές Post

Wordpress: το πώς να γράψετε μια απάντηση στο σχόλιο που χρησιμοποιούν jQuery

Παρασκευή, 3 Οκτωβρίου, 2008

Πρόσφατα Cristiano Μέχρι εξέδωσε κέρδους Plugin για Wordpress μπορεί να προσθέσει δύο δεσμών σε κάθε σχόλιο από μια θέση (ίσως να έχετε εγκαταστήσει ένα παρόμοιο, δεδομένου ότι ο κατάλογος WordPress.org έχω ένα ζευγάρι δρόμους, αλλά θα ήταν ένα λογισμικό Ιταλικά την εκδήλωση για να τιμήσει το εξαιρετικό έργο που επιτέλεσε Cristiano). Οι σύνδεσμοι (απάντηση & παραθέτω) σε απάντηση ή / και ο συντάκτης του καταλόγου ένα σχόλιο από την βαρετή εκτελείτε λειτουργία να εισαγάγετε το σύμβολο (@) να δείχνει στους οποίους απευθύνεται. Σε αυτό το tutorial θα εξηγήσω - σε μεσοπρόθεσμο-έμπειρους χρήστες - πώς να προσθέσει αυτά τα δύο χαρακτηριστικά αυτής της τον εαυτό σας, χωρίς την εγκατάσταση οποιουδήποτε plugins. Επιπλέον, με τη χρήση των δυνατοτήτων του jQuery για το συγκεκριμένο μέρος σε Javascript. Η τεχνική, η οποία εκθέτει τον ίδιο Ι χρησιμοποιείται για να εισαγάγει αυτήν τη δυνατότητα, σε αυτό το ιστολόγιο.

Σημείωση: Η χρήση του plugin είναι η καλύτερη λύση για εκείνους που συχνά τείνουν να αλλάξετε το πρότυπο WordPress, ή να τον περιορίσει σε αναμονή για να το κάνουν. Αυτό το φροντιστήριο μόνο θέλει να σας δείξει πώς να κάνει στοχευμένες παρεμβάσεις στον κώδικα Wordpress και είναι αφιερωμένη στην πιο περίεργη.

Αλλαγή του αρχείου comments.php

Η πρώτη αλλαγή που γίνεται για να τοποθετήσετε το σύνδεσμο για να "απάντηση" και "ποσοστώσεις" σε κάθε σχόλιο. Για να το κάνετε αυτό, επεξεργαστείτε το αρχείο comments.php που βρίσκεται στο φάκελο του θέματος. Το αρχείο αυτό περιέχει όλες τις οδηγίες που σας επιτρέπουν να δείτε τα σχόλια στο τέλος της μια θέση. Το τμήμα που μας ενδιαφέρει (το οποίο μπορεί να διαφέρει ελαφρά από το θέμα με το θέμα) είναι το βρόχο για να δημιουργήσετε τα διάφορα σχόλια, αναγνωρίσιμες από:

Συνεχίστε ... "

Σχετικές Post

jQuery: πώς θα οικοδομήσουμε μια επέκταση Plugin

Τρίτη, 23 Σεπτεμβρίου 2008

Όπως όλα τα βιβλιοπωλεία του είδους αυτού, επίσης, jQuery σας δίνει τη δυνατότητα να επεκτείνει τις βασικές λειτουργίες, χρησιμοποιώντας πραγματικά plugin. Σεβασμός των κανόνων της λειτουργίας της, δηλαδή restituiendo πάντα ένα δείκτη για το επιλεγμένο ή jQuery ίδια, μπορείτε να γράψετε ένα plugin με λίγες γραμμές κώδικα. Πάρτε ως παράδειγμα τον κώδικα προτείνεται στην jQuery εναντίον όλων: ένα σημείο αναφοράς με 5 browser, η οποία (μετά τη διόρθωση που αναφέρθηκαν από Luke):

JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown »). Css δρομέας »,« δείκτη »). Κάντε κλικ στο κουμπί (
  2. λειτουργία () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (αυτό). επόμενη (). είναι ( "κρυφά")) $ (αυτό). επόμενη (). slideDown ()? άλλο $ (αυτό). επόμενη (). slideUp ()?
  4. )
  5. )?

Συνεχίστε ... "

Σχετικές Post

jQuery εναντίον όλων: ένα σημείο αναφοράς με 5 browser

Τετάρτη, 17 Σεπτεμβρίου 2008

εικόνα Ένας καλός προγραμματιστής δεν έχει κανένα πρόβλημα να μεταβούν από τη μια γλώσσα προγραμματισμού στην άλλη. Η επιλογή να επικεντρωθεί σε μια συγκεκριμένη γλώσσα, το περιβάλλον και την ανάπτυξη πλαισίου, υπαγορεύεται περισσότερο από την άνεση χρόνου και το είδος της εργασίας που πραγματοποιείται. Ωστόσο, ένας σημαντικός παράγοντας που μπορεί να επηρεάσει την επιλογή του "πλαίσιο", όπως είναι η συμπάθεια ή την ασθένεια που μπορεί να ώριμη την πάροδο του χρόνου.
Συγκεκριμένα, θα ήθελα να αναλύσουμε ορισμένες - δεν είναι όλα - Javascript-πλαίσιο είναι διαθέσιμες σήμερα, διότι "ενημέρωσε" για να ρίξετε μια ματιά ειδικά jQuery.
Οι δημιουργοί του mootools (ένα από τα πιο δημοφιλή Javascript πλαίσιο) έχει διατεθεί ένα εργαλείο για να εκτελέσει μια δοκιμασία της ταχύτητας και της ισχύος των πέντε γνωστούς Javascript πλαίσιο: Slickspeed. Η δοκιμή αυτή, τα αποτελέσματα δεν έκπτωση σε όλα, είναι σημαντικό όπως το πλαίσιο λειτουργίας client-side Javascript, η οποία διεξάγεται από το πρόγραμμα περιήγησης. Για αυτόν ακριβώς τον λόγο ότι ορισμένα βρείτε Safari γρηγορότερα από τον Internet Explorer ή το Google Chrome ταχύτερα από FireFox. Ωστόσο, αυτό συχνά εξαρτάται από το είδος της σελίδας σας προβολή. Στην πραγματικότητα, μπορεί να συμβεί πολύ καλά ότι μια συγκεκριμένη τοποθεσία είναι πραγματικά πιο "γρήγορα", όταν εμφανίζεται στο Safari, αλλά αυτό δεν σημαίνει ότι όλες οι τοποθεσίες θα είναι πιο γρήγορα με το Safari! Φυσικά, αυτή η συζήτηση είναι σε ισχύ για οποιοδήποτε άλλο browser.

Το σημείο αναφοράς

Σε δοκιμές που έχω κάνει με Slickspeed σύγκριση που έκανα το πρόγραμμα περιήγησης που διατίθενται για το μηχάνημά μου (Utilmate Windows Vista 64bit - Intel Core 2 Quad 2.4GHz να με 8GB RAM).
Δυστυχώς, η δοκιμή δεν ήταν σε θέση να λειτουργούν με τον Internet Explorer 7, όπως αυτή μπλοκάρει το αυτοκίνητο, ακόμη και παύσης της κλίμακας με τα αποτελέσματα! Και πάλι συγχαρητήρια Microsoft.
I crercato να διατηρήσουν το ίδιο καθεστώς του υπολογιστή κατά την εκτέλεση των δοκιμών, το άνοιγμα του browser μεμονωμένα και δεν αποστέλλει οποιαδήποτε άλλη ενέργεια εκτελείται.

Σημείωση: Αν έχετε όρεξη να κάνετε μία ή περισσότερες από τις δοκιμές αυτές, μπορείτε να σχολιάσει τη θέση αυτή στην περίπτωση της "περίεργος" και διαφορετικά αποτελέσματα.

εικόνα

Google Chrome ήταν πολύ γρήγορα, με μια τιμή των 68 (μέσος όρος) κατά τη δοκιμή με jQuery. Η πιο αργή, όμως, ήταν γενεαλογικού, παρά από την ίδια "μάνα" του Mozilla. Αυτό το κακό αποτέλεσμα για γενεαλογικού είναι πραγματικά περίεργο, δεδομένης της κοπής κοινωνικό δίκτυο, διότι είναι το Δίκτυο Κοινωνικής Web 2.0 για την αξιοποίηση των πολλά Javascript πλαίσιο διαθέσιμα, έτσι ώστε να παρέχει την εμπειρία της πλοήγησης και αλληλεπίδρασης πραγματικά καινοτόμες.
Μια έκπληξη νικήσει FireFox και Opera έχει επίσης πολλά ", η απόκτηση ακόμη και ένα 74 στο Dojo! Firefox και Safari, τελικά, είναι παρόμοια, με το Safari ταχύτερα σε δοκιμές με Mootools και jQuery.

Ποιο πλαίσιο για να επιλέξετε;

Μπορείτε να badiamo για να δοκιμαστεί η ταχύτητα στην εκτέλεση και εμείς δεν ενδιαφερόμαστε για το μέγεθος σε Kbytes του ιδίου πλαισίου, η απάντηση μπορεί να είναι "ό, τι είναι για σας", ή, αν προτιμάτε, "αυτό που γνωρίζουν καλύτερα ή είναι πιο αρμονικό με το δικό σας στιλ του προγραμματισμού. "
Τελικά, αυτά τα πλαίσια, θα δούμε ένα μικρό 'όλα (βλέπε τη χρήση του $ για παράδειγμα), παρά τις σημαντικές διαφορές που να μπορεί να μεταβεί στα μάτια ενός εμπειρογνώμονα ή πραγματικά ώθησε τη χρήση μιας συγκεκριμένης βιβλιοθήκης. Κατ 'αρχήν, στην πραγματικότητα, ό, τι μπορεί να γίνει με jQuery, για παράδειγμα, μπορείτε να κάνετε καλά με mootools ή πρωτότυπο! Αν jQuery έχει ένα πολύ συμπαγή σύνταξη, όλες οι μέθοδοι, όπως πάντα την επιστροφή jQuery αντικείμενο βάση, δημιουργώντας έτσι ατελείωτες αρχεία της oggetto.metodo().metodo().metodo()... δεν είπε ότι αυτό είναι σε όλα τα κόστους δύναμη, ιδίως για εκείνους που θα πρέπει να debug!
Βιβλιοθήκες όπως prototype.js ίσως ένοχοι σε περίπτωση απουσίας του γραφικού συνέπειες, έστω και απλή, αναγκάζοντας τον κύριο του έργου για την εφαρμογή ως spinoff scriptaculous.js, βαρύτερα και μακριά από τη βιβλιοθήκη πρώτη επιλογή.

Ένα παράδειγμα

Ακριβώς αυτό το λόγο, για παράδειγμα, με οδήγησαν στο να αντικαταστήσει πρωτότυπο συνδυασμό / scriptaculous με jQuery για τη δημιουργία διαδραστικών πάνελ / κινούμενα εδώ στο sidebar των undolog.com. Πράγματι, με τη χρήση του Google API για την εισαγωγή της βιβλιοθήκης, είναι το σύνολο του φορτίου των αποβλήτων για μια βιβλιοθήκη scriptaculous slideDown και slideUp. Για πληροφορίες και ένα παράδειγμα, εδώ είναι το πώς η Javascript κώδικα σε συνδυασμό με το πρωτότυπο / scriptaculous:

JavaScript:
  1. / / Πρωτότυπο / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown »). Κάθε (
  3. element ) { λειτουργία (element) (
  4. = "pointer" ; στοιχείο. στυλ. δρομέα = "pointer"?
  5. 'click' , στοιχείο. παρατηρούν ( «κλικ»,
  6. event ) { λειτουργία (γεγονός) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; εάν (this. επόμενη (). στυλ. απεικόνιση == "") νέα Effect. BlindUp (this. επόμενη (), (διάρκεια:. 5))?
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Επιπτώσεις άλλο νέο. BlindDown (this. επόμενη (), (διάρκεια:.) 3)?
  9. event ) ; Εκδήλωση. Διακοπ (γεγονός)?
  10. )
  11. )
  12. )
  13. )?

και τώρα είναι με jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown »). Κάθε (
  3. i ) { λειτουργία (i) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Η). Css ( «δρομέας», «δείκτη»). Κάντε κλικ στο κουμπί (
  5. λειτουργία () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (αυτό). επόμενη (). είναι ( "κρυφά")) $ (αυτό). επόμενη (). slideDown ()? άλλο $ (αυτό). επόμενη (). slideUp ()?
  7. )
  8. )?
  9. )
  10. )?

Συνολικά, μια πιο προσεκτική ματιά, δεν νομίζω ότι υπάρχει μεγάλη διαφορά! Αλλά όπως είπα και πριν ... ερώτημα είναι "και" προσωπικό σας γούστο.

Σχετικές Post

jQuery restyling

Κυριακή 31 Αυγούστου, 2008

Σε αυτές τις ημέρες (στο πλαίσιο του Συμβουλίου ...) έψαχνα σε jQuery, μια εξαιρετική βιβλιοθήκη με τον τρόπο του prototype.js, scriptaculous.js, mooTools, για παράδειγμα ... και εδώ σήμερα ότι το σύνολο του site έχει πλήρως επανασχεδιαστεί:

εικόνα

Εξαιρετική αρχίσουν να διευρύνουν τους ορίζοντές μου σε αυτό το είδος του βιβλίου! Σύντομα κοντά σας δημοσιεύσει κάποιο ενδιαφέρον άρθρο, ειδικά σχετικά με τις διαφορές μεταξύ jQuery βιβλιοθήκες και άλλα "παρόμοια".

Σχετικές Post

Shadowbox 2.0: Release Candidate 1

Τρίτη, 8 Ιουλίου, 2008

shadowbox Είχε κυκλοφορήσει την απελευθέρωση των υποψήφιων 1 (RC1) έκδοση 2.0 της βιβλιοθήκης Javascript Shadowbox, του Michael Jackson JI, χρήσιμο για το άνοιγμα των παραθύρων αφιερωμένη στις απόψεις των διαφόρων τύπων των μέσων μαζικής ενημέρωσης, από το Flash με QuickTime σε σελίδες HTML. Σε αυτή τη νέα έκδοση είναι οι εξής:

  • Το site είναι γεμάτο από πληροφορίες και περιλαμβάνει τώρα ένα οδηγό (στο στυλ των mootools) για τη δημιουργία on the fly "ένα πακέτο έθιμο βιβλιοθήκη με τις ανάγκες μας
  • Ικανότητα να χρησιμοποιούν μια μορφή αυτόνομη βάση, χωρίς απαραιτήτως να περιλαμβάνει - για προσαρμογείς - εξωτερικές βιβλιοθήκες όπως prototype.js, jQuery, κτλ ...
  • Βελτιώσεις στη διαχείριση και την υλοποίηση του δέρματος
  • Τοποθεσία

Η βιβλιοθήκη είναι επίσης διαθέσιμη για SVN σε:

  http://michaeljackson.googlecode.com/svn/trunk/shadowbox 

Σχετικές Post

Google AJAX API Βιβλιοθήκη: μία κρίσιμη καμπή για προγραμματιστές

Πέμπτη, 29 Μαΐου 2008

AJAX Libraries API Η Google, στην τελευταία perdiodo, έχει κυκλοφορήσει μια πληθώρα εργαλείων που προορίζονται για προγραμματιστές, τη συνεχή αναβάθμιση του Τύπου. Τώρα εξαντλείται σε συμφωνία με το πιο δημοφιλές AJAX πλαίσιο, και μόνο για να μην συγκεντρώνει την κατανομή των βιβλιοθηκών jQuery, πρωτότυπο, script.aculo.us, MooTools και dojo!

Στην πράξη, μπορείτε να έχετε πρόσβαση σε αυτές τις βιβλιοθήκες που εκμεταλλεύονται τις υποδομές και το δίκτυο της Google, με σημαντικά οφέλη όσον αφορά την ταχύτητα και ασφάλεια.

Η ταχύτητα, το φορτίο είναι εγγυημένη από το ίδιο δίκτυο ότι το Google, εκτός από την παροχή στην ίδια τη δομή των διανεμομένων διακομιστές, επιτρέποντας (από προεπιλογή) για τη φόρτωση συμπιεσμένο (gzip / minify) βιβλιοθήκη. Η Google φιλοξενεί την πλησιέστερη προς την αίτηση θα πρέπει να χρησιμοποιείται για να στείλετε τον κωδικό και, αν δεν επιτευχθεί ορίζονται ή προσωρινή, το δίκτυο της Google θα εξακολουθεί να στείλετε το κώδικα JavaScript!

Συνεχίστε ... "

Σχετικές Post

Φως Βιβλιοθήκη: Slimbox από Shadowbox, αίθουσες τέχνης σε Javascript

Τετάρτη, 13 Φεβρουαρίου 2008

Ορισμένοι μπορεί να πουν - και δικαίως - αρκετά! Javascript βιβλιοθήκες (διακριτικές - δεν οχληρές, ή εν μέρει) για τη διαχείριση των εικόνων και υπάρχουν πολλές γκαλερί. Τέλος πάντων εδώ είναι ο κατάλογος, με πλεονεκτήματα και αδυναμίες, τόσο καλύτερα ένιωθα.

SLIMBOX 1:41

Εξαιρετικά ελάχιστη 7K (έκδοση 1,41), απαιτεί mootools στην εργασία. Όπως αναφέρεται στην αρχική σελίδα είναι πραγματικός κλώνος γράφημα Lightbox, που θα δούμε παρακάτω. Ειλικρινά, ανεξάρτητα από τις ακραίες συμπαγές της βιβλιοθήκης, δεν ιδιαιτερότητες. Στον ίδιο χώρο, πάντως, μπορείτε επίσης να βρείτε μια δέσμη ενεργειών για τη δημιουργία runtime προβληματισμό ... το όριο αυτό μπορεί να είναι χρήσιμες ?)

Βαθμολογία: - 6 - Αρχική Σελίδα Slimbox, Αρχική Σελίδα Reflection.js για MooTools

LIGHTBOX2

Lightbox2 Ένα από τα πιο γνωστά και απλά. Λειτουργεί σε αυτή την έκδοση είναι εικόνες (δεν λειτουργεί με το QuickTime, Flash ή άλλες). Για τη λειτουργία του απαιτεί Πρωτότυπο και scriptaculous. Χρησιμοποιήστε το χαρακτηριστικό rel να εντοπιστούν οι συνδέσεις των εικόνων προς μεταποίηση:

HTML:
  1. rel = "lightbox" title = "my caption" > image #1 </a> <a href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> εικόνα # 1 </ a>

Όπως και άλλες βιβλιοθήκες που θα δούμε, υποστηρίζει τη λειτουργία προβολής διαφανειών, θέτοντας σε παρένθεση τυχόν αναγνώριση ενός συνόλου συνδέσμου εικόνας:

HTML:
  1. rel = "lightbox[roadtrip]" > image #1 </a> <a href = "images/image-1.jpg" rel = "lightbox[roadtrip]"> εικόνα # 1 </ a>
  2. rel = "lightbox[roadtrip]" > image #2 </a> <a href = "images/image-2.jpg" rel = "lightbox[roadtrip]"> image # 2 </ a>
  3. rel = "lightbox[roadtrip]" > image #3 </a> <a href = "images/image-3.jpg" rel = "lightbox[roadtrip]"> εικόνα # 3 </ a>

Βαθμολογία: 6 - Αρχική Σελίδα Lightbox2

LIGHTWINDOW 2,0

LightWindow 2,0 Ακόμα και αυτό είναι πολύ κοινό! Μετά από όλα, πώς να καταλάβουμε τι είναι το πιο διαδεδομένο; ?). Σε κάθε περίπτωση, είναι εξαιρετικά ευρύ και πολύπλευρο. Από το χώρο στάθμευσης αίτηση για δωρεές για να αγοράσει ένα Mac .. λίγο επεμβατικές και πιέζοντας ... Ωστόσο, όπως και το προηγούμενο έτος, για τη λειτουργία της, απαιτεί Πρωτότυπο και scriptaculous. Σε αντίθεση με το προηγούμενο, ωστόσο, αυτό σας επιτρέπει να δείτε moltisiimi τύπους αρχείων: εικόνες, QuickTime ταινίες, ταινίες Flash, HTML σελίδες και εξωτερικών PDF. Αντίθετα, χρησιμοποιεί διάφορα χαρακτηριστικά, ορισμένες προαιρετικές author, caption και title άλλες απαιτήσεις class και params - για να ρυθμίσετε τη συμπεριφορά της βιβλιοθήκης). Για παράδειγμα, για να δείτε μια γκαλερί ή διαφανειών χρησιμοποιώντας το χαρακτηριστικό rel

HTML:
  1. class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption= "Look's super tasty!" author= "Unknown" > image #1 </a> <a href = "gallery/0-sushi.jpg" κατηγορίας = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption= "Look's σούπερ tasty!" author= "Unknown"> εικόνα # 1 </ a>
  2. class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption= "I shouldn't be doing this when I am hungry" author= "Unknown" > image #2 </a> <a href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" τίτλος = "Beware of warewolves ..." λεζάντα = "εγώ δεν θα πρέπει να γίνει αυτό όταν είμαι πεινασμένος" συντάκτη = "Unknown"> image # 2 </ a>
  3. class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption= "Take that sushi!" author= "Unknown" > image #3 </a> <a href = "gallery/2-sushi.jpg" κατηγορίας = "lightwindow" rel = "[Sushi]" title = "That ήταν good!" caption= "Take ότι sushi!" author= "Unknown"> εικόνα # 3 </ a>

Βαθμολογία: 8 - Αρχική Σελίδα LightWindow 2,0

SHADOWBOX 1.0b

Shadowbox Παρά το γεγονός ότι είναι η έκδοση 1.0 beta, αυτή είναι ίσως η πιο περιεκτική βιβλιοθήκη, τόσο από επιχειρησιακή άποψη αυτή ενισχύεται από τις βιβλιοθήκες. Για τη λειτουργία του, στην πραγματικότητα, μπορείτε να επιλέξετε από μια σειρά πλαισίου, χάρη στο αρχείο "adapter" ειδικά και που παρέχονται από το συντάκτη:

Το οπτικό αποτέλεσμα (που ρυθμίζονται μέσω του δέρματος / css), στη συνέχεια, σε αντίθεση με τις άλλες, είναι σίγουρα πιο ελκυστικό. Οι ιδιότητες που χρησιμοποιούνται είναι απλώς rel όπου, στον εσωτερικό χώρο είναι όλες οι άλλες παράμετροι ρύθμισης. Για παράδειγμα, για να δημιουργήσετε μια έκθεση, μπορείτε να χρησιμοποιήσετε:

HTML:
  1. rel = "shadowbox[Vacation]" > The Beach </a> <a href = "beach.jpg" rel = "shadowbox[Vacation]"> Η Παραλία </ a>
  2. rel = "shadowbox[Vacation]" > The Pier </a> <a href = "pier.jpg" rel = "shadowbox[Vacation]"> Ο Pier </ a>

Εάν θέλετε να ρυθμίσετε κάποιες επιλογές (βλ. ιστοσελίδα για την πλήρη λίστα) χρησιμοποιήστε την ακόλουθη σύνταξη:

HTML:
  1. rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}"