Αρχική σελίδα » UI / UX » Πώς να επεκτείνετε μικρογραφίες όπως οι εικόνες Google

    Πώς να επεκτείνετε μικρογραφίες όπως οι εικόνες Google

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

    Είναι ένα από τα καλύτερα χαρακτηριστικά γκαλερί εικόνων που έχω χρησιμοποιήσει και τώρα, μπορείτε να το κλωνοποιήσετε με το Gridder.js.

    Αυτό το δωρεάν πρόσθετο jQuery ακολουθεί τα βήματα του απίστευτου UX της Google δημιουργώντας μια προσθήκη που ταιριάζει με αυτό το εφέ. Μπορείς μετατρέψτε οποιαδήποτε συλλογή φωτογραφιών σε μια συλλογή στυλ Google Images με όλα τα ίδια κινούμενα σχέδια και χαρακτηριστικά εμφάνισης.

    Είμαι ευχάριστα έκπληκτος από την ταχύτητα και την ευκολία χρήσης που έρχεται με αυτό το plugin. Απλά κάντε κλικ σε οποιαδήποτε μικρογραφία εμφανίζει αμέσως μεγαλύτερο πλάνο και τα κινούμενα σχέδια είναι εξαιρετικά καθαρά.

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

    Πάνω από αυτό, μπορείτε Επίσης, τραβήξτε περιεχόμενο μέσω του Ajax. Αυτό σας επιτρέπει δημιουργήστε δυναμικές μικρογραφίες που τραβούν περιεχόμενο από άλλους ιστότοπους ή μέσω API.

    Κάθε συμβάν κλικ προσφέρει μια μέθοδο επανάκλησης, έτσι μπορείτε να εκτελέσετε ακόμη και άλλα plugins ή λειτουργίες JavaScript μαζί με το Gridder. Με τόσες πολλές επιλογές, αισθάνεται πρακτικά σαν ένα ολόκληρο πλαίσιο πλέγματος!

    Από το Gridder τρέχει στο jQuery, απαιτεί την πιο πρόσφατη έκδοση ως εξάρτηση. Αλλά, αυτό είναι όλο που χρειάζεστε (μαζί με το αρχείο Gridder.js), και με μερικές γραμμές HTML, μπορείτε να έχετε το πλέγμα σας να λειτουργεί ομαλά.

    Θα πρέπει να ελέγξετε τη σελίδα GitHub για πλήρεις οδηγίες εγκατάστασης αλλά εδώ είναι α γρήγορη προεπισκόπηση από αυτό που μοιάζει με το HTML:

      
    Το περιεχόμενο πηγαίνει εδώ ...

    Όλο το περιεχόμενο τραβιέται μέσω JavaScript, έτσι μπορείτε να φορτώσετε σχεδόν ό, τι θέλετε.

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

    Οι προγραμματιστές Newbie και pro θα βρουν πολύτιμη αξία σε αυτό το plugin. Ωστόσο, αν δεν είστε σίγουροι αν αυτό είναι για εσάς, ρίξτε μια ματιά στη ζωντανή σελίδα επίδειξης Gridder και παίξτε γύρω.