html photo gallerie

Συζητήσεις για γλώσσες προγραμματισμού και θέματα σχετικά με προγραμματισμό.
Post Reply
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

html photo gallerie

Post by proskopos » Tue Jul 15, 2008 10:43 pm

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

edit: Οι φωτογραφίες σε τι μορφή να είναι ώστε να είναι πιο γρήγορες στην εμφάνηση...; πιο ποιοτικές...;
Διαβάζω ότι η jpg είναι προτιμότερη... Αν έχετε άλλη άποψη καλοδεχούμενη...
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
cyberpython
Mbyte level
Mbyte level
Posts: 654
Joined: Wed Nov 21, 2007 8:18 pm
Academic status: Alumnus/a
Gender:
Location: Αθηνα
Contact:

Re: html photo gallerie

Post by cyberpython » Tue Jul 15, 2008 11:14 pm

Αν και δεν κατάλαβα ακριβώς τι θέλεις να κάνεις, υπάρχουν πολλές λύσεις για ένα 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.
User avatar
djsolid
Kilobyte level
Kilobyte level
Posts: 483
Joined: Thu Dec 02, 2004 7:36 pm
Academic status: Alumnus/a
Gender:
Location: Πετράλωνα
Contact:

Re: html photo gallerie

Post by djsolid » Wed Jul 16, 2008 9:56 am

Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery

Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!

[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

Re: html photo gallerie

Post by proskopos » Wed Jul 16, 2008 3:57 pm

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: εμφάνιση/απόκρυψη
Μήπως είναι αυτό που σχετίζεται με το active x που μου λέει να ενεργοποιήσω...; αν όχι τι να κάνω με αυτό...; Γιατί μόλις βγάζει το μήνυμα ενεργοποίησης το slide show φαίνεται σαν απλές φωτό.. και μόνο αν ενεργοποιήσω το active x, φαίνετε κανονικά...
Και πως το κάνω...?
Που να γράψω τον κώδικα php?
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
tsilochr
Wow! Terabyte level
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

Post by tsilochr » Wed Jul 16, 2008 4:37 pm

Δες τα παραδείγματα που έχει μέσα στο zip. Eπί της ουσίας πρέπει να κάνεις import τα javascript script files του εργαλείου και στη συνέχεια το html κείμενο να έχει συγκεκριμένο layout, ένα div για κάθε φωτογραφία. Το θέμα είναι να κάνεις generate αυτόματα το div για κάθε φωτογραφία -> αυτό θα το κάνεις με php
User avatar
Sreak
Venus Project Founder
Venus Project Founder
Posts: 956
Joined: Fri Apr 02, 2004 9:56 am
Academic status: PhD
Location: eltrun.gr

Re: html photo gallerie

Post by Sreak » Wed Jul 16, 2008 11:28 pm

djsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery

Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!

[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
Πολύ καλό! Κιόλας το χρησιμοποίησα, ήταν ότι ακριβώς έψαχνα ;)
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

Re: html photo gallerie

Post by proskopos » Thu Jul 17, 2008 12:46 am

Sreak wrote:
djsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery

Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!

[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
Πολύ καλό! Κιόλας το χρησιμοποίησα, ήταν ότι ακριβώς έψαχνα ;)
Το χρησιμοποίησες....; Το πρόβλημά μου είναι το active x που θέλει ενεργοποίηση... αν ο χρήστης δεν ξέρει πολλά από
νετ - και δεν ενεργοποιήσει τον active x τότε το slideshow δεν λειτουργεί...
Πως το έκανες αυτό...;
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
cyberpython
Mbyte level
Mbyte level
Posts: 654
Joined: Wed Nov 21, 2007 8:18 pm
Academic status: Alumnus/a
Gender:
Location: Αθηνα
Contact:

Re: html photo gallerie

Post by cyberpython » Thu Jul 17, 2008 3:34 am

Χμμμμ.... Δε βλέπω κάτι για ActiveX.....
Αυτό που πρέπει να κάνεις είναι:
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" />
3)Να προσθέσεις μερικά images (στην πραγματικότητα divs) στο slideshow :

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> 
4)καλείς το script που θα εμφανίσει τη gallery:

Code: Select all

