[JAVASCRIPT] Problema con javascript Highslide JS
Ciao a tutti,
Premetto che sono una new entry nel forum e anche nel webdesigning
Ringrazio in anticipo chi mi aiuta a risolvere il problema
Premessa: Highslide JS è un thumbnail viewer open source per siti non commerciali che permette di ingrandire delle immagini con effetto lightbox. Istruzioni più dettagliate su come inserire questo javascript sono disponibili in inglese all’indirizzo http://highslide.com/tutorial
Problema: Mi funziona correttamente sulla pagina html offline (sul mio computer) ma non mi funziona online (pagina caricata sul server)
Più precisamente, cliccando sull’immagine che vorrei ingrandire, appare la scritta loading ma l’immagine non si ingrandisce a pieno schermo. Sulla pagina offline, invece, non ho alcun problema e lo script funziona correttamente.
Ulteriori informazioni per chi è così gentile da aiutarmi:
La risoluzione del problema potrebbe essere banale, io sono ancora alle prime armi, quindi non escludete alcuna possibilità.
SUL MIO COMPUTER funziona tutto. La cartella highslide e la pagina html ggalleria_virtuale.html si trovano assieme. Lo script highslide-full.js e il foglio di stile si trovano nella cartella highslide. Il codice è questo:
Dentro il tag head ci sta questa stringa:
Codice:
<script type="text/javascript"
src="./highslide/highslide-full.js"></script>
<link rel="stylesheet" href="./highslide/highslide.css"
type="text/css">
<script type="text/javascript">
hs.graphicsDir = './highslide/graphics/';
hs.outlineType = 'outer-glow';
hs.showCredits = false;
</script><!-- HS script instruction END -->
<!-- HS script instruction: dimmming opacity START -->
<script type="text/javascript"> hs.dimmingOpacity = 0.50; </script>
<style type="text/css"> .highslide-dimming {background: black;} </style>
<!-- HS script instruction: dimmming opacity END -->
Dentro il tag <body>…</body> ci stà questa stringa:
Codice:
<a href="./images/03.jpg" class="highslide"
onclick="return hs.expand(this, { align: 'center' })">
<img src="./images1/03.jpg" alt="Highslide JS"
title="Click to enlarge" height="107" width="150"></a>
<div class="highslide-caption">Rose, acquarello</div>
Invece quando la pagina e lo script (e il foglio di stile dello script) sono sul server il problema è quello scritto in alto.
Ho provato a vedere se l’immagine piccola 03.jpg (nella cartella images1) e l’immagine grande 03.jpg (nella cartella images) fossero caricate correttamente sul server e mi sembra di si perché lo script non funziona ma la funzione che permette di ingrandire l’immagine aprendo un’altra finestra nel browser funziona.
Ho inoltre provato a cambiare le stringhe in vari modi. Ad esempio avevo pensato che il problema fosse nel fatto che la pagina non riuscisse a trovare lo script.
Codice:
<script type="text/javascript"
src="highslide/highslide-full.js"></script>
<link rel="stylesheet" href="highslide/highslide.css"
type="text/css">
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'outer-glow';
hs.showCredits = false;
</script><!-- HS script instruction END -->
<!-- HS script instruction: dimmming opacity START -->
<script type="text/javascript"> hs.dimmingOpacity = 0.50; </script>
<style type="text/css"> .highslide-dimming {background: black;} </style>
<!-- HS script instruction: dimmming opacity END -->
Codice:
<a href="http://forum.it.altervista.org/images/03.jpg" class="highslide"
onclick="return hs.expand(this, { align: 'center' })">
<img src="images1/03.jpg" alt="Highslide JS"
title="Click to enlarge" height="107" width="150"></a>
<div class="highslide-caption">Rose, acquarello</div>
Ma non ha funzionato.
Ho provato a scrivere per intero in src e in href l’url dove si dovrebbe trovare lo script highslide-full.js e il suo foglio di stile ma il problema rimane.
Penso che il problema sia nello script caricato sul server perché provando sulla pagina html presente sul mio computer a cambiare il source (src) dello script indirizzandolo su quello caricato sul server mi si presenta lo stesso problema.
L’url della mia pagina è questo (notate le due g di galleria)
http://rlevati.altervista.org/ggalleria_virtuale.html
Grazie a chi mi aiuta.
............................
Ciao ancora
Aggiungo qualche informazione aggiornata per aiutare chi eventualmente stesse cercando di aiutarmi…
Penso che il problema sia riguardo hs.graphicsDir perché, provato dal mio computer connesso ad internet, funziona con questa stringa
Codice:
<!-- HS script instruction START -->
<script type="text/javascript"
src="http://xxxxxxx.altervista.org/provahighslide/highslide-full.js"></script>
<link rel="stylesheet"
href="http://xxxxxxx.altervista.org/provahighslide/highslide.css"
type="text/css">
<script type="text/javascript">
hs.graphicsDir = './provahighslide/graphics/';
hs.outlineType = 'outer-glow';
hs.showCredits = false;
</script>
ma invece non funziona con quest’altra
Codice:
<!-- HS script instruction START -->
<script type="text/javascript"
src="http://xxxxxxx.altervista.org/provahighslide/highslide-full.js"></script>
<link rel="stylesheet"
href="http://xxxxxxx.altervista.org/provahighslide/highslide.css"
type="text/css">
<script type="text/javascript">
hs.graphicsDir = 'http://xxxxxxx.altervista.org/provahighslide/graphics/';
hs.outlineType = 'outer-glow';
hs.showCredits = false;
</script>
A questo punto la mia domanda diventa: che cosa c’è nella subcartella “graphics” di “provahighslide” che quando è sul mio computer funziona e invece, una volta caricata sul server, non funziona? :cry:
Grazie a chi mi vorrà rispondere :?:
L’url della mia pagina di prova è questo:
http://rlevati.altervista.org/prova.html
