Δημιουργία ευαίσθητου και πανέμορφου Lightbox πλήρους σελίδας με το BaguetteBox.js

Υπάρχουν δεκάδες plugins lightbox και είναι όλοι υπέροχοι για διάφορους λόγους. Μερικοί δουλεύουν καλύτερα σε ιστότοπους χαρτοφυλακίου, ενώ άλλοι είναι καλύτεροι για ανταποκρινόμενες διατάξεις.

Αλλά, ένα από τα αγαπημένα μου νέα plugins να χρησιμοποιήσω είναι baguetteBox.js, δημιουργήθηκε από τον υπεύθυνο ανάπτυξης JavaScript Marek Grzybek.

Φυσικά, αυτό το plugin είναι εντελώς ελεύθερο για χρήση και ανοιχτό από το GitHub εάν θέλετε να ανοίξετε τον κώδικα με μη αυτόματο τρόπο.

Η βιβλιοθήκη δεν έχει εξαρτήσεις, ώστε να μπορείτε να το εκτελέσετε χωρίς jQuery, Zepto ή οτιδήποτε άλλο. Είναι ένα καθαρή βιβλιοθήκη JavaScript με μια πραγματικά απλή εγκατάσταση.

Αυτό σημαίνει λειτουργούν τέλεια σε κινητές συσκευές, έτσι ώστε να μπορεί να υποστηρίζει swipes και βρύσες, μαζί με την προεπιλεγμένη συμπεριφορά σε επιτραπέζιους υπολογιστές και φορητούς υπολογιστές. Είναι μία από τις λίγες γκαλερί πλήρους οθόνης υποστηρίζουν τις κινητές αλληλεπιδράσεις, μαζί με ένα πλήρες τροπικό αποτέλεσμα.

Ελέγξτε το σελίδα επίδειξης για να το δείτε ζωντανά στη δράση. Έχει μια πλήρως εξοπλισμένη γκαλερί, μαζί με το μία γραμμή κώδικα που απαιτείται για να λειτουργήσει:

 μπαγκέταBox.run ('baguetteBoxOne'); 

Έτσι, αυτό στοχεύει ένα στοιχείο δοχείου με την κλάση .baguetteBoxOne και ολόκληρη η γκαλερί λειτουργεί από αυτό.

Θα μπορούσες ορίστε προσαρμοσμένες επιλογές εάν θέλετε για πράγματα όπως λεζάντες, στυλ κουμπιών, λειτουργίες προφόρτισης και μέθοδοι επανάκλησης για συμβάντα onclick / onchange. Όλες αυτές οι επιλογές είναι καλά τεκμηριωμένο στο GitHub αν θέλετε να βουτήξετε.

Αλλά, πραγματικά δεν χρειάζονται πολλά για να ξεπεραστεί αυτό το στοιχείο δοχείου και κάποια βασικά στοιχεία εικόνας.

Εσύ έχουν πλήρη έλεγχο πάνω από τα κινούμενα σχέδια, τα μεγέθη των εικόνων, τα εφέ κίνησης και το περιεχόμενο της γκαλερί, όπως τίτλοι / λεζάντες. Αυτό απαιτεί JavaScript, έτσι δεν έχει μια καθαρή CSS εναλλακτική λύση στο modal. Αλλά, δεδομένου ότι τα περισσότερα προγράμματα περιήγησης υποστηρίζουν JavaScript, δεν θα πρέπει να είναι πρόβλημα.

Για να μάθετε περισσότερα, επισκεφθείτε την κεντρική σελίδα του baguetteBox.js και μπορείτε επίσης να μοιραστείτε τις σκέψεις σας με τον δημιουργό στο Twitter @feimosi.