How to show images with Animation

You will find so many scripts to do the same task but, only one issue will arise with all the scripts “does these are browser compatible”. May the answer is yes or may be no.
But, here is the solution you have to use “SpryEffects.js”. This is truly browser compatible is easy to implement.
I have a small example that is using this “JS” to animate images.

Download “SpryEffects.js” from net.

<script language="javascript" type="text/javascript">
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
{
Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
}
function showimage(str_path)
{
var obj=document.getElementById("a1");
str_path=str_path.replace('images/','images/large/');
var int_left=screen.width;
if (int_left>1024)
{
int_left=int_left-1024;
int_left=int_left/2;
int_left=int_left+251;
}
else
{
int_left=50;
}

obj.style.top="50px";
obj.style.left=int_left +"px";
obj.style.display = 'block';

var viframe=document.getElementById('<%=img_show.ClientID%>').src=str_path;
//MM_effectGrowShrink('a1', 1000, '0%', '100%', false, false, true);
MM_effectSlide('a1', 1000, '0%', '100%', false)
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function hidediv(str_path)
{
//MM_effectGrowShrink('a1', 1000, '100%','0%',false, false, true);
//var obj=document.getElementById("a1");
MM_effectSlide('a1', 1000, '100%','0%', false)
}

function MM_effectSquish(targetElement)
{
Spry.Effect.DoSquish(targetElement);
}

function MM_effectSlide(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}

</script>
<div ></div>
<div style="left:50px;top:50px;position:absolute;width:701px">
<img src="images/jagriti_004.jpg" onclick="showimage(this.src);" />
</div>
<div id="a1" style="position: absolute; background-color: Gray; display: none; width: 711px;
height: 500px;">

<img id="img_show" src="" runat="server" alt="Click to Close Enlarged View" style="margin: 0px;
padding: 0px; border: solid 5px #ffffff; height: 500px; width: 701px;" align="absmiddle" onclick="hidediv();" onmouseover="style.cursor='pointer'"/>

</div>

You can also download code which is using C#.

Related articles

Share: