Chercher Παιδικά προϊόνταΘα σας καθοδηγήσουμε στη διαδικασία δημιουργίας μιας αποκριτικής συλλογής μικρογραφιών. Ας δούμε πώς να επιτύχουμε λύσεις σε ορισμένα προβλήματα και να αντιμετωπίσουμε προβλήματα που μπορεί να προκύψουν στο πλαίσιο ενός μεγάλου έργου.

Εισαγωγή

Πριν βουτήξουμε στη διαδικασία, ας εξετάσουμε τι παίρνουμε ως αποτέλεσμα της εργασίας. Κατά την εμφάνιση της δοκιμαστικής σελίδας, πρέπει να αλλάξουμε το πλάτος του παραθύρου του προγράμματος περιήγησης για να δούμε πώς αντιδρά ο κώδικάς μας.

Στυλ κοντέινερ

Ας ξεκινήσουμε να δημιουργούμε τον κώδικα CSS ορίζοντας το πλάτος του κοντέινερ και κεντρώνοντάς το στη σελίδα. Με αυτόν τον τρόπο έχουμε έναν ωραίο, ευρύ χώρο για να δουλέψουμε με τη γκαλερί:

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

Βασικά στυλ γκαλερί

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

GalleryItem ( χρώμα: #797478; γραμματοσειρά: 10 εικονοστοιχεία/1,5 Verdana, Helvetica, sans-serif; float: αριστερά; ) .galleryItem h3 (μετατροπή κειμένου: κεφαλαία; ) .galleryItem img ( μέγ. πλάτος: -100%; border-radius: 5px -moz-border-radius: 5px;

Τα στυλ για τις εικόνες ορίζονται επίσης εδώ. Ορίζοντας την ιδιότητα μέγιστου πλάτους των εικόνων στο 100%, το αποτέλεσμα είναι ότι το μέγεθος προσαρμόζεται καθώς μειώνεται το πλάτος της θύρας προβολής. Επίσης για τις εικόνες οι γωνίες είναι στρογγυλεμένες.

Εργασία με στήλες

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

Θα χρησιμοποιήσουμε πέντε στήλες στο σχεδιασμό της δοκιμαστικής σελίδας μας. Ας υπολογίσουμε τα μαθηματικά για τον υπολογισμό των πεδίων. Θα υπάρχει περιθώριο 4% μεταξύ των στηλών. Πολλαπλασιάζοντας με το 5, βλέπουμε ότι το 20% του πλάτους πηγαίνει στα περιθώρια. Απομένει μόνο το 80% για συντήρηση. Δηλαδή, κάθε στήλη θα έχει πλάτος 16%.

Τώρα μπορούμε να εισάγουμε αυτές τις τιμές στον κώδικα CSS. Κάθε τάξη γκαλερίΣτοιχείοαντιπροσωπεύει μία στήλη, οπότε το πλάτος θα ήταν 16% και το περιθώριο 2% για κάθε πλευρά, για ένα σύνολο 4%.

GalleryItem ( χρώμα: #797478; γραμματοσειρά: 10 px/1,5 Verdana, Helvetica, sans-serif; float: αριστερά; πλάτος: 16%; περιθώριο: 2% 2% 50 px 2%; )

Αυτό το σύνολο στυλ θα δημιουργήσει ένα υπέροχο πρότυπο πέντε στηλών που θα φαίνεται καλό σε οθόνες 13 ιντσών και μεγαλύτερες.

Πού θα φαίνεται ατημέλητο το πρότυπο;

Δυστυχώς, αυτό το πρότυπο θα σπάσει όταν μειωθεί το μέγεθος της σελίδας. Όταν το πλάτος είναι μικρότερο από 500 px, γίνεται εντελώς αδιάβαστο και αδέξιο.

Για να λύσουμε το πρόβλημα, θα χρησιμοποιήσουμε ερωτήματα πολυμέσων για παράκαμψη κατάλληλο μέγεθοςστήλες

Προσδιορισμός κρίσιμων σημείων

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

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

Πώς να προσδιορίσετε κρίσιμα σημεία;

Πλέον ο καλύτερος τρόπος- ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης και μειώστε το μέγεθος του παραθύρου. Τεχνικά, το πρότυπό μας δεν θα σπάσει ποτέ καθώς η κλίμακα θα αλλάξει. Ωστόσο, με μέγεθος παραθύρου περίπου 940 εικονοστοιχεία, η στήλη κειμένου θα γίνει πολύ στενή για να ταιριάζει αρμονικά στο κείμενο:

Για να διορθώσετε την κατάσταση σε αυτό το σημείο, πρέπει να δημιουργήσετε τέσσερις στήλες αντί για πέντε. Αλλάζοντας το πλάτος της στήλης στο 21% θα λύσουμε το πρόβλημα. Εφόσον χρησιμοποιούνται και οι δύο ιδιότητες "max-width" και "max-device-width", η σχεδίαση θα αλλάξει όταν αλλάξει το παράθυρο του προγράμματος περιήγησης και σε συσκευές με μέγεθος οθόνης μικρότερο από τις καθορισμένες τιμές.

Μόνο οθόνη @media και (μέγ. πλάτος: 940 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής: 940 εικονοστοιχεία) ( .galleryItem (πλάτος: 21%;) )

Πρόσθεση αυτού του στυλλύνει το πρόβλημα. Ο σχεδιασμός πέντε στηλών μας λειτουργεί εξαιρετικά σε οθόνες μεγαλύτερες από 940 εικονοστοιχεία και μετατρέπεται σε πρότυπο τεσσάρων στηλών για πιο στενές.

Επαναλάβετε τη λειτουργία

Τώρα επαναλαμβάνουμε την παραπάνω διαδικασία ξανά και ξανά. Μειώνουμε το μέγεθος του παραθύρου και βλέπουμε πότε η σχεδίαση σταματά να λειτουργεί. Επόμενο σημείοεμφανίζεται στα 720 px. Πρέπει να αλλάξετε το πλάτος της στήλης σε 29,33% για να λάβετε ένα πρότυπο τριών στηλών:

Μόνο οθόνη @media και (μέγ. πλάτος: 720 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής: 720 εικονοστοιχεία) ( .galleryItem (πλάτος: 29,33333%;) )

Συνεχίζουμε τη διαδικασία μέχρι να πάρουμε μια στήλη (το μέγεθος του παραθύρου είναι περίπου ίσο με το μέγεθος Οθόνη iPhone). Εδώ πλήρες σετερωτήματα πολυμέσων.

/* MMEDIA QUERY*/ @media only οθόνη και (max-width: 940px), only screen and (max-device-width: 940px)( .galleryItem (width: 21%;) ) @media only screen and (max- πλάτος: 720 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής: 720 εικονοστοιχεία) ( .galleryItem (πλάτος: 29,33333%;) ) οθόνη @media μόνο και (μέγ. πλάτος: 530 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής : 530 px)( .galleryItem (πλάτος: 46%;) ) @media μόνο οθόνη και (μέγ. πλάτος: 320 px), μόνο οθόνη και (μέγ. πλάτος συσκευής: 320 px)( .galleryItem (πλάτος: 96%;) . galleryItem img (πλάτος: 96%;).galleryItem h3 (μέγεθος γραμματοσειράς: 18px;).galleryItem p, (μέγεθος γραμματοσειράς: 18px;) )

Σύναψη

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

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

Το WordPress έχει μια ενσωματωμένη συλλογή, την οποία για κάποιο λόγο πολλοί χρήστες δεν γνωρίζουν. Σήμερα θέλουμε να σας πούμε πώς μπορείτε να το εφαρμόσετε χωρίς να καταφύγετε σε πρόσθετα. Ο σκοπός αυτού του άρθρου είναι να σας διδάξει πώς να παρουσιάζετε εικόνες στον ιστότοπό σας με ωραίο και προσεγμένο τρόπο. Θα σας δείξουμε επίσης πώς να ανοίγετε εικόνες σε καρουζέλ ή lightbox, που σας επιτρέπει να παρουσιάζετε εικόνες με πιο αποτελεσματικό τρόπο και ακόμη και να τις επεκτείνετε σε πλήρη οθόνη.

Το πρώτο πράγμα που πρέπει να κάνετε είναι νέα δημοσίευσηστον ιστότοπο. Από την άλλη πλευρά, εάν θέλετε να το προσθέσετε σε μια υπάρχουσα δημοσίευση, τότε απλώς μεταβείτε στη λειτουργία επεξεργασίας ανάρτησης. Μόλις βρεθείτε στη σελίδα του επεξεργαστή, κάντε κλικ στο κουμπί "Προσθήκη αρχείου πολυμέσων".

Αυτό το κουμπί θα ανοίξει το πρόγραμμα λήψης πολυμέσων για εσάς. Τώρα πρέπει να κάνετε κλικ στο σύνδεσμο «Δημιουργία συλλογής», τον οποίο μπορείτε να δείτε στην αριστερή πλευρά της οθόνης. Για να προσθέσετε φωτογραφίες, μπορείτε είτε να τις ανεβάσετε από τον υπολογιστή σας είτε να επιλέξετε όσες έχουν ήδη μεταφορτωθεί. Μπορείτε απλά να επιλέξετε τις φωτογραφίες που θα πρέπει να εμφανίζονται στη συλλογή. Θα σημειωθούν ειδικό σημάδι, το οποίο μπορείτε να δείτε στο παρακάτω στιγμιότυπο οθόνης.

Αφού επιλέξετε όλες τις φωτογραφίες που θέλετε, κάντε κλικ στο «δημιουργία νέας συλλογής» στο πρόγραμμα μεταφόρτωσης πολυμέσων. Το πρόγραμμα φόρτωσης πολυμέσων θα σας εμφανίσει τις επιλεγμένες εικόνες στο παράθυρο Επεξεργασία. Εδώ μπορείτε να προσθέσετε λεζάντες, να αλλάξετε ρυθμίσεις και να ταξινομήσετε τις εικόνες απλά σύροντάς τις στις επιθυμητές θέσεις. Μόλις τελειώσετε, κάντε κλικ στο "Επικόλληση".

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

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

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

Τώρα που το κάναμε αυτό, ας δούμε πώς μπορούμε να το κάνουμε πιο απλό και πιο εύκολο στη χρήση.

Εμφανίζεται ως καρουζέλ

Η αρχή της εμφάνισης εικόνων σε καρουζέλ είναι παρόμοια με τη λειτουργικότητα της προβολής φωτογραφιών στο Facebook. Αρχικά αυτή τη λειτουργίαήταν διαθέσιμο ως μέρος του πρόσθετου Jetpack, το οποίο είναι ένα σύνολο βολικά εργαλεία. Ωστόσο, το πρόβλημα είναι ότι απαιτεί ο ιστότοπος να συνδεθεί με το WordPress.com, παρόλο που δεν είναι απαραίτητο. Πριν από λίγο καιρό κυκλοφόρησε ως ξεχωριστό πρόσθετο που μπορεί να χρησιμοποιηθεί από όποιον θέλει.

Πρώτα πρέπει να εγκαταστήσετε και να ενεργοποιήσετε το πρόσθετο Gallery Carousel. Μόλις το ενεργοποιήσετε, θα είναι έτοιμο να πάει αμέσως χωρίς να χρειάζεται να ρυθμίσετε τίποτα. Απλώς ανοίξτε τη δημοσίευση της γκαλερί σας και κάντε κλικ σε μια εικόνα στη συλλογή για να δείτε το καρουζέλ σε δράση. Ή μπορείτε να δείτε την παρακάτω συλλογή εικόνων:

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

Υπάρχουν πολλές άλλες επιλογές, ωστόσο, για τους περισσότερους ιδιοκτήτες τοποθεσιών θα είναι ιδανικό τυπική επιλογή. Εάν δεν σας αρέσει να ψάχνετε σε κώδικα, τότε σίγουρα ελέγξτε αυτό ενδιαφέρον παράδειγμαπώς μπορείτε να επεκτείνετε τη λειτουργικότητα τυπική γκαλερίστο WordPress. Εάν βρίσκεστε να δημοσιεύετε πολλές εικόνες ή εργάζεστε ως photo blogger, τότε σας συνιστούμε να δείτε την επιλογή μας με τα καλύτερα πρότυπα φωτογραφιών.

Ελπίζουμε ότι βρήκατε αυτό το άρθρο χρήσιμο, εάν έχετε οποιεσδήποτε ερωτήσεις ή συστάσεις, μοιραστείτε τις στα σχόλια.

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

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

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

Κωδικός ενσωμάτωσης συλλογής:
Επικολλήστε τους κωδικούς φωτογραφιών εδώ

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

Έτσι, εισαγάγατε κωδικούς φωτογραφιών αντί για τις λέξεις "Εισαγάγετε κωδικούς φωτογραφιών εδώ". Τώρα ας αρχίσουμε να προσαρμόζουμε την ταχύτητα κύλισης. Η παράμετρος scrollamount="2" ελέγχει την ταχύτητα κύλισης. Εάν θέλετε να αυξήσετε την ταχύτητα, αντικαταστήστε το 2 με έναν άλλο αριθμό. Η παράμετρος scrolldelay="1" είναι υπεύθυνη για την καθυστέρηση πριν από κάθε νέα κίνηση. Εάν θέλετε η εικόνα να κινείται με μεγάλες καθυστερήσεις, τότε ορίστε τον αριθμό σε 500 ή 1000, αλλά αν θέλετε κίνηση χωρίς φρένα, αφήστε το ήσυχο αυτή η παράμετρος. Δημοσιεύουμε τον κώδικα που προκύπτει στο ιστολόγιο και ευχαριστούμε τον αναγνώστη.

Εκτός από τη μεγάλη γκαλερί, μπορείτε να φτιάξετε μια μικρή ανεβάζοντας μικρές φωτογραφίες (πλάτος 150). Όλα γίνονται με τον ίδιο τρόπο, απλά εισάγετε μικρά αντί για μεγάλα. Δείτε πόσο υπέροχο έγινε.

Στη συνέχεια, θα σας πω πώς αλλιώς μπορείτε να διαφοροποιήσετε την ήδη δημιουργημένη συλλογή. Για παράδειγμα, θέλετε οι φωτογραφίες να μην πηγαίνουν από δεξιά προς τα αριστερά, αλλά αντίστροφα. Για να το κάνετε αυτό, προσθέστε την εντολή direction="right" στον κώδικα. Εάν θέλετε οι φωτογραφίες να μετακινούνται από τα δεξιά προς τα αριστερά και μετά πάλι πίσω, εισαγάγετε την εντολή Behaviour="alternate" στον κώδικα της συλλογής.

Εάν θέλετε να εκτελείτε φωτογραφίες από πάνω προς τα κάτω ή από κάτω προς τα πάνω, χρησιμοποιήστε αυτές τις εντολές:
κατεύθυνση = "κάτω" - οι φωτογραφίες πηγαίνουν από πάνω προς τα κάτω.
direction="up" - οι φωτογραφίες πηγαίνουν από κάτω προς τα πάνω.

Για να προσαρμόσετε το πλάτος και το ύψος, εισαγάγετε αυτές τις εντολές στον κώδικα της συλλογής:
πλάτος = "500" - αυτή την εντολήπροσαρμόζει το πλάτος της συλλογής. Αυτή τη στιγμή ο αριθμός είναι 500, που σημαίνει ότι το πλάτος της συλλογής θα περιοριστεί στα 500 pixel.
height="500" - αυτή η εντολή ρυθμίζει το ύψος της συλλογής. Αυτή τη στιγμή ο αριθμός είναι 500, που σημαίνει ότι το ύψος της συλλογής θα περιοριστεί στα 500 pixel.

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

Αυτή η σύντομη ανάρτηση απευθύνεται σε αρχάριους webmasters που δεν έχουν μάθει ακόμη πώς να χρησιμοποιούν το πρόγραμμα επεξεργασίας αναρτήσεων ιστότοπου στο WordPress. Το θέμα του άρθρου δεν προέκυψε από μόνο του, αλλά επέστησε την προσοχή σε έναν ιστότοπο στο πώς ένας webmaster προσφέρθηκε να χρησιμοποιήσει μια προσθήκη για τη δημιουργία μιας συλλογής εικόνων σε μηνύματα και σε σελίδες αναρτήσεων.

Σε ποια αρχαία πηγή βρήκε σύσταση για την εγκατάσταση του πρόσθετου, αλλά για όσους χρησιμοποιούν τη μηχανή WordPress για τουλάχιστον ένα ή δύο χρόνια και έχουν μελετήσει τις δυνατότητές της επεξεργαστής κειμένου, μπορεί να δημιουργήσει γκαλερί χωρίς πρόσθετα. Τελευταία έκδοσηΤο WordPress 3.5, το οποίο κυκλοφόρησε πρόσφατα, έχει γενικά βελτιώσει σημαντικά τις δυνατότητές του όσον αφορά την επεξεργασία και την προσθήκη αρχείων πολυμέσων, τη δημιουργία ειδικό παράθυροαπευθείας στο μπλοκ για τη φόρτωση και την επιλογή τους. Φοβερή ιδέα, το οποίο μπορεί να έχει δανειστεί από το Google Blogspot. Ναι, αυτό δεν είναι τόσο σημαντικό - αλλά από εμένα (και όχι μόνο) σεβασμός στους προγραμματιστές!

Πώς να δημιουργήσετε μια συλλογή εικόνων σε σελίδες ιστότοπου WordPress;

Μέθοδος φόρτωσης

Δεν θα περιγράψω τα πάντα λεπτομερώς με λόγια, αλλά θα προσπαθήσω να τα εξηγήσω όλα ξεκάθαρα με τη βοήθεια στιγμιότυπων οθόνης. Έτσι, προσθέστε το αρχείο πολυμέσων:

Θα ανοίξει το παραπάνω παράθυρο (αυτό το παράθυρο είναι μόνο για εκδόσεις που ξεκινούν από την 3.5, αλλά μπορείτε επίσης να χρησιμοποιήσετε εκδόσεις που ξεκινούν από την 3.3, αν δεν κάνω λάθος, δεν θα εμφανιστεί τέτοιο παράθυρο, αλλά υπάρχει μια λειτουργία για τη δημιουργία στοά). Επιλέξτε «Δημιουργία συλλογής»:

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

Η ακόλουθη εικόνα θα εμφανιστεί στο οπτικό πρόγραμμα επεξεργασίας:

Τώρα, για να βεβαιωθείτε ότι όλα πήγαν καλά, στον επεξεργαστή ανάρτησης, κάντε κλικ στο "Προβολή". Θα πρέπει να μοιάζει κάπως έτσι:

Αυτό είναι - η γκαλερί είναι έτοιμη! Ο χρήστης μπορεί να κάνει κλικ σε κάθε εικόνα, θα μεγεθύνεται στην οθόνη προβολής.

Σύρετε και αποθέστε

Μπορείτε επίσης να δημιουργήσετε μια συλλογή ή να προσθέσετε ΟΠΟΙΟΔΗΠΟΤΕ αρχείο πολυμέσων χρησιμοποιώντας τη μέθοδο μεταφοράς και απόθεσης. Για αυτό χρειάζεστε

1) ανοίξτε το παράθυρο για την προσθήκη αρχείων πολυμέσων.

2) ανοιχτό τον επιθυμητό φάκελοτον υπολογιστή στον οποίο βρίσκονται και κάνουν το μέγεθός του έτσι ώστε να είναι ορατό το πεδίο των αρχείων πολυμέσων στο φάκελο και το παράθυρο για την προσθήκη αρχείων του επεξεργαστή μας

