[JAVASCRIPT] Galleria Immagini

[cenarius_88]

Salve. Per il mio sito volevo creare una sezione galleria.

I miei quesiti sono multipli... cominciamo.

Di base le immagini sono in una locazione specifica.
(nomesito.dominio/path/nomeimmagine.estensione)

La mia idea era quella di creare un javascript del genere (da esempio) , da sistemare aggiungengo il "lightbox"..


<script type="text/javascript">
path="http://prova.sito.org/Immagini/list";
for (i=1;i<=10;i++) {
document.write("<div class='cella' id='" + i + "'> <a href='" + path + "/" + i + ".jpg'> <img src='" + path + "/" + i + ".jpg'/></a></div>");
}
</script>
</div>


con questo codice scrivo l'html necessario per creare 10 celle, ognuna di id = numero di creazione, con all'interno un immagine dal link del tipo "http://prova.sito.org/Immagini/list/num.jpg"...

Il mio problema fondamentale è...
Le celle dovranno avere dimensione fissa, mentre le immagini no, per cui all'interno della cella andrà una miniatura della immagine... non volendo creare una miniatura per ogni immagine volevo aggiungere al corpo del tag <img src >
width e height... in % (esempio <img src="Immagini/list/1.jpg" style="border-width: 0; width=45%; height=45%;"/>) poi aggiungere all'immagine la funzione collegamento ipertestuale che riporta alla immagine grande.
Ovviamente per ridimensionare l'immagine farei (r1=imgwidth / cellwidth) (r2=imgheight / cellheight)occorre:
sapere la dimensione della cella ( fatto )
sapere la dimensione dell'immagine ( come? )
effettuare un controllo ( se r1 > r2 o r1<r2) per utilizzare il rapporto maggiore e impostare width=imgwidth/ r1 o r2 e height=imgheight/ r1 o r2;

Esempio:
cella=300x300
img=800x600
r1=800/300=8/3
r2=600/300=2
r1 è > r2;
imgw=imgwitdth/r1 = 800 / (8/3) = 300
imgh=imgheight/r1 = 600 / (8/3) = 225

così entrambe le grandezze sono proporzionate per entrare nella cella
Quindi tutto sta.... come determino le dimensioni in pixel dell'immagine originale?

[PGI-Bis]

Puoi usare gli attributi width e height dell'oggetto image. Che però devi creare:

var image = new Image();
image.onload = function() {
var width = image.width
var height = image.height
}
image.src = percorso

O una cosa del genere. Purtroppo uso cessoscript ma non sto maneggiando immagini al momento.

[Efem]

Puoi usare gli attributi width e height dell'oggetto image. Che però devi creare:

var image = new Image();
image.onload = function() {
var width = image.width
var height = image.height
}
image.src = percorso

O una cosa del genere. Purtroppo uso cessoscript ma non sto maneggiando immagini al momento.

Sì concordo... solo che mi sa che le proprietà si chiamano offsetWidth e offsetHeight (se non sbaglio... è un pò che non metto mani su js).

Solo che ti consiglio di sostituire la document.write con innerHTML.
Ti crei un div con id "galleria" e poi nello script semplicemente metti


document.getElementById( 'galleria' ).innerHTML = "<div class='cella' id='" + i + "'> <a href='" + path + "/" + i + ".jpg'> <img src='" + path + "/" + i + ".jpg'/></a></div>";

la document.write è un tantino obsoleta :)
Comunque per quello che vuoi realizzare forse dovresti usare un framework tipo mootools... ti semplificherebbe il compito e renderebbe tutto molto più cross-browser (a meno che non sia una galleria molto semplice)

[cenarius_88]

Grazie per la dritta sul cambio document.write e innerhtml.... ho appena modificato.

Per quanto riguarda la galleria, è semplicissima... devo mettere 15-20 immagini in un div contenitore... in una intabellazione a 3 elementi per riga... in ogni cella c'è l'immagine al cui click si zoomma stile facebook




Per quanto riguarda la funzione per ottenere le dimensioni non ho capito come usarla... e dove usarla :S

