html photo gallerie
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
html photo gallerie
Καλησπέρα.. θέλω να ρωτήσω αν είιναι προγραμματιστικά σωστό το παρακάτω...:
Θέλω να φτιάξω ένα άλμπουμ φωτογραφιών, όπου θα εμφανίζονται σε διαφορετικό παράθυρο απο το κύριο παράθυρο του σαιτ... Σε αυτό το παράθυρο λοιπόν, θα εμφανίζεται μια φωτογραφία και χρησιμοποιώντας ο χρήστης τα βελάκια θα μπορεί να εμφανίζει στο ίδιο παράθυρο την επόμενη/προηγούμενη φωτογραφία...
Αυτό σκέφτομαι να το κάνω απλά, δημιουργόντας για κάθε φωτο. μια διαφορετική σελίδα που θα την περιέχει... Έτσι κάθε σελίδα θα καλεί μια άλλη...
Αυτό είναι σωστό...; Ρωτάω γιατί το πλήθος των φωτογραφιών δεν είναι μικρό...
Υπάρχει άλλως τρόπος...;
edit: Οι φωτογραφίες σε τι μορφή να είναι ώστε να είναι πιο γρήγορες στην εμφάνηση...; πιο ποιοτικές...;
Διαβάζω ότι η jpg είναι προτιμότερη... Αν έχετε άλλη άποψη καλοδεχούμενη...
Θέλω να φτιάξω ένα άλμπουμ φωτογραφιών, όπου θα εμφανίζονται σε διαφορετικό παράθυρο απο το κύριο παράθυρο του σαιτ... Σε αυτό το παράθυρο λοιπόν, θα εμφανίζεται μια φωτογραφία και χρησιμοποιώντας ο χρήστης τα βελάκια θα μπορεί να εμφανίζει στο ίδιο παράθυρο την επόμενη/προηγούμενη φωτογραφία...
Αυτό σκέφτομαι να το κάνω απλά, δημιουργόντας για κάθε φωτο. μια διαφορετική σελίδα που θα την περιέχει... Έτσι κάθε σελίδα θα καλεί μια άλλη...
Αυτό είναι σωστό...; Ρωτάω γιατί το πλήθος των φωτογραφιών δεν είναι μικρό...
Υπάρχει άλλως τρόπος...;
edit: Οι φωτογραφίες σε τι μορφή να είναι ώστε να είναι πιο γρήγορες στην εμφάνηση...; πιο ποιοτικές...;
Διαβάζω ότι η jpg είναι προτιμότερη... Αν έχετε άλλη άποψη καλοδεχούμενη...
- cyberpython
- Mbyte level
- Posts: 654
- Joined: Wed Nov 21, 2007 8:18 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Αθηνα
- Contact:
Re: html photo gallerie
Αν και δεν κατάλαβα ακριβώς τι θέλεις να κάνεις, υπάρχουν πολλές λύσεις για ένα photo-album.
Μία απο αυτές είναι το flash αλλά δεν το πολυσυμπαθώ σαν τεχνολογία (χωρίς αυτό να σημαίνει οτι δεν είναι μία σπουδαία τεχνολογία - απλά η προσωπική μου άποψη)
Μία άλλη λύση είναι η χρήση javascript, όπου αποθηκεύεις όλα image urls σε ένα πίνακα, και σε ένα άλλο τα urls των thumbnails τους. Έπειτα φτιάχνεις μία σελίδα με τα thumbnails(προαιρετικό) και μετά για να εμφανίσεις την εικόνα στο image που παίζει το ρόλο της "οθόνης" παίρνεις το src ενός image από τα thumbnails (ή το επόμενο url στον πίνακα αν δουλεύεις με next/previous) και κάνεις το src του image-οθόνης ίσο με αυτό το url. Μπέρδεμα; Δές τον κώδικα ξavascript αυτής της σελίδας http://my-codebits.site88.net/workbench/ για το πως έχω φτιάξει ένα τέτοιο slideshow (που πολύ εύκολα μπορείς να το κάνεις album με thumbnails).
Όσο για τις εικόνες προτείνω png αν είναι φωτογραφίες (μικρότερο μέγεθος - μη απωλεστική συμπίεση).
Αν είναι vector γραφικά που θα σχεδιαστούν από εδώ και πέρα, τότε svg.
Μία απο αυτές είναι το flash αλλά δεν το πολυσυμπαθώ σαν τεχνολογία (χωρίς αυτό να σημαίνει οτι δεν είναι μία σπουδαία τεχνολογία - απλά η προσωπική μου άποψη)
Μία άλλη λύση είναι η χρήση javascript, όπου αποθηκεύεις όλα image urls σε ένα πίνακα, και σε ένα άλλο τα urls των thumbnails τους. Έπειτα φτιάχνεις μία σελίδα με τα thumbnails(προαιρετικό) και μετά για να εμφανίσεις την εικόνα στο image που παίζει το ρόλο της "οθόνης" παίρνεις το src ενός image από τα thumbnails (ή το επόμενο url στον πίνακα αν δουλεύεις με next/previous) και κάνεις το src του image-οθόνης ίσο με αυτό το url. Μπέρδεμα; Δές τον κώδικα ξavascript αυτής της σελίδας http://my-codebits.site88.net/workbench/ για το πως έχω φτιάξει ένα τέτοιο slideshow (που πολύ εύκολα μπορείς να το κάνεις album με thumbnails).
Όσο για τις εικόνες προτείνω png αν είναι φωτογραφίες (μικρότερο μέγεθος - μη απωλεστική συμπίεση).
Αν είναι vector γραφικά που θα σχεδιαστούν από εδώ και πέρα, τότε svg.
- djsolid
- Kilobyte level
- Posts: 483
- Joined: Thu Dec 02, 2004 7:36 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Πετράλωνα
- Contact:
Re: html photo gallerie
Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery
Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!
[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!
[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
Re: html photo gallerie
Πάρα πολύ ωραίο.... μπορείς ωστόσο να μου εξηγήσεις το παρακάτω...;djsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery
Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!
[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
Τι είναι...;Fifth step: Taking care of thumbnails.
Unless you deactivate the carousel, you will need working thumbnails.
To generate the thumbnails, you have different options:
Using the included php script to resize the pictures. To do that, use the option:
useThumbGenerator: true If you use it:
Don't forget to make a "cache/" folder that is world writeable, so the script can cache your images.
Remove the images with class "thumbnail" from your element.
Making your own generator or using manually resized images.
To do so, use the way described above in the second step to give the thumbnail urls to SmoothGallery.
- Spoiler: εμφάνιση/απόκρυψη
Που να γράψω τον κώδικα php?
- tsilochr
- Wow! Terabyte level
- Posts: 3246
- Joined: Tue Mar 16, 2004 2:47 pm
- Academic status: PhD
- Gender: ♂
- Location: mm.aueb.gr
- Contact:
Re: html photo gallerie
Δες τα παραδείγματα που έχει μέσα στο zip. Eπί της ουσίας πρέπει να κάνεις import τα javascript script files του εργαλείου και στη συνέχεια το html κείμενο να έχει συγκεκριμένο layout, ένα div για κάθε φωτογραφία. Το θέμα είναι να κάνεις generate αυτόματα το div για κάθε φωτογραφία -> αυτό θα το κάνεις με php
- Sreak
- Venus Project Founder
- Posts: 956
- Joined: Fri Apr 02, 2004 9:56 am
- Academic status: PhD
- Location: eltrun.gr
Re: html photo gallerie
Πολύ καλό! Κιόλας το χρησιμοποίησα, ήταν ότι ακριβώς έψαχναdjsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery
Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!
[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
Re: html photo gallerie
Το χρησιμοποίησες....; Το πρόβλημά μου είναι το active x που θέλει ενεργοποίηση... αν ο χρήστης δεν ξέρει πολλά απόSreak wrote:Πολύ καλό! Κιόλας το χρησιμοποίησα, ήταν ότι ακριβώς έψαχναdjsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery
Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!
[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
νετ - και δεν ενεργοποιήσει τον active x τότε το slideshow δεν λειτουργεί...
Πως το έκανες αυτό...;
- cyberpython
- Mbyte level
- Posts: 654
- Joined: Wed Nov 21, 2007 8:18 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Αθηνα
- Contact:
Re: html photo gallerie
Χμμμμ.... Δε βλέπω κάτι για ActiveX.....
Αυτό που πρέπει να κάνεις είναι:
1) να κατεβάσεις το συμπιεσμένο αρχείο και να το αποσυμπιέσεις στον ίδιο φάκελο με τη σελίδα σου (δηλαδή οι υποφάκελοι scripts, images κλπ να είναι μέσα στο φάκελο που βρίσκεται η σελίδα στη οποία θέλεις να εμφανίσεις το slideshow)
2) Να προσθέσεις στο <head>...</head> τμήμα της σελίδας σου τις γραμμές:
3)Να προσθέσεις μερικά images (στην πραγματικότητα divs) στο slideshow :
4)καλείς το script που θα εμφανίσει τη gallery:
Ανάλογα με το τι θέλεις (να αλλάζουν αυτόματα οι εικόνες κλπ. υπάρχουν διαφορετικές εκδοχές του script στην σελίδα που το κατέβασες στο getting started)
Το παραπάνω θα το γράψεις στο body της σελίδας, πάνω ακριβώς από εκεί που ξεκινάς να ορίσεις τα divs του προηγούμενου βήματος
5) Πρέπει να ορίσεις το μέγεθος του slideshow. Αυτό θα το κάνεις μέσω css (είτε σε εξωτερικό αρχείο ή στο head της σελίδας).
Από εκεί και πέρα έχει και άλλες δυνατότητες όπως τα gallery sets που σου επιτρέπει να αλλάζεις ανάμεσα σε διαφορετικές galleries κλπ.
Αυτό που πρέπει να κάνεις είναι:
1) να κατεβάσεις το συμπιεσμένο αρχείο και να το αποσυμπιέσεις στον ίδιο φάκελο με τη σελίδα σου (δηλαδή οι υποφάκελοι scripts, images κλπ να είναι μέσα στο φάκελο που βρίσκεται η σελίδα στη οποία θέλεις να εμφανίσεις το slideshow)
2) Να προσθέσεις στο <head>...</head> τμήμα της σελίδας σου τις γραμμές:
Code: Select all
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
Code: Select all
<div id="myGallery">
<div class="imageElement">
<h3>Εικόνα1 Τίτλος1</h3>
<p>Περιγραφή εικόνας 1</p>
<a href="url σελίδας που θα ανοίγει / προαιρετικό" title="τίτλος λινκ" class="open"></a>
<img src="url εικόνας σε πλήρες μέγεθος" class="full" />
<img src="url thumbnail για το caroussel όπου φαίνονται όλες οι φωτο της gallery" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Εικόνα2 Τίτλος2</h3>
<p>Περιγραφή εικόνας 2</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
......
κλπ
......
</div>
Code: Select all
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), { //<-- Προσοχή, εδώ ('myGallery') μπαίνει το id που έδωσες πιο πάνω στο βήμα 3
timed: false
});
}
window.addEvent('domready',startGallery);
</script>
Το παραπάνω θα το γράψεις στο body της σελίδας, πάνω ακριβώς από εκεί που ξεκινάς να ορίσεις τα divs του προηγούμενου βήματος
5) Πρέπει να ορίσεις το μέγεθος του slideshow. Αυτό θα το κάνεις μέσω css (είτε σε εξωτερικό αρχείο ή στο head της σελίδας).
Code: Select all
#myGallery
{
width: 400px !important;
height: 200px !important;
}
Από εκεί και πέρα έχει και άλλες δυνατότητες όπως τα gallery sets που σου επιτρέπει να αλλάζεις ανάμεσα σε διαφορετικές galleries κλπ.
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
Re: html photo gallerie
Μα αυτό κάνω αλλά μου το βγάζει.... Ωστόσο παρατήρησα ότι αν ανοίξω την σελίδα από έναν broswer που έφτιαξα εγώ, τότε δεν ζητάει active x και μου βγάζει το slideshow κανονικά... Δεν ξέρω τι φταίει... Ιδέες....;
- gasparosoft
- Gbyte level
- Posts: 1920
- Joined: Fri Oct 19, 2007 8:03 pm
Re: html photo gallerie
Μην χρησιμοποιείς Internet Explorer αυτή είναι ή λύση .
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
Re: html photo gallerie
συμφωνώ.... χρησιμοποιώ DAGLAS NAVIGATOR...gasparosoft wrote:Μην χρησιμοποιείς Internet Explorer αυτή είναι ή λύση .
αλλά αυτό είναι κάτι που θα ανεβάσω στο internet άρα πρέπει να λειτουργεί σωστά και σε ΙΕ
edit: Πώς μπορώ να κάνω ένα νέο παράθυρο που ανοίγεται να έχει συγκεκριμένο μέγεθος...;
- Sreak
- Venus Project Founder
- Posts: 956
- Joined: Fri Apr 02, 2004 9:56 am
- Academic status: PhD
- Location: eltrun.gr
Re: html photo gallerie
Όντως αυτό με ActiveX είναι σοβαρό πρόβλημα για μία public εφαρμογή...
- cyberpython
- Mbyte level
- Posts: 654
- Joined: Wed Nov 21, 2007 8:18 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Αθηνα
- Contact:
Re: html photo gallerie
@proskopos: Κάτι πολύ περίεργο που παρατήρησα και διάβασα και το forum του SmoothGallery (συνέβη και σε εμένα): ενώ όταν έγραψα μόνος μου το script (στην πραγματικότητα αντιγραφή από το site αλλά όχι copy-paste) δε δούλευε (σε firefox) ενώ όταν άνοιγα ένα από τα demos που έχει μέσα στο αρχείο zip που κατέβασα δούλευε. Οπότε πρόσθεσα στο <head>...</head> τα scripts και το css, έκανα copy-paste από το αρχείο demo τον κώδικα και το δοκίμασα. Δούλεψε! Οπότε, άλλαξα τα divs με τις δικές μου εικόνες και έτοιμο! Δοκίμασε να ανοίξεις ένα αρχείο από τα demo να δεις αν τα δείχνει σωστά ο IE.
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
Re: html photo gallerie
Ναι το είδα και εγώ... Απο το demo το είδα και εγώ, και μου λειτουργεί κανονικά.... πάντως είναι πολύ περίεργο... Αλλά θέλω μου αρέσει σαν slideshow και δεν θέλω να το αλλάξω με κάτι άλλο...cyberpython wrote:@proskopos: Κάτι πολύ περίεργο που παρατήρησα και διάβασα και το forum του SmoothGallery (συνέβη και σε εμένα): ενώ όταν έγραψα μόνος μου το script (στην πραγματικότητα αντιγραφή από το site αλλά όχι copy-paste) δε δούλευε (σε firefox) ενώ όταν άνοιγα ένα από τα demos που έχει μέσα στο αρχείο zip που κατέβασα δούλευε. Οπότε πρόσθεσα στο <head>...</head> τα scripts και το css, έκανα copy-paste από το αρχείο demo τον κώδικα και το δοκίμασα. Δούλεψε! Οπότε, άλλαξα τα divs με τις δικές μου εικόνες και έτοιμο! Δοκίμασε να ανοίξεις ένα αρχείο από τα demo να δεις αν τα δείχνει σωστά ο IE.
- cyberpython
- Mbyte level
- Posts: 654
- Joined: Wed Nov 21, 2007 8:18 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Αθηνα
- Contact:
Re: html photo gallerie
Αν λειτουργεί κανονικά από το emo αποκλείεται να χρειάζεται activeX για να τρέξει.
Κάτι δε γίνεται σωστά...
Κάτι δε γίνεται σωστά...
- proskopos
- Wow! Terabyte level
- Posts: 2808
- Joined: Tue Dec 18, 2007 4:01 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Στα φεγγάρια του Πλάνταρ...
- Contact:
Re: html photo gallerie
Στο συγκεκριμένο gallerie αν εγώ έχω ενσωματώσει 500 φωτογραφίες συνολικού μεγέθους 30+ΜΒ τότε το gallerie θα αργεί να εμφανιστεί(επειδή θα πρέπει πρώτα να κατεβουν στον υπολογιστη του χρήστη όλες οι φωτό), ή θα εμφανιστεί αμέσως και η καθυστέριση θα υπάρχει μόνο σε κάθε αλλαγή φωτογραφίας (οπότε δεν έχει σημασία ο αριθμός των φωτό που έχω ενσωματώσει....)djsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery
Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!
[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
- cyberpython
- Mbyte level
- Posts: 654
- Joined: Wed Nov 21, 2007 8:18 pm
- Academic status: Alumnus/a
- Gender: ♂
- Location: Αθηνα
- Contact:
Re: html photo gallerie
Έχω την εντύπωση οτι φορτώνει μερικές και τις υπόλοιπες τις φορτώνει ενώ παράλληλα προβάλλονται οι ήδη υπάρχουσες (αλλά μπορεί να κάνω και λάθος), γιατί ενώ προβάλλονται οι πρώτες εικόνες μου γράφει loading....proskopos wrote: Στο συγκεκριμένο gallerie αν εγώ έχω ενσωματώσει 500 φωτογραφίες συνολικού μεγέθους 30+ΜΒ τότε το gallerie θα αργεί να εμφανιστεί(επειδή θα πρέπει πρώτα να κατεβουν στον υπολογιστη του χρήστη όλες οι φωτό), ή θα εμφανιστεί αμέσως και η καθυστέριση θα υπάρχει μόνο σε κάθε αλλαγή φωτογραφίας (οπότε δεν έχει σημασία ο αριθμός των φωτό που έχω ενσωματώσει....)