Αφού κάνετε μερικά drag-and-drop, επιλέξτε τις εικόνες, κάντε κλικ στο "Δημιουργία συλλογής", επιλέξτε τις εικόνες - και όλα είναι υπέροχα! Για ευκολία στη χρήση, στις ρυθμίσεις της συλλογής, επιλέξτε έναν σύνδεσμο προς ένα αρχείο πολυμέσων και όχι μια σελίδα συνημμένου, ωστόσο, όπως θέλετε.

Βλέπω:

Η πλατφόρμα πολυμέσων Cincopa προσφέρει ένα πρόγραμμα δημιουργίας γκαλερί φωτογραφιών που είναι συμβατό με σχεδόν οποιονδήποτε ιστότοπο ή ιστολόγιο. Δημιουργήστε μια συλλογή φωτογραφιών χρησιμοποιώντας έναν οδηγό βήμα προς βήμα και ενσωματώστε την σε οποιαδήποτε ιστοσελίδα που δέχεται HTML ή δημοσιεύστε την ως ροή RSS. Είναι επίσης πλήρως συμβατό με πολλά Συστήματα CMS, όπως WordPress, Drupal, Joomla, TypePad, MediaWiki, Ning, Blogger, vBulletin, Weebly, WordPress MU και Buddy Press.