il javascript aggiornato è così


<script type="text/javascript">
path="http://sito.dominio.org/Immagini/gallery/";
for (i=1;i<10;i++) {
document.getElementById( 'contenuto' ).innerHTML = document.getElementById( 'contenuto' ).innerHTML + "<div class='cella' id='" + i + "'> <p> <a href='" + path + i + ".jpg' rel='lightbox'> <img src='" + path + i + ".jpg'/></a></p></div>";
}

[PGI-Bis]

Lo metti al posto di quello che c'è nel ciclo.

ciclo i da 1 a N {
var image = new Image();
image.onload = function() {
creaNuovaCella(i, image);
}
image.src = l'href che usi per l'immagine
}

function creaNuovaCella(indice, immagine) {
var width = immagine.width
var height = immagine.height
innerHTML = piripiì e piripà
}

[wingman87]

In teoria questo problema si risolve semplicemente usando le regole css max-width e max-height che però, purtroppo, non funzionano su versioni molto vecchie di IE (mi pare dalla 7 in giu)... Ma c'è un altro metodo che funziona anche su quelle.
Ti linko una pagina che spiega bene la soluzione:
http://www.fastechws.com/tricks/web/image-max-width-height.php

[cenarius_88]

Ho un attimino abbandonato questa scelta, perchè non mi piaceva il modo in cui veniva fuori lo zoom... una finestrella squallida

Al momento sto pensando più a questa soluzione
http://nivozoom.dev7studios.com

Ho scaricato il file e sto mettendo insieme il progetto...
Sono a questo livello (è una pagina di test sia chiaro)
Ho inserito tutti link di Css, js e immagini che sono sul web, così potete provare voi stessi senza scaricare nulla


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<link rel="stylesheet" href="http://nivozoom.dev7studios.com/styles/nivo-zoom.css"
type="text/css" media="screen" />
<style type="text/css">
div.xcella
{
float: left;
border: 1px solid black;
padding: 10px 10px 10px 10px;
margin: 2px 2px 2px 2px;
text-align: center;
width: 200px;
height: 150px;
}

div#pages
{
float: right;
width: 744px;
display: inline;
margin-right: 3px;
}

div#container
{
width: 904px;
margin: 50px auto;
text-align: justify;
}

div#contenuto
{
padding: 20px 10px 10px 30px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivozoom.dev7studios.com/scripts/jquery.nivo.zoom.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$('body').nivoZoom();
});

