Login   Register  
PHP Classes
elePHPant
Icontem

File: onpage.js

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of HunterHeads  >  phpPhotoGallery  >  onpage.js  >  Download  
File: onpage.js
Role: Auxiliary data
Content type: text/plain
Description: Javascript Source
Class: phpPhotoGallery
Display a gallery of pictures using fade effects
Author: By
Last change:
Date: 2007-05-22 13:27
Size: 1,865 bytes
 

Contents

Class file image Download
var preloadimg;

window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
attivaGallery();    //ingrandimento nella stessa pagina
attivaFade();       //effetto rollover sulle miniature
}

function attivaGallery(){
var links=document.getElementById("minipics").getElementsByTagName("a");
for(var i=0;i<links.length;i++)
    links[i].onclick=function(){Show(this);return(false)};
}

function Show(obj){
var bigimg=document.getElementById("bigimage");
var imagepath=obj.getAttribute("href");
var smallimg=obj.getElementsByTagName("img")[0];
bigimg.style.visibility="hidden";
bigimg.src=imagepath;
bigimg.title=smallimg.title;
bigimg.alt=smallimg.alt;
preloadimg=new Image();        //precarica l' immagine prima dell' effetto fade
preloadimg.src=imagepath;
Controlla();
bigimg.style.visibility="visible";
fadeIn("bigimage",0);
}

function attivaFade(){
var imgs=document.getElementById("minipics").getElementsByTagName("img");
for(var i=0;i<imgs.length;i++){
    imgs[i].onmouseover=function(){setOpacity(this,40)};
    imgs[i].onmouseout=function(){setOpacity(this,100)};
    }
}

function Controlla(){
if((preloadimg.width!=0) && (preloadimg.height!=0))
    return;
else window.setTimeout("Controlla()",100);
}

function setOpacity(obj,opacity){
opacity=(opacity==100) ? 99.999 : opacity;
obj.style.filter = "alpha(opacity:"+opacity+")";  // IE/Win
obj.style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror
obj.style.MozOpacity = opacity/100;   // Older Mozilla and Firefox
obj.style.opacity = opacity/100;      // Safari 1.2, newer Firefox and Mozilla, CSS3
}

function fadeIn(objId,opacity) {
obj = document.getElementById(objId);
if(opacity <= 100){
  setOpacity(obj,opacity);
  opacity += 10;
  window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
  }
}