ΔΗΜΙΟΥΡΓΗΣΤΕ ΜΙΑ ΦΩΤΟΓΚΑΛΕΡΙ ΓΙΑ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ Ή ΤΟ BLOG ΣΑΣ ΑΠΛΗ ΚΑΙ ΔΩΡΕΑΝ!

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

Πώς λειτουργεί

1 Επιλέξτε ένα από τα καταπληκτικά μας δέρματα

2 Ανεβάστε τα αρχεία σας στο cloud” Cincopa

3 Λάβετε έναν απλό κώδικα και επικολλήστε τον στον ιστότοπό σας

ΕΠΙΛΕΞΤΕ ΔΕΡΜΑΤΑ ΓΙΑ ΤΗ ΦΩΤΟΓΚΑΛΕΡΙ ΣΑΣ

Πάνω από 40 skins για να διαλέξετε, συμπεριλαμβανομένων των Flash, Cooliris 3D, Lightbox, jQuery και πολλών άλλων. Προσαρμόστε τις ρυθμίσεις και προβάλετε γκαλερί φωτογραφιών σε άλλο παράθυρο.

Ανεβάστε τις φωτογραφίες σας

Αυτόματη αλλαγήμεγέθη φωτογραφιών. Μεταφορτώστε πολλές φωτογραφίες ταυτόχρονα σε μια μονάδα σύννεφο και διανείμετε τις σε φακέλους χρησιμοποιώντας το grag-and-drop. Ανοίξτε τα αργότερα από οποιαδήποτε συσκευή.

