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
How to show images with Animation
An IT Solution is a purpose and value-driven organization where everyone is empowered to take decisions in line with our culture. We provide a unique environment of freedom, flexibility & trust that allows an individuals potentials to flower; this results in tremendous growth opportunities.Such a culture, naturally, appeals to everyone. We listen, we think and we act. The IT field is all about thought leadership. We invest in thought for you as customers
No comments:
Post a Comment