Come inserire correttamente Lightbox2?

Printable View

19-12-2009, 15.36.59

Come inserire correttamente Lightbox2?

Salve a tutti, so che su lightbox sono già stati creati topic e credetemi, li ho letti tutti, senza saper risolvere il mio problema.
Credo stia proprio alla base perchè io non ho la minima idea di cosa s'intenda per "collegare" i vari file tra loro...
nel pannello di altervista io ho creato una cartella a parte, dove ho caricato tutti i file che erano presenti nel file .rar... però non ho idea di come proseguire!
Se inseriesco direttamente i codici in un'altra pagina non funziona nulla...
Grazie della pazienza!
19-12-2009, 16.57.35
miki92

Non funzioneranno perchè i codici sono in parte errati.

Devi far in modo che i codici che "richiamano" lightbox nella pagina a te scelta corrispondano con le giuste path.

Per spiegarti meglio:

Se ho tutti i file di lightbox nella cartella /lightbox e voglio inserire questo effetto nella pagina /foto/pagina1.html dovrò modificare in questo modo i collegamenti:

Codice HTML:

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

Lo slash che trovi davanti a tutti i percorsi (/) sta ad indicare la root del sito ovvero la cartella principale.

Ciò significa che io ho la cartella "lightbox" nella root mentre la mia pagina nella cartella "foto" presente a sua volta nella root del sito.

Non so se sono stato chiaro ma in caso negativo chiedi pure.

Comunque per spiegarti meglio è bene che tu ti leggi qualche guida all'HTML che spiega bene i percorsi e le path.

Ecco alcuni link che ti consiglio di leggere:

- http://xhtml.html.it/guide/lezione/1...pertestualita/
- http://xhtml.html.it/guide/lezione/1...ti-e-relativi/
19-12-2009, 21.51.39

Qualcosa ho capito, però non completamente XD
scusa la mia ignoranza XD
Diciamo che io in altervista non sono molto ordinata, non suddivido lo spazio in cartelle, ma solo in pagine che quindi restano tutte in quella principale...
Quello che non riesco a capire è perchè, pur inserendo i codici negli spazi corretti l'anteprima dell'immagine porti solo ad un'altra facciata con l'immagine ingrandita...

Quello che faccio io è inserire tra i tag <head> della pagina, dove mi interessa che funzioni questo javascript, i vari codici indicati sul sito ufficiale e poi, nel corpo della pagina, inserisco questo codice

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Dove però al posto di image #1 inserisco la miniatura, con il codice <img src="link">

Leggerò le due giude che mi hai linkato, grazie mille *__*
19-12-2009, 23.18.31
miki92

Ma l'effetto lightbox quello è...ingrandire una foto in modalità "dinamica". Puoi postare un esempio di pagina in cui usi l'effetto semmai ti diamo una mano anche con i codici.
22-12-2009, 14.18.55

allora, il codice è questo, la pagina è caricata nella cartella principale, mentre i file di lightbox sono in una cartella a parte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<TITLE>{Okashi no Rakuen ♥} Candies' paradise ♪ 'cause cute is better~</TITLE>
<style>
p, body, td, tr, div {
font-family: Verdana;
font-size: 13px;
color: #889899;
}
.a {
font-family: Verdana;
font-size: 12px;
color: #889899;
text-align: center;
border-bottom: 1px dashed #889899;
}
.b {
font-family: Verdana;
font-size: 10px;
color: #889899;
text-align: center;
}
.divi {
font-family: georgia,Verdana;
font-size: 20px;
color: #889899;
font-weight: bold;
text-align: center;
}
h1 {
font-family: Verdana;
font-size: 14px;
color: #889899;
text-decoration: none;
font-weight: none;
background-color: #889899;
line-height: 8px;
}
A:link{
text-decoration:none;
color: #DD859D;
font-weight: none;
}
A:visited {
text-decoration:none;
color: #365595;
font-weight: none;
}
a:hover {
text-decoration:none;
color: #889899;
}
body {
background-color: #d4eff0;
background-image: url();
background-repeat: none;
}
</style>

<STYLE type="text/css">

</STYLE>
<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" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

</head>

<body>

<div id="immagine" style="position: absolute; top: 0px; left:0px;">
<img src="http://i28.tinypic.com/sqns6o.gif" border="0" width="1005" height="875"></div>

<div id="colonna" style="position: absolute; top: 240px; left: 110px; width: 160px; height: 265px;">

<a href="http://okashirakuen.altervista.org/principale.html"><img src="http://i26.tinypic.com/14cgsu9.png" border= none> </a> <br><br>

<a href="http://okashirakuen.altervista.org/Maki.html"><img src="http://i31.tinypic.com/f41995.png" border= none> </a> <br><br>
<a href="http://okashirakuen.altervista.org/fimo.html"><img src="http://i31.tinypic.com/dzaumt.jpg" border= none> </a> <br><br>
<a href="linkpagina"><img src="http://i28.tinypic.com/s3fst4.png" border= none> </a>
<br><br>
<a href="http://okashirakuen.altervista.org/email.html"><img src="http://i30.tinypic.com/294sbp4.png" border= none> </a> <br><br>
</div>

<div id="colonna" style="position:absolute; left:310px; top:200px; width:540px; height:275px; ">
<p align=center>
Orecchini ♥<br><br>

<div style="height:590px;width:580px;font:13px Verdana;overflow:scroll;">
<p align=center>
Bonjour~ <b>ichigo earrings</b><br>

<a href="http://i28.tinypic.com/3320x6q.png" alt="immagine" rel="lightbox" title="...">


</p></div>

</p>
</div>
</body>
</html>

grazie mille >__<
22-12-2009, 14.25.10
miki92

Potresti indicare in quale cartella si trova lightbox?
22-12-2009, 14.53.10

ho creato la cartella "lightbox" che contiene tutti i file del .rar...
22-12-2009, 15.43.01
miki92

Bene, allora devi sostituire:

Codice HTML:

<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" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>

Con

Codice HTML:

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

Leggiti bene la guida così non avrai più problemi con i collegamenti.
22-12-2009, 15.55.06

non va ancora... nell'anteprima della pagina non vedo nemmeno l'immagine della miniatura >__<

Mi è venuto un altro dubbio... Forse il probema sta nel fatto che io ho caricato tutti i file del pacchetto rar in una nuova cartella, poi non ho modificato nulla di quei file... quò essere che il problema stia proprio nel fatto che si debba modificare qualcosa e io non l'ho fatto?
29-12-2009, 21.35.48

nessno riesce a capire dove sbaglio? é_è
29-12-2009, 22.46.12

Prova ora! :wink:

Codice PHP:

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

Ehm so che questa discussione è vecchia però ho un problema relativo al lightbox: io ho fatto tutti i passaggi giusti e effettivamente il lightbox si apre, ma non mi appare ne il pulsante prev ne quello next e in più non va il pulsante close. Posso chiudere l'immagine solo cliccandovi fuori. Perchè?
23-04-2011, 20.02.10
wooccupation

Non sono espertissimo , anzi! Ma per quel poco che sò è importante che gli indirizzi siano giusti e le immagini poste nelle cartelle corrette. Prova a verificare quello.
Ciao
24-09-2013, 14.32.45

Lightbox2 - funziona nell'anteprima di dreamweaver ma non una volta pubblicato

Salve ragazzi, questa cosa mi sta mandando ai matti: se faccio visualizza dal vivo su Dreamweaver il componente lightbox mi funziona alla perfezione, una volta pubblicato su altervista invece, cliccando sull'immagine non succede niente... dove potrebbe essere il problema?
Se volete pubblico il codice html... aiutatemi! :)