ΔΗΜΙΟΥΡΓΗΣΤΕ ΕΝΑ ΑΠΛΟ ΚΩΔΙΚΟ ΓΑΛΕΡΙ ΦΩΤΟΓΡΑΦΙΩΝ ΓΙΑ ΝΑ ΑΝΑΡΤΗΣΕΤΕ ΣΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΣΑΣ

Προσθέστε αρχεία στη συλλογή φωτογραφιών σας και το Cincopa θα δημιουργήσει αυτόματα απαιτούμενος κωδικόςγια να το τοποθετήσετε οπουδήποτε στο Διαδίκτυο. Προσθέστε επιπλέον φωτογραφίες ή επεξεργαστείτε τη συλλογή φωτογραφιών σας ανά πάσα στιγμή και αυτές οι αλλαγές θα ενημερωθούν αυτόματα και άμεσα στον ιστότοπό σας.

Το Cincopa είναι το πιο
ολοκληρωμένη πλατφόρμα πολυμέσων

ΡΙΞΤΕ ΜΙΑ ΜΑΤΙΑ ΣΤΙΣ ΚΑΤΑΠΛΗΚΤΕΣ ΦΩΤΟΓΑΛΕΡΙ ΜΑΣ Skins

Δείτε αυτές τις εκπληκτικές γκαλερί επίδειξης φωτογραφιών:

1. Responsive Photo Gallery HTML5

   Νέος σχεδίαση με απόκρισηγκαλερί φωτογραφιών συμβατές με οποιοδήποτε HTMLιστοσελίδα, με όλους δημοφιλές CMSσυστήματα και εκατοντάδες κοινωνικά δίκτυα.

2. Flash (FLASH) ΓΑΛΕΡΙ ΦΩΤΟΓΡΑΦΙΩΝ

   Δημιουργήστε μια συλλογή φωτογραφιών flash και προσθέστε μουσική υπόκρουση. Ψάξτε στο iPhone ή σε άλλο φορητή συσκευή. Το Cincopa θα μετατρέψει αυτόματα τη συλλογή φωτογραφιών σας στην πιο κατάλληλη μορφή για οποιαδήποτε συσκευή, όπως .mp4 και 3gpp.

3. 3D COOLIRIS PHOTO GALLERY

   Καταπλήξτε το κοινό σας με τις φωτογραφίες Cooliris 3D Wall. Το Cincopa θα προσθέσει έναν σύνδεσμο στις φωτογραφίες σας, επιτρέποντας στους επισκέπτες σας να τις δουν σε μια εκπληκτική τρισδιάστατη προβολή Cooliris.

4. Carousel (CAROUSEL) ΦΩΤΟΓΡΑΦΙΕΣ

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

5. ΜΙΚΡΟΦΟΡΙΑ ΦΩΤΟΓΡΑΦΙΩΝ

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

6. Μεταβατικές ΦΩΤΟΓΑΛΕΡΙΕΣ

   Η ποικιλία των διαθέσιμων μεταβάσεων για τη συλλογή φωτογραφιών σας θα προσθέσει μια μοναδική πινελιά στην παρουσίασή σας. Ρυθμίστε το χρόνο μετάβασης μεταξύ των φωτογραφιών στο 1/1000ο του δευτερολέπτου. Επιλέξτε από αυτόματη κύλιση, περιστροφή εικόνας, fade in/out, loop κ.λπ.

7. Lightbox (LIGHTBOX) ΦΩΤΟΓΡΑΦΙΕΣ

   Το Lightbox είναι ένα από τα περισσότερα δημοφιλείς τρόπους, για να προβάλλετε τις φωτογραφίες και τις εφαρμογές σας στο διαδίκτυο. Ελαφρύ και κομψό είναι δύο λέξεις που χρησιμοποιούνται συχνά για να περιγράψουν τη συλλογή φωτογραφιών Lightbox.

8. PHOTO GALLERY ΜΕ ΜΟΥΣΙΚΗ

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

CINCOPA DEDICATED SERVER ΓΡΗΓΟΡΟΙ, ΑΞΙΟΠΙΣΤΕΣ ΚΑΙ ΑΣΦΑΛΕΣ ΑΠΟΘΗΚΕΥΣΗ ΚΑΙ ΠΑΡΕΧΟΥΝ ΑΔΙΑΚΟΠΤΗ ΠΡΟΣΒΑΣΗ ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ ΣΑΣ ΣΤΟ ΔΙΑΔΙΚΤΥΟ