<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {  //<-- Προσοχή, εδώ ('myGallery') μπαίνει το id που έδωσες πιο πάνω στο βήμα 3
					timed: false
				});
			}
			window.addEvent('domready',startGallery);
		</script>
Ανάλογα με το τι θέλεις (να αλλάζουν αυτόματα οι εικόνες κλπ. υπάρχουν διαφορετικές εκδοχές του script στην σελίδα που το κατέβασες στο getting started)

Το παραπάνω θα το γράψεις στο body της σελίδας, πάνω ακριβώς από εκεί που ξεκινάς να ορίσεις τα divs του προηγούμενου βήματος

5) Πρέπει να ορίσεις το μέγεθος του slideshow. Αυτό θα το κάνεις μέσω css (είτε σε εξωτερικό αρχείο ή στο head της σελίδας).

Code: Select all

#myGallery
{
width: 400px !important;
height: 200px !important;
} 


Από εκεί και πέρα έχει και άλλες δυνατότητες όπως τα gallery sets που σου επιτρέπει να αλλάζεις ανάμεσα σε διαφορετικές galleries κλπ.
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

Re: html photo gallerie

Post by proskopos » Thu Jul 17, 2008 9:27 am

Μα αυτό κάνω αλλά μου το βγάζει.... Ωστόσο παρατήρησα ότι αν ανοίξω την σελίδα από έναν broswer που έφτιαξα εγώ, τότε δεν ζητάει active x και μου βγάζει το slideshow κανονικά... Δεν ξέρω τι φταίει... Ιδέες....;
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
gasparosoft
Gbyte level
Gbyte level
Posts: 1920
Joined: Fri Oct 19, 2007 8:03 pm

Re: html photo gallerie

Post by gasparosoft » Thu Jul 17, 2008 9:38 am

Μην χρησιμοποιείς Internet Explorer αυτή είναι ή λύση :smt023 .
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

Re: html photo gallerie

Post by proskopos » Thu Jul 17, 2008 9:45 am

gasparosoft wrote:Μην χρησιμοποιείς Internet Explorer αυτή είναι ή λύση :smt023 .
συμφωνώ.... χρησιμοποιώ DAGLAS NAVIGATOR... :)
αλλά αυτό είναι κάτι που θα ανεβάσω στο internet άρα πρέπει να λειτουργεί σωστά και σε ΙΕ

edit: Πώς μπορώ να κάνω ένα νέο παράθυρο που ανοίγεται να έχει συγκεκριμένο μέγεθος...;
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
Sreak
Venus Project Founder
Venus Project Founder
Posts: 956
Joined: Fri Apr 02, 2004 9:56 am
Academic status: PhD
Location: eltrun.gr

Re: html photo gallerie

Post by Sreak » Fri Jul 18, 2008 10:31 am

Όντως αυτό με ActiveX είναι σοβαρό πρόβλημα για μία public εφαρμογή...
User avatar
cyberpython
Mbyte level
Mbyte level
Posts: 654
Joined: Wed Nov 21, 2007 8:18 pm
Academic status: Alumnus/a
Gender:
Location: Αθηνα
Contact:

Re: html photo gallerie

Post by cyberpython » Fri Jul 18, 2008 8:30 pm

@proskopos: Κάτι πολύ περίεργο που παρατήρησα και διάβασα και το forum του SmoothGallery (συνέβη και σε εμένα): ενώ όταν έγραψα μόνος μου το script (στην πραγματικότητα αντιγραφή από το site αλλά όχι copy-paste) δε δούλευε (σε firefox) ενώ όταν άνοιγα ένα από τα demos που έχει μέσα στο αρχείο zip που κατέβασα δούλευε. Οπότε πρόσθεσα στο <head>...</head> τα scripts και το css, έκανα copy-paste από το αρχείο demo τον κώδικα και το δοκίμασα. Δούλεψε! Οπότε, άλλαξα τα divs με τις δικές μου εικόνες και έτοιμο! Δοκίμασε να ανοίξεις ένα αρχείο από τα demo να δεις αν τα δείχνει σωστά ο IE.
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

Re: html photo gallerie

Post by proskopos » Fri Jul 18, 2008 8:35 pm

cyberpython wrote:@proskopos: Κάτι πολύ περίεργο που παρατήρησα και διάβασα και το forum του SmoothGallery (συνέβη και σε εμένα): ενώ όταν έγραψα μόνος μου το script (στην πραγματικότητα αντιγραφή από το site αλλά όχι copy-paste) δε δούλευε (σε firefox) ενώ όταν άνοιγα ένα από τα demos που έχει μέσα στο αρχείο zip που κατέβασα δούλευε. Οπότε πρόσθεσα στο <head>...</head> τα scripts και το css, έκανα copy-paste από το αρχείο demo τον κώδικα και το δοκίμασα. Δούλεψε! Οπότε, άλλαξα τα divs με τις δικές μου εικόνες και έτοιμο! Δοκίμασε να ανοίξεις ένα αρχείο από τα demo να δεις αν τα δείχνει σωστά ο IE.
Ναι το είδα και εγώ... Απο το demo το είδα και εγώ, και μου λειτουργεί κανονικά.... πάντως είναι πολύ περίεργο... Αλλά θέλω μου αρέσει σαν slideshow και δεν θέλω να το αλλάξω με κάτι άλλο...
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
cyberpython
Mbyte level
Mbyte level
Posts: 654
Joined: Wed Nov 21, 2007 8:18 pm
Academic status: Alumnus/a
Gender:
Location: Αθηνα
Contact:

Re: html photo gallerie

Post by cyberpython » Sat Jul 19, 2008 12:59 am

Αν λειτουργεί κανονικά από το emo αποκλείεται να χρειάζεται activeX για να τρέξει.
Κάτι δε γίνεται σωστά...
User avatar
proskopos
Wow! Terabyte level
Wow! Terabyte level
Posts: 2808
Joined: Tue Dec 18, 2007 4:01 pm
Academic status: Alumnus/a
Gender:
Location: Στα φεγγάρια του Πλάνταρ...
Contact:

Re: html photo gallerie

Post by proskopos » Mon Jul 21, 2008 10:53 am

djsolid wrote:Ένα πάρα πολύ ωραίο image gallery είναι το Smooth Gallery

Είναι javascript και έχει ενα αρκετά έυκολο API που μπορείς να το χειριστείς. Και πάνω απ' όλα είναι απίστευτα ωραίο εμφανισιακά!!!!

[urlhttp://smoothgallery.jondesign.net/showcase/gallery/]π.χ.[/url]
Στο συγκεκριμένο gallerie αν εγώ έχω ενσωματώσει 500 φωτογραφίες συνολικού μεγέθους 30+ΜΒ τότε το gallerie θα αργεί να εμφανιστεί(επειδή θα πρέπει πρώτα να κατεβουν στον υπολογιστη του χρήστη όλες οι φωτό), ή θα εμφανιστεί αμέσως και η καθυστέριση θα υπάρχει μόνο σε κάθε αλλαγή φωτογραφίας (οπότε δεν έχει σημασία ο αριθμός των φωτό που έχω ενσωματώσει....)
Extreme Makeover... Mind edition...
3,6 μαθήματα/εξεταστική....
Image
User avatar
cyberpython
Mbyte level
Mbyte level
Posts: 654
Joined: Wed Nov 21, 2007 8:18 pm
Academic status: Alumnus/a
Gender:
Location: Αθηνα
Contact:

Re: html photo gallerie

Post by cyberpython » Wed Jul 23, 2008 8:55 pm

proskopos wrote: Στο συγκεκριμένο gallerie αν εγώ έχω ενσωματώσει 500 φωτογραφίες συνολικού μεγέθους 30+ΜΒ τότε το gallerie θα αργεί να εμφανιστεί(επειδή θα πρέπει πρώτα να κατεβουν στον υπολογιστη του χρήστη όλες οι φωτό), ή θα εμφανιστεί αμέσως και η καθυστέριση θα υπάρχει μόνο σε κάθε αλλαγή φωτογραφίας (οπότε δεν έχει σημασία ο αριθμός των φωτό που έχω ενσωματώσει....)
Έχω την εντύπωση οτι φορτώνει μερικές και τις υπόλοιπες τις φορτώνει ενώ παράλληλα προβάλλονται οι ήδη υπάρχουσες (αλλά μπορεί να κάνω και λάθος), γιατί ενώ προβάλλονται οι πρώτες εικόνες μου γράφει loading....
Post Reply

Return to “Προγραμματισμός”