</script>
</head>
<body>
<div id="container">
<div id="pages">
<div id="contenuto">
<p>
Galleria (inserisco un po' di spaziatura per visualizzare bene lo zoom :S)
</p>
</br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br>
</br> </br> </br> </br>
<div class="xcella">
<a href="http://4.bp.blogspot.com/-JgirKgO1xBw/TyZgPEKDEvI/AAAAAAAACWU/sfVO-0zLu8k/s1600/guitar-wallpaper.jpeg"
class="nivoZoom center">
<img src="http://4.bp.blogspot.com/-JgirKgO1xBw/TyZgPEKDEvI/AAAAAAAACWU/sfVO-0zLu8k/s1600/guitar-wallpaper.jpeg"
alt="" width="165" />
<div class="nivoCaption">
Qui va la descrizione dell'immagine</div>
</a>
</div>
<div class="xcella">
<a href="http://static.comune.villalagarina.tn.it/events/compagne_di_viaggio/images/immgine_compagne_di_viaggio.jpg"
class="nivoZoom center">
<img src="http://static.comune.villalagarina.tn.it/events/compagne_di_viaggio/images/immgine_compagne_di_viaggio.jpg"
alt="" width="165" />
<div class="nivoCaption">
Qui va la descrizione dell'immagine</div>
</a>
</div>
<div class="xcella">
<a href="http://1.bp.blogspot.com/-ve0LrE0jWiQ/T0gAXt32WUI/AAAAAAAACs8/GznPHyGGYHc/s1600/luoghi+e+sapori.jpg"
class="nivoZoom center">
<img src="http://1.bp.blogspot.com/-ve0LrE0jWiQ/T0gAXt32WUI/AAAAAAAACs8/GznPHyGGYHc/s1600/luoghi+e+sapori.jpg"
alt="" width="165" />
<div class="nivoCaption">
Qui va la descrizione dell'immagine</div>
</a>
</div>
<div class="xcella">
<a href="http://www.earthinpictures.com/world/france/paris/eiffel_tower_at_night_600x800.jpg"
class="nivoZoom center">
<img src="http://www.earthinpictures.com/world/france/paris/eiffel_tower_at_night_600x800.jpg"
alt="" width="165" />
<div class="nivoCaption">
Qui va la descrizione dell'immagine</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Come potete notare dall'esempio (ho aggiunto un bordo alla cella così si capisce), tutto fila liscio finchè le immagini sono in aspect 4/3 (la cella ha quelle dimensioni) o 16/9 (si vede un po' di spaziatura sotto la mini-img)
... ma se l'aspect ratio non è convenzionale, come l'ultima immagine dell'esempio... o, se in generale, l'altezza è superiore alla laerghezza dell'immagine, allora sballa tutto...

Se riesco a risolvere questo problema.... ho risolto tutto... any idea? :/

PS: è specificato nell'about del produttore che non si devono applicare cambi stile CSS al tag<img src....> se no sballa la funzione zoomer, ma applicare cambiamenti al tag <a ....>

[PGI-Bis]

Ahhhhh... e allora ditelo.

Scometto che non funziona in IE ma questo genera una riga di celle di dimensione WxH con all'interno delle icone propriamente ridimensionate, partendo da una lista di percorsi di immagine.

Questa è la pagina html:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="coolpix.js"></script>
</head>
<body onload="generaTabella()">
<div id="page">
</div>
</body>
</html>

E questo è lo script:

var images = [
"http://4.bp.blogspot.com/-JgirKgO1xBw/TyZgPEKDEvI/AAAAAAAACWU/sfVO-0zLu8k/s1600/guitar-wallpaper.jpeg",
"http://static.comune.villalagarina.tn.it/events/compagne_di_viaggio/images/immgine_compagne_di_viaggio.jpg",
"http://1.bp.blogspot.com/-ve0LrE0jWiQ/T0gAXt32WUI/AAAAAAAACs8/GznPHyGGYHc/s1600/luoghi+e+sapori.jpg",
"http://www.earthinpictures.com/world/france/paris/eiffel_tower_at_night_600x800.jpg"
]

var CELL_WIDTH = 100;
var CELL_HEIGHT = 100;
var IMAGE_ICON_SIZE = 90;

function generaTabella() {
for(var i = 0; i < images.length; i++) {
createCell(i);
loadImageFromUrl(i, images[i]);
}
}

function loadImageFromUrl(index, url) {
var image = new Image()
image.onload = function() {
displayImage(index, image);
}
image.src = url;
}

function displayImage(index, image) {
var div = document.getElementById("Image"+index);
var imageWidth = image.width;
var imageHeight = image.height;
var elementWidth = IMAGE_ICON_SIZE;
var elementHeight = IMAGE_ICON_SIZE;
if(imageWidth > imageHeight) {
var ratio = imageHeight / imageWidth;
elementHeight = Math.round(IMAGE_ICON_SIZE * ratio);
} else {
var ration = imageWidth / imageHeight;
elementWidth = Math.round(IMAGE_ICON_SIZE * ration);
}
var img = document.createElement("img");
img.src = image.src;
img.width = elementWidth;
img.height = elementHeight;
img.onclick = function() {
displayBiggerImage(img);
}
div.appendChild(img);
}

function displayBiggerImage(image) {
console.log("Mo' ti faccio vedere io...")
}

function createCell(index) {
var parent = document.getElementById("page")
var div = document.createElement("div");
div.id = "Image" + index;
div.style.margin="2px"
div.style.border="1px solid black";
div.style.height=CELL_HEIGHT + "px";
div.style.width=CELL_WIDTH + "px";
div.style.cssFloat="left";
parent.appendChild(div);
}

[cenarius_88]

Bene PGI hai colto nel segno...
Mantengo l'HTML come l'hai scritto te...
Partendo dal tuo script, l'ho sistemato secondo le mie "esigenze" e ho aggiunto i vari commenti, lo posto così mi sai(sapete) dire se ho capito cosa fa...


/* Array con link di immagini */
var images = [
"http://4.bp.blogspot.com/-JgirKgO1xBw/TyZgPEKDEvI/AAAAAAAACWU/sfVO-0zLu8k/s1600/guitar-wallpaper.jpeg",
"http://static.comune.villalagarina.tn.it/events/compagne_di_viaggio/images/immgine_compagne_di_viaggio.jpg",
"http://1.bp.blogspot.com/-ve0LrE0jWiQ/T0gAXt32WUI/AAAAAAAACs8/GznPHyGGYHc/s1600/luoghi+e+sapori.jpg",
"http://www.earthinpictures.com/world/france/paris/eiffel_tower_at_night_600x800.jpg"
]


var CELL_WIDTH = 200; /*larghezza cella*/
var CELL_HEIGHT = 150; /*lunghezza cella*/
var IMAGE_ICON_SIZE = 150; /*grandezza massima mini-immagine*/

/* funzione genera tabella*/
function generaTabella() {
for (var i = 0; i < images.length; i++) { /*ciclo per i che va da 0 alla lunghezza array di immagini*/
createCell(i); /*richiama funzione createcell passanco come argomento l'indice*/
loadImageFromUrl(i, images[i]); /*richiama funzione loadImageFromUrl passanco come argomento l'indice e l'elemto corrispondente nell'array*/
}
}

/* funzione loadImageFromUrl*/
function loadImageFromUrl(index, url) {
var image = new Image() /*crea un oggetto image*/
image.onload = function () { /*richiama la funzione function, e quindi anche la displayImage, al caricamento dell'immagine*/
displayImage(index, image);
}
image.src = url; /*assegna all'oggetto image l'url*/
}

/* funzione displayImage*/
function displayImage(index, image) {
var div = document.getElementById("Image" + index); /*assegno alla variabile div l'elemento che ha l'id ricercato*/
var imageWidth = image.width; /*assegno alla variabile imageWidth la larghezza dell'immagine corrente*/
var imageHeight = image.height; /*assegno alla variabile imageHeight la larghezza dell'immagine corrente*/

/*definizione variabili per aspet ratio*/
var elementWidth = IMAGE_ICON_SIZE;
var elementHeight = IMAGE_ICON_SIZE;

/*controllo del max tra lunghezza e larghezza e impostazionje aspect ratio)*/
if (imageWidth > imageHeight) {
var ratio = imageHeight / imageWidth;
elementHeight = Math.round(IMAGE_ICON_SIZE * ratio);
} else {
var ration = imageWidth / imageHeight;
elementWidth = Math.round(IMAGE_ICON_SIZE * ration);
}

var img = document.createElement("img"); /*crezione elemento img*/
img.src = image.src; /*assegno all'elemento l'url*/

/*imposto dimensioni immagine*/
img.width = elementWidth;
img.height = elementHeight;

/*imposto i margini appropriati cella per cella*/
img.style.marginTop = ((CELL_HEIGHT - elementHeight)/2) + "px";
img.style.marginLeft = ((CELL_WIDTH - elementWidth)/2) + "px";

/*definizione funzione onclick*/
img.onclick = function () {
displayBiggerImage(img);
}

div.appendChild(img); /*inserisce nell'elemento puntato dalla variabile div l'elemento img*/
}


/*funzione zomm*/
function displayBiggerImage(image) {
window.location.href=image.src; /*momentaneamente faccio solo vedere una nuova pagina con l'immagine reale*/
}

/* funzione createcell*/
function createCell(index) {
var parent = document.getElementById("page") /*cerco nella pagina l'elemento con id page e lo assegno alla variabile parent*/
var div = document.createElement("div"); /*assegno alla variabile div un elemento nuovo di tipo div (cella)*/
div.id = "Image" + index; /*assegno all'elemento l'id appropriato*/
div.style.margin = "2px"; /*assegno alla cella i margini*/
div.style.border = "1px solid black"; /*assegno alla cella i bordi*/

/*assegno le dimensioni alla cella*/
div.style.height = CELL_HEIGHT + "px";
div.style.width = CELL_WIDTH + "px";

div.style.cssFloat = "left"; /*assegno alla cella il posizionamento voluto*/
parent.appendChild(div); /*inserisco nell'elemento della pagina puntato da parent l'elemento div appena creato*/
}


Nella funzione displayBiggerImage che si attiva al click di su una immagine, non so cosa fargli fare... perchè secondo i vari esempi che ho visto non si basano sull'evento on click.

Si basano su una proprietà del tag <a> mettendo come href l'url puntato l'indirizzo della immagine, come class una classe definita in un CSS separato che fa capire al javascript dello zoom come agire, e all'interno del tag <a> l'elemento <img src ....> (che va bene penso come definito nello script generato fin qui)...

Adesso chiedo ancora aiuto... volevo far in modo che partendo dallo script appena postato, l'elemento img deve essere racchiuso in un tag <a href=url immagine class=unaclassedefinita> .... </a>

spero di essermi spiegato...purtroppo non so come agire in prima persona, non conoscendo appieno il javascript...

la mia idea è che va tolta la funzione onclick, e va inserita nella funzione displayImage una variabile "link" che crea un elemento di tipo ("a") assegnare a tale elemento un id univoco (mi servirà dopo se voglio aggiungere una descrizione tramite InnerHTML) una classe (magari definita in una variabile globale) poi fare l'appendchild così

link.appendChild(img)
div.appendChild(link)

[PGI-Bis]

Il "<a href=..." farebbe la stessa cosa dell'onclick con l'aggiunta della registrazione nella cronologia del browser dell'indirizzo cliccato.

Se non ti serve l'inserimento in cronologia - che anzi potrebbe essere controproducente se il click sull'immagine non deve comportarsi come una visita di pagina - puoi tenere il rinvio a funzione così com'è.

Comunque per creare un elemento "a" useresti le API DOM di javascript come nell'esempio.

Puoi farlo nel displayImage: anzichè ficcare img in div, crei un a, metti img in a e a in div.

function displayImage(index, image) {
var div = document.getElementById("Image"+index);
var imageWidth = image.width;
var imageHeight = image.height;
var elementWidth = IMAGE_ICON_SIZE;
var elementHeight = IMAGE_ICON_SIZE;
if(imageWidth > imageHeight) {
var ratio = imageHeight / imageWidth;
elementHeight = Math.round(IMAGE_ICON_SIZE * ratio);
} else {
var ration = imageWidth / imageHeight;
elementWidth = Math.round(IMAGE_ICON_SIZE * ration);
}
var img = document.createElement("img");
img.src = image.src;
img.width = elementWidth;
img.height = elementHeight;

var link = document.createElement("a");
link.href=image.src
link.appendChild(img);

div.appendChild(link);
}

Il fatto è che se poi vuoi visualizzare l'immagine ingrandita con un qualche effetto - come il pannello in overlay di quel nivozoom - al posto dell'href ci metti una funzione javascript... e torni all'onclick.

[cenarius_88]

La connessione oggi non mi è andata per cui ho fatto delle prove offline... e smanettando ho ottenuto quello che "desideravo" anche se non riesco a far funzionare la funzione zoom (pagina linkata precedentemente)

javascript

/* Array con link di immagini */
var images = [
"http://4.bp.blogspot.com/-JgirKgO1xBw/TyZgPEKDEvI/AAAAAAAACWU/sfVO-0zLu8k/s1600/guitar-wallpaper.jpeg",
"http://static.comune.villalagarina.tn.it/events/compagne_di_viaggio/images/immgine_compagne_di_viaggio.jpg",
"http://1.bp.blogspot.com/-ve0LrE0jWiQ/T0gAXt32WUI/AAAAAAAACs8/GznPHyGGYHc/s1600/luoghi+e+sapori.jpg",
"http://www.earthinpictures.com/world/france/paris/eiffel_tower_at_night_600x800.jpg",
"http://4.bp.blogspot.com/-JgirKgO1xBw/TyZgPEKDEvI/AAAAAAAACWU/sfVO-0zLu8k/s1600/guitar-wallpaper.jpeg",
"http://static.comune.villalagarina.tn.it/events/compagne_di_viaggio/images/immgine_compagne_di_viaggio.jpg",
"http://1.bp.blogspot.com/-ve0LrE0jWiQ/T0gAXt32WUI/AAAAAAAACs8/GznPHyGGYHc/s1600/luoghi+e+sapori.jpg",
"http://www.earthinpictures.com/world/france/paris/eiffel_tower_at_night_600x800.jpg"
]

/*arrai descrizioni immagini*/
var desc = [
"Descrizione 1",
"Descrizione 2",
"Descrizione 3",
"Descrizione 4"
]


var CELL_WIDTH = 200; /*larghezza cella*/
var CELL_HEIGHT = 150; /*lunghezza cella*/

var IMAGE_ICON_SIZE;/*max mini-image size*/
var contenuto="contenuto"; /*id dell'elemento in cui inserire il corpo generato automaticamente*/
var imageClass="nivoZoom"; /*Classe link immagine*/


/* funzione genera tabella*/
function generaTabella() {
/*In base alle dimensioni della cella sceglie il max mini-image size*/
if(CELL_WIDTH>CELL_HEIGHT){
IMAGE_ICON_SIZE=CELL_HEIGHT;
}else{
IMAGE_ICON_SIZE=CELL_WIDTH;
}
for (var i = 0; i < images.length; i++) { /*ciclo per i che va da 0 alla lunghezza array di immagini*/
createCell(i); /*richiama funzione createcell passanco come argomento l'indice*/
loadImageFromUrl(i, images[i]); /*richiama funzione loadImageFromUrl passanco come argomento l'indice e l'elemto corrispondente nell'array*/
}

}

/* funzione loadImageFromUrl*/
function loadImageFromUrl(index, url) {
var image = new Image() /*crea un oggetto image*/
image.onload = function () { /*richiama la funzione function, e quindi anche la displayImage, al caricamento dell'immagine*/
displayImage(index, image);
}
image.src = url; /*assegna all'oggetto image l'url*/
}

/* funzione displayImage*/
function displayImage(index, image) {
var div = document.getElementById("Image" + index); /*assegno alla variabile div l'elemento che ha l'id ricercato*/
var imageWidth = image.width; /*assegno alla variabile imageWidth la larghezza dell'immagine corrente*/
var imageHeight = image.height; /*assegno alla variabile imageHeight la larghezza dell'immagine corrente*/

/*definizione variabili per aspet ratio*/
var elementWidth = IMAGE_ICON_SIZE;
var elementHeight = IMAGE_ICON_SIZE;

/*controllo del max tra lunghezza e larghezza e impostazionje aspect ratio)*/
if (imageWidth > imageHeight) {
var ratio = imageHeight / imageWidth;
elementHeight = Math.round(IMAGE_ICON_SIZE * ratio);
} else {
var ration = imageWidth / imageHeight;
elementWidth = Math.round(IMAGE_ICON_SIZE * ration);
}

var img = document.createElement("img"); /*crezione elemento img*/
img.src = image.src; /*assegno all'elemento l'url*/

/*imposto dimensioni immagine*/
img.width = elementWidth;
img.height = elementHeight;

/*imposto i margini appropriati cella per cella*/
img.style.marginTop = ((CELL_HEIGHT - elementHeight)/2) + "px";
img.style.marginLeft = ((CELL_WIDTH - elementWidth)/2) + "px";

/*vedo se è presente una descrizione per l'immagine*/
if(desc[index]!=undefined){
img.setAttribute('title', desc[index] + " - Clicca per ingrandire"); /*è presente, aggiungo onMouseOver la descrizione seguita da Clicca per ingrandire*/
}else {
img.setAttribute('title', "Clicca per ingrandire"); /*non è presente, onMouseOver ci sarà solo Clicca per ingrandire*/
}

/*link ipertestuale sull'immagine*/
var link=document.createElement("a"); /*creo l'elemento a*/
link.id="Link" + index; /*associo l'id adatto*/
link.href=image.src; /*associo l'idirizzo dell'immagine associata*/
link.className = imageClass; /*associo la classe*/
/*link.setAttribute('target' , "_blank");*/ /*si apre in una nuova scheda, per ora disabilitato*/

/*inserimento degli elementi*/
link.appendChild(img); /*inserisco dentro l'elemento link l'elemento img*/
div.appendChild(link); /*inserisco dentro l'elemento div l'elemento link*/


}


/*funzione zomm*/
function displayBiggerImage(image) {
window.location.href=image.src; /*momentaneamente faccio solo vedere una nuova pagina con l'immagine reale*/
}

/* funzione createcell*/
function createCell(index) {
var parent = document.getElementById(contenuto) /*cerco nella pagina l'elemento con id page e lo assegno alla variabile parent*/
var div = document.createElement("div"); /*assegno alla variabile div un elemento nuovo di tipo div (cella)*/
div.id = "Image" + index; /*assegno all'elemento l'id appropriato*/
div.style.margin = "2px"; /*assegno alla cella i margini*/
div.style.border = "1px solid black"; /*assegno alla cella i bordi*/

/*assegno le dimensioni alla cella*/
div.style.height = CELL_HEIGHT + "px";
div.style.width = CELL_WIDTH + "px";

div.style.cssFloat = "left"; /*assegno alla cella il posizionamento voluto*/
parent.appendChild(div); /*inserisco nell'elemento della pagina puntato da parent l'elemento div appena creato*/
}


html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://nivozoom.dev7studios.com/styles/nivo-zoom.css" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivozoom.dev7studios.com/scripts/jquery.nivo.zoom.pack.js" type="text/javascript"></script>

<script type="text/javascript" src="js.js"></script>

<script type="text/javascript">
$(window).load(function() {
generaTabella();
$('body').nivoZoom();
});
</script>

<style type="text/css">
div#pages
{
float: right;
width: 744px;
display: inline;
margin-right: 3px;
}

div#container
{
width: 904px;
margin: 50px auto;
text-align: justify;
}

div#contenuto
{
padding: 20px 10px 10px 30px;
}
</style>


</head>
<body>
<div id="container">
<div id="pages">
<div id="contenuto">
<div id="quadrato">
<p>Galleria</p>
</div>
</div>
</div>
</div>
</body>
</html>

All'avvio della pagina si generano gli elemnti come io voglio... ogni link/immagine ha la classe definita dal produttore dello zoomer... ma al click non ottengo l'effetto sperato, bensì... l'apertura della pagina in grandezza reale... non saprei dove metter le mani sinceramente...

[PGI-Bis]

Anch'io avrei usato il className come hai fatto tu. Forse nivozoom non funziona con pagine generate dinamicamente?. Comunque effetti del genere sono meccanicamente banali da ottenere - il problema è renderli crossbrowser cioè IE compatibili.

[cenarius_88]

Ho pensato anche io al problema della dinamicità della pagina, per cui nn funziona lo script nivozoom...


Il problema fondamentale è che non so dove piazzare la mani per ottenre un effetto simile...

La mia idea era quella di creare un <div id preview> in cui al click sull'immagine, gli viene piazzato dentro l'immagine reale... il problema è che vorrei che questo div fosse in sovrapposizione con la pagina già presente...

EDIT.... ho trovato un esempio in cui si parla del z-index, della visibilità, e del posizionamento... smanettando con questi elementi penso di riuscire :S