Εγκατάσταση του lightbox 2

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 13 Οκτ 2009 13:47

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

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Εγκατάσταση του lightbox 2

Δημοσίευση από geoki » 14 Οκτ 2009 23:30

Πολύ απλό είναι

Κατέβασε το zip από εδώ να δεις ένα απλό demo. Στην ουσία είναι τα αρχεία που δίνει η σελίδα τους, απλά εγώ καθάρισα το html αρχείο για να μη σε μπερδεύει.

Πως μπορείς να το μεταφέρεις σε ένα δικό σου project?

1 Αντέγραψε τους φακέλους js, images, css

2. Στο head της σελίδας που θέλεις να προσθέσεις το script πρόσθεσε τον παρακάτω κώδικα.

Κώδικας: Επιλογή όλων

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

3. Η μεγάλη σου εικόνα είναι η images/image-1.jpg και η μικρογραφία η images/thumb-1.jpg.


4. Ο κώδικας της μικρογραφίας είναι

Κώδικας: Επιλογή όλων

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
Καλή επιτυχία

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 15 Οκτ 2009 00:08

Σ ευχαριστώ πολύ να σαι καλά.
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 15 Οκτ 2009 00:16

Βασικά έχω 1 απορία ακόμα, όταν τα 2 images το μικρό δηλαδή & το μεγάλο βρίσκονται στο root του server όπου είναι & το index , δεν τα βάζω δηλ σε φάκελο images δηλώνω το το root του server π.χ http://www.mysite.gr/image1.jpg στον κώδικα ή αφαιρώ το images δηλ το <a href="images/image-1.jpg γίνεται
<a href="image-1.jpg"?Στο css αρχείο λογικά πρέπει ν αλλάξω το root των images close και να μπει το root στην τοποθεσία που θα μπουν στον server έτσι?Σ ευχαριστώ για την βοήθειά σου.
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Εγκατάσταση του lightbox 2

Δημοσίευση από geoki » 15 Οκτ 2009 02:14

Κοίτα μέσα στο φάκελο images έχει κάποιες εικονίτσες όπως το close.gif , closelabel.gif, loading.gif, nextlabel.gif κλπ. Αυτές άστες δεν υπάρχει λόγος να τις αλλάξεις φάκελο. Αν επιμένεις και θέλεις να τις βάλεις στο root πρέπει να αλλάξεις την προέλευση των εικόνων στο css
Από
../images/prevlabel.gif

Σε
../prevlabel.gif

Αν θέλεις να βάλεις στο root και τις φωτογραφίες ο κώδικας όπως σωστά σκέφτηκες θα γίνει <a href="image-1.jpg"

Όμως αν θές τη γνώμη μου , μη τo κανεις αυτό . Κράτα μια τάξη στα αρχεία σου. Βάλε στο root τις html σου σελίδες , στο φάκελο images τα γραφικά του site και κάνε άλλους δύο φακέλους για τις φωτογραφίες που θα μεγαλώνεις με το lightbox . px pics / thumbs .
Άρα ο κώδικας της εικόνας θα γίνει έτσι.

Κώδικας: Επιλογή όλων

<a href=" pics/image1.jpg" rel="lightbox">
<img src=" thumbs/image1.jpg" width="100" height="40" alt="" /></a> 

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 15 Οκτ 2009 02:29

10000 Ευχαριστώ να σαι καλά.
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 15 Οκτ 2009 02:37

Κάτι τελευταίο και ζητώ συγνώμη αν σε πρήζω!!!Τις εικόνες που θα μεγαλώνουν όταν πατάς πάνω στις αρχικές τι μέγεθος και σε τι τύπο πρέπει να τις κάνω?
Δηλαδή τις αποθηκεύω σε jpg με τι διαστάεις?Αυτές που γράφουμε στον κώδικα ή δεν παίζει ρόλο και απλά κάνω 1 αντιγραφή των εικόνων που ήδη έχω με τις ίδιες διαστάσεις και ο κώδικας τους δίνει τις διαστάσεις που του δηλώσαμε?Σ ευχαριστώ κ πάλι απλά είμαι πρωτάρης όσον αφορά το lightbox.
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Εγκατάσταση του lightbox 2

Δημοσίευση από geoki » 15 Οκτ 2009 11:39

To τι διαστάσεις θα έχει η μικρή και η μεγάλη photo, είναι καθαρά δικό σου θέμα . To lightbox script δε σου κάνει resize τις εικόνες. Εσύ πρέπει να το κάνεις αυτό εκ των προτέρων χρησιμοποιώντας κάποιο πρόγραμμα (photoshop, corel photopaint κλπ) που κάνει resize se photos.

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 15 Οκτ 2009 14:02

Αυτό εννοείται αλλά ρωτάω το εξής επειδή δηλώνουμε στον κώδικα : img src=" thumbs/image1.jpg" width="100" height="40" alt="" /></a> αυτές τις διαστάσεις δίνω στην εικόνα που θα μεγαλώνει η δεν παίζει ρόλο ο κώδικας κ την φτιάχνω σε ότι διάσταση θέλω εγώ?
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από korgr » 15 Οκτ 2009 14:30

matrixjo έγραψε:Αυτό εννοείται αλλά ρωτάω το εξής επειδή δηλώνουμε στον κώδικα : img src=" thumbs/image1.jpg" width="100" height="40" alt="" /></a> αυτές τις διαστάσεις δίνω στην εικόνα που θα μεγαλώνει η δεν παίζει ρόλο ο κώδικας κ την φτιάχνω σε ότι διάσταση θέλω εγώ?
Την μεγαλη εικονα την κανεις οσο θελεις.
Αυτο που μας δειχνεις ειναι ο κωδικας της μικρης εικονας. Σε αυτον τον κωδικα θα βαλεις τα νουμερα που αντιστοιχουν στην δικη σου μικρη εικονα.

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 15 Οκτ 2009 15:06

