Salve a tutti.
Questa è una prova che ho messo on line... tanto per vedere se funzionava:
http://xoomer.alice.it/lyrix/testJS/prova.htm
C'è molto da mettere a posto, lo so, ma per il momento vi chiedo una cosa semplice. Se cliccate sopra un'immagine dovrebbe apparire un DIV centrato con il suo ingrandimento (e in alcuni casi anche una descrizione).
Se però fate un paio di prove noterete che il DIV appare una prima volta in posizione errata, e solo dopo aver cliccato nuovamente sulla miniatura appare centrato.
La domanda è ovviamente: "COME MAI???" 
Vi posto un po' di codice (anche lo potete tranquillamente vedere dal sorgente della pagina che vi ho linkato). Il codice proviene da uno script che ho trovato su dynamicdrive.com, ma a me piaceva rifarlo a modo mio...
- JAVASCRIPT -
codice:
/* ************************************************************** */
/* getPageSize :: funzione che ricava le dimensioni della pagina */
/* ************************************************************** */
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
/* ********************************************************************** */
/* getPageScroll :: funzione che ricava lo scrolling attuale della pagina */
/* ********************************************************************** */
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
/* ********************************************************************** */
/* pause :: attende un certo numero di millisecondi prima di proseguire */
/* ********************************************************************** */
function pause(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
/* ****************************************************************************** */
/* showBox :: funzione che mostra il box contenente l'ingrandimento dell'immagine */
/* ****************************************************************************** */
function showBox(objLink)
{
var arraySize = getPageSize(); // contiene le dimensioni della pagina e della finestra
var arrayScroll = getPageScroll(); // contiene il valore di scoll verticale
var imgPreload = new Image(); // variabile immagine per ricavare i dati
imgPreload.src = objLink.href;
var objContainer = document.getElementById("vista"); // div esterno
var objToDisplay = document.getElementById("grande"); // immagine da caricare
var objTitle = document.getElementById("commenti"); // eventuale commento o titolo dell'immagine
objToDisplay.setAttribute('src',objLink.href);
objContainer.style.left = (((arraySize[0] - imgPreload.width) / 2) + 'px');
objContainer.style.top =(arrayScroll[1] + ((arraySize[3] - imgPreload.height) / 2) + 'px');
if (objLink.getAttribute('title'))
{
objTitle.innerHTML = objLink.getAttribute('title');
objTitle.style.display = 'block';
}
else
objTitle.style.display = 'none';
objContainer.style.display = 'block'; // visualizzo i sia il div
objToDisplay.style.display = 'block'; // che l'immagine
}
/* ******************************************************************************** */
/* hideBox :: funzione che nasconde il box contenente l'ingrandimento dell'immagine */
/* ******************************************************************************** */
function hideBox(objLink)
{
var objContainer = document.getElementById("vista");
var objToDisplay = document.getElementById("grande");
objContainer.style.display = 'none';
objToDisplay.style.display = 'none';
}
/* *********************************************************************** */
/* Inizializzazione del BOX in cui comparirà l'ingrandimento dell'immagine */
/* *********************************************************************** */
function initBox()
{
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "imgGrande")){
anchor.onclick = function () {showBox(this); return false;}
}
}
var objBody = document.getElementsByTagName("body").item(0);
// struttura prodotta dal codice
//
// <div id='vista'>
// <img id='grande' />
// <div id='comment'>...</div>
// </div>
var objVista = document.createElement("div");
objVista.setAttribute('id','vista');
objVista.onclick = function () {hideBox(); return false;}
objVista.style.display = 'none';
objVista.style.position = 'absolute';
objVista.style.zIndex = '90';
objBody.insertBefore(objVista, objBody.firstChild);
var objImage = document.createElement("img");
objImage.setAttribute('id', 'grande');
objImage.style.margin = '10px';
objImage.style.display = 'none';
objVista.style.zIndex = '120';
objVista.appendChild(objImage);
var objComm = document.createElement("div");
objComm.setAttribute('id', 'commenti');
objComm.style.margin = '2px 10 5 10';
objComm.style.display = 'none';
objVista.appendChild(objComm);
}
window.onload = initBox;
HTML
Se avete dei dubbi su quello che ho fatto... chiedete.
Grazie
PS: so che se avessi preso il codice originale avrei fatto prima... ma che gusto c'era? 
Rispondi quotando