Όλες οι φωτογραφίες σας είναι εντελώς ιδιωτικές. Οι διακομιστές Cincopa χρησιμοποιούν δύο σετ δημόσιων/ιδιωτικών κλειδιών, κρυπτογράφηση κλειδιού 1024-bit και αλγόριθμο κατακερματισμού MD5, καθώς και έναν μηχανισμό Token. Κανείς δεν μπορεί να έχει πρόσβαση στις φωτογραφίες σας χωρίς την άδειά σας. Πρόσθετοι λόγοι για τους οποίους πρέπει να χρησιμοποιήσετε Διακομιστές Cincopaγια φιλοξενία αρχείων:

1. 44 δέρματα για να διαλέξετε
2. Πλήρες αντίγραφο ασφαλείας για να διατηρείτε τις φωτογραφίες σας ασφαλείς
3. Cloud Computing- ασφαλής πρόσβαση σε αρχεία από οποιονδήποτε υπολογιστή ή άλλη συσκευή
4. Μετρήσεις χρήσης αποθηκευτικού χώρου και εύρους ζώνης
5. Αυτόματη αλλαγή μεγέθους φωτογραφίας
6. Πλήρως επεκτάσιμο - από προσωπικά ιστολόγια και μικρές επιχειρήσεις έως μεγάλες επιχειρήσεις
7. Πλήρης υποστήριξηγια IPhone, iPad, Blackberry και άλλες τεχνολογίες PDA και smartphone
8. 100% δωρεάν λογαριασμόδίνει 400 MB διαδικτυακή αποθήκευσηκαι 200 ​​MB χρήσης δεδομένων ανά μήνα, πολύ περισσότερα από όσα χρειάζονται οι περισσότερες γκαλερί φωτογραφιών
9. Αγορά πακέτου μεγέθυνσης χώρο στο δίσκοκαι κίνηση, ανά πάσα στιγμή, χωρίς κίνδυνο
10. Δωρεάν δοκιμαστικές εκδόσεις επαγγελματικών πακέτων!