Ok σας ευχαριστώ πολύ.
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 18 Οκτ 2009 09:10

Καλημέρα και πάλι , ίσως γίνομαι κουραστικός & ζητάω συγνώμη αλλά ακολούθησα τις οδηγίες σας σχετικά με το lightbox αντιμετωπίζω το εξής πρόβλημα : Ο κώδικας είναι ο εξής
<div align="left">a href="images/pics/pirates2.jpg" rel="lightbox"><img src="/images/pirates.jpg" width="231" height="173" /></a>.
Αυτό που γίνεται είναι η γραμή του κώδικα
a href="images/pics/pirates2.jpg" rel="lightbox">
μπαίνει μέσα στο dreamweaver δίπλα στην εικόνα και φυσικά δεν λειτουργεί τίποτα όταν την ανεβάζω στον server είναι σωστή γενικά η σύνταξη και αν όχι τι πρέπει ν αλλάξω?Σας ευχαριστώ εκ των προτέρων.
Level Technical Group
Φελλάς Ιωάννης
Master Administrator - Web Designer
Κοτζιά 24 Περιστέρι 12137 Αθήνα

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Εγκατάσταση του lightbox 2

Δημοσίευση από fafos » 18 Οκτ 2009 17:24

matrixjo έγραψε:Καλημέρα και πάλι , ίσως γίνομαι κουραστικός & ζητάω συγνώμη αλλά ακολούθησα τις οδηγίες σας σχετικά με το lightbox αντιμετωπίζω το εξής πρόβλημα : Ο κώδικας είναι ο εξής
<div align="left">a href="images/pics/pirates2.jpg" rel="lightbox"><img src="/images/pirates.jpg" width="231" height="173" /></a>.
Αυτό που γίνεται είναι η γραμή του κώδικα
a href="images/pics/pirates2.jpg" rel="lightbox">
μπαίνει μέσα στο dreamweaver δίπλα στην εικόνα και φυσικά δεν λειτουργεί τίποτα όταν την ανεβάζω στον server είναι σωστή γενικά η σύνταξη και αν όχι τι πρέπει ν αλλάξω?Σας ευχαριστώ εκ των προτέρων.
to link (a) den prepei na exei kai ena arrow dipla? (<a)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

matrixjo
Δημοσιεύσεις: 66
Εγγραφή: 05 Νοέμ 2007 22:32
Επικοινωνία:

Εγκατάσταση του lightbox 2

Δημοσίευση από matrixjo » 18 Οκτ 2009 20:24

Ευχαριστώ για την διόρθωση δεν το χα προσέξει να σαι καλά.Αν σου ναι εύκολο λύσε μου την εξής απορία.Έχω 2 εικόνες η 1 μικρή η οποία μπαίνει στην σελίδα και η άλλη η μεγαλύτερη που μεγαλώνει με το πάτημα της εικόνας.Όπως είδες και στον κώδικα η /images/pics/pirates2.jpg είναι η μεγάλη εικόνα και η /images/pirates.jpg η μικρή που μπαίνει στην σελίδα.Αφού διόρθωσα το τυπογραφικό λάθος ύστερα από την σωστή υπόδειξη σου δίνοντας σωστά τον κώδικα χωρίς να φαίνεται πλέον ο κώδικας μέσα στην σελίδα , τώρα μου φορτώνει κ τις 2 φωτό ταυτόχρονα.Αυτό που θέλω να μου πεις είναι το εξής:Σε διαφορετική γραμή κώδικα γράφουμε για την μεγάλη εικόνα και σε άλλη γραμμή για την μικρή?Αν σου ήταν εύκολο να με κατατοπίσεις θα μουν ευγνώμων.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Εγκατάσταση του lightbox 2

Δημοσίευση από fafos » 18 Οκτ 2009 20:29

matrixjo έγραψε:Ευχαριστώ για την διόρθωση δεν το χα προσέξει να σαι καλά.Αν σου ναι εύκολο λύσε μου την εξής απορία.Έχω 2 εικόνες η 1 μικρή η οποία μπαίνει στην σελίδα και η άλλη η μεγαλύτερη που μεγαλώνει με το πάτημα της εικόνας.Όπως είδες και στον κώδικα η /images/pics/pirates2.jpg είναι η μεγάλη εικόνα και η /images/pirates.jpg η μικρή που μπαίνει στην σελίδα.Αφού διόρθωσα το τυπογραφικό λάθος ύστερα από την σωστή υπόδειξη σου δίνοντας σωστά τον κώδικα χωρίς να φαίνεται πλέον ο κώδικας μέσα στην σελίδα , τώρα μου φορτώνει κ τις 2 φωτό ταυτόχρονα.Αυτό που θέλω να μου πεις είναι το εξής:Σε διαφορετική γραμή κώδικα γράφουμε για την μεγάλη εικόνα και σε άλλη γραμμή για την μικρή?Αν σου ήταν εύκολο να με κατατοπίσεις θα μουν ευγνώμων.

h megalh eikona prepei na einai panta link ths mikrografias me rel="lightbox":

Κώδικας: Επιλογή όλων

<a href="megalh photo" rel="lightbox">mikrografia</a>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες