esempio.htm
Codice PHP:
<!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>Gallery - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="Ad ogni apertura di pagina questo script genera un differente colore di sfondo." />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<script type="text/javascript" src="script/gallery.js"></script>
<script type="text/javascript" src="script/lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready
(
function()
{
gallery = new Gallery("#imgPanel", ".thumbLink", ".nodisplay");
gallery.showImg();
gallery.createStatusBar(gallery.load("imgs/"), 30);
$(".thumbLink").click(
function()
{
gallery.destroyStatusBar();
index = $(".thumbLink").index(this);
gallery.setIndex(index);
setTimeout("gallery.createStatusBar(gallery.load('imgs/'), 30)", 1000);
gallery.showImg(null, true);
return false;
}
);
function enableButtons()
{
$("#play").click(
function()
{
gallery.start(gallery);
$("#play").unbind("click");
$("#prev").unbind("click");
$("#next").unbind("click");
return false;
}
);
$("#prev").click(
function()
{
gallery.destroyStatusBar();
gallery.showPrev(true);
setTimeout("gallery.createStatusBar(gallery.load('imgs/'), 30)", 1000);
return false;
}
);
$("#next").click(
function()
{
gallery.destroyStatusBar();
gallery.showNext(true);
setTimeout("gallery.createStatusBar(gallery.load('imgs/'), 30)", 1000);
return false;
}
);
}
enableButtons();
$("#stop").click(
function()
{
gallery.stop();
enableButtons();
return false;
}
);
}
);
</script>
<style>
li
{
display: inline;
}
</style>
</head>
<body>
<a class='thumbLink' href='imgs/bigThumbs/a.jpg'>
[img]imgs/thumbs/a.jpg[/img]
</a>
<a class='thumbLink' href='imgs/bigThumbs/b.jpg'>
[img]imgs/thumbs/b.jpg[/img]
</a>
<a class='thumbLink' href='imgs/bigThumbs/c.jpg'>
[img]imgs/thumbs/c.jpg[/img]
</a>
[img]imgs/bigThumbs/a.jpg[/img]
[img]imgs/bigThumbs/b.jpg[/img]
[img]imgs/bigThumbs/c.jpg[/img]
<div id="player">
<div id="imgPanel" style="width:400px; height:300px"></div>
<div id="commands">
[url="#"]prev[/url]
[url="#"]play[/url]
[url="#"]stop[/url]
[url="#"]next[/url]
</div>
</div>
<div align="center">
[url="http://www.html.it"][img]logo_htmlit.gif[/img][/url]
<span style="font-size:80%; color:gray">sponsor</span>
<script language="javascript" type="text/javascript">
<!--
var browName = navigator.appName;
var SiteID = 1;
var ZoneID = 24;
var browDateTime = (new Date()).getTime();
if (browName=='Netscape')
{
document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://adserver.html.it/a.aspx?ZoneID=' + ZoneID + '&Task=Get&IFR=False&Browser=NETSCAPE4&PageID=90264&SiteID=' + SiteID + '&Random=' + browDateTime + '">'); document.write('</'+'scr'+'ipt>');
}
if (browName!='Netscape')
{
document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://adserver.html.it/a.aspx?ZoneID=' + ZoneID + '&Task=Get&IFR=False&PageID=90264&SiteID=' + SiteID + '&Random=' + browDateTime + '">'); document.write('</'+'scr'+'ipt>');
}
// -->
</script>
<noscript>
<a href="http://adserver.html.it/a.aspx?ZoneID=24&Task=Click&Mode=HTML&SiteID=1&PageID=90264" target="_blank">
[img]http://adserver.html.it/a.aspx?ZoneID=24&Task=Get&Mode=HTML&SiteID=1&PageID=90264[/img]</a>
</noscript></div>
</body>
</html>
script/gallery.js
Codice PHP:
/*
Autore: Luca Piccinelli [url]www.lucapiccinelli.com[/url]
Codice rilasciato sotto licenza GPL [url]http://www.gnu.org/licenses/gpl.html[/url]
[url]http://katolaz.homeunix.net/gplv3/gplv3-it-final.html[/url] (italiano)
*/
function Gallery(displayId, linkClass, preloadClass)
{
this.imgIndex = 0;
this.display = displayId;
this.links = $(linkClass).get();
this.imgNumber = this.links.length;
this.slideShow = null;
if(preloadClass)
$(preloadClass).css({display: "none"});
this.showImg = function(_index, fade)
{
if(!_index)
index = this.imgIndex;
else
index = _index;
var link = this.links[index];
if($("#displayImg"))
{
$("#displayImg").remove();
}
$("[img]" + link.href + "[/img]").appendTo(this.display);
$("#displayImg").css(
{
position: "absolute",
top: $(this.display).offset().top + 1,
left: $(this.display).offset().left + 1,
zIndex: "0"
}
);
if(fade)
$(".fade").css({display: "none"}).fadeIn(1000);
}
this.setIndex = function(index)
{
this.imgIndex = index;
}
this.showNext = function(fade)
{
this.imgIndex = ++this.imgIndex % this.imgNumber;
this.showImg(null, fade);
}
this.showPrev = function(fade)
{
this.imgIndex = --this.imgIndex;
if(this.imgIndex < 0) this.imgIndex = this.imgNumber - 1;
this.showImg(null, fade);
}
this.load = function(path)
{
var fileName = this.links[this.imgIndex].href.split("/").pop();
var top = $(this.display).offset().top + ($(this.display).height() / 2);
var left = $(this.display).offset().left + ($(this.display).width() / 2);
$("[img]script/img/indicator_medium.gif[/img]").css(
{
position: "absolute",
top: top,
left: left
}
).appendTo(this.display);
return $("<div id='loadReturn'></div>").load(path + "fileData.php?filename=" + fileName, function()
{
$("#indicator").remove();
}
);
}
this.createStatusBar = function(content, height)
{
h = height
if(!height) h = 20
/* Creazione della statusBar */
$("<div id='statusBar'></div>").appendTo(this.display)
$("#statusBar").append(content);
$("#statusBar").css(
{
position: "absolute",
top: $(this.display).offset().top + 1,
left: $(this.display).offset().left + 1,
zIndex: "1",
width: $(this.display).width() - 2,
display: "none",
height: h,
border: "1px solid",
background: "#000000",
color: "#FFFFFF",
fontSize: "10px",
opacity: "0.50"
}
).slideDown(700);
}
this.destroyStatusBar = function()
{
$("#statusBar").slideUp(700,
function()
{
$("#statusBar").remove();
}
);
}
this.start = function(_obj)
{
obj = _obj;
obj.destroyStatusBar();
obj.showNext(true);
setTimeout("obj.createStatusBar(obj.load('imgs/'))", 1000);
this.slideShow = setTimeout("obj.start(obj)", 5000);
}
this.stop = function()
{
clearTimeout(this.slideShow);
}
}
Permessi di invio
Rispondi quotando