Sunday, 30 September 2012

Picture Gallery Using Java Script With Fade Effect Change

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

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>