Picture Gallery is use to show picture on a website.When there are
more than one picture has to be show then we use picture gallery
Which change pictures automatically.I'm here make a picture
gallery which change automatically with fade effect.I have save
my all picture on my current project and renamed them 1,2,3.....n
I want give credit of this gallery to http://www.cryer.co.uk
more than one picture has to be show then we use picture gallery
Which change pictures automatically.I'm here make a picture
gallery which change automatically with fade effect.I have save
my all picture on my current project and renamed them 1,2,3.....n
I want give credit of this gallery to http://www.cryer.co.uk
HTML Code...
<html >
<head >
<title>Girfa Photo Gallery Demo</title>
<script type="text/javascript">
// Opacity and Fade in script.
// Script is free to use provided this copyright header is included.
function SetOpacity(object,opacityPct)
{
// IE.
object.style.filter = 'alpha(opacity=' + opacityPct + ')';
// Old mozilla and firefox
object.style.MozOpacity = opacityPct/100;
// Everything else.
object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
var element=document.getElementById(id);
var opacity = element.style.opacity * 100;
var msNow = (new Date()).getTime();
opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
if (opacity<0)
SetOpacity(element,0)
else if (opacity>100)
SetOpacity(element,100)
else
{
SetOpacity(element,opacity);
element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
}
}
function FadeIn(id)
{
var element=document.getElementById(id);
if (element.timer) window.clearTimeout(element.timer);
var startMS = (new Date()).getTime();
element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1);
}
function FadeOut(id)
{
var element=document.getElementById(id);
if (element.timer) window.clearTimeout(element.timer);
var startMS = (new Date()).getTime();
element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1);
}
function FadeInImage(foregroundID,newImage,backgroundID,tt)
{
var foreground=document.getElementById(foregroundID);
if (backgroundID)
{
var background=document.getElementById(backgroundID);
if (background)
{
background.style.backgroundImage = 'url(' + foreground.src + ')';
background.style.backgroundRepeat = 'no-repeat';
}
}
SetOpacity(foreground,0);
foreground.src = newImage;
if (foreground.timer) window.clearTimeout(foreground.timer);
var startMS = (new Date()).getTime();
foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
setTimeout("FadeInImage('"+foregroundID+"','"+newImage+"','"+backgroundID+"',"+tt+")",tt*4);
}
var i=0;
function stimer()
{
i++;
if(i>3)
{
i=1;
}
FadeInImage('img1',i+'.jpg','emilybackgrounddiv',2000);
setTimeout("stimer()",3000);
}
</script>
</head>
<body onload="stimer()">
<img src=1.jpg height="400px" width="400px" id="img1" />
</body>
</html>
Another way
<html>
<head>
<script language=javascript>// Browser Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-08 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var slideCache = new Array();
function RunSlideShowWithLinks(pictureID,linkID,imageLinks,displaySecs)
{
var separator = imageLinks.indexOf(";");
var nextImage = imageLinks.substring(0,separator);
if (slideCache[nextImage] && slideCache[nextImage].loaded)
{
var futureImages = imageLinks.substring(separator +1,imageLinks.length) + ';' + nextImage;
separator = futureImages.indexOf(";");
var nextLink = futureImages.substring(0,separator);
futureImages= futureImages.substring(separator +1,imageLinks.length) + ';' + nextLink;
var picture=document.getElementById(pictureID);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = nextImage;
document.getElementById(linkID).href = nextLink;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
setTimeout("RunSlideShowWithLinks('"+pictureID+"','"+linkID+"','"+futureImages+"',"+displaySecs+")",
displaySecs*400);
// Identify the next image to cache.
separator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,separator);
}
else
{
setTimeout("RunSlideShowWithLinks('"+pictureID+"','"+linkID+"','"+imageLinks+"',"+displaySecs+")",250);
}
// Cache the next image to improve performance.
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].loaded = false;
slideCache[nextImage].onload = function(){this.loaded=true};
slideCache[nextImage].src = nextImage;
}
}
function test(msob)
{
alert(msob)
}
function chfade(id,imnm)
{
var img=document.getElementById(id);
if(img.filters)
{
img.style.filter="blendTrans(duration=.5)";
img.filters.blendTrans.Apply();
}
img.src=imnm;
if(img.filters)
{
img.filters.blendTrans.play();
}
}
</script>
<script type="text/javascript">
RunSlideShowWithLinks("img1","EmilyLink", "image/gallery/1.jpg;image/gallery/2.jpg;image/gallery/3.jpg" ,5);
</script>
</head>
<body > <a id="EmilyLink" href="http://www.cryer.co.uk/emily">
<img src="a/b/2.jpg" height="400px" width="400px" id="Image3" />
</body>
</html>
No comments:
Post a Comment