...

View Full Version : Slide 'n' Dissapear Element(s)



okram666
06-27-2009, 01:51 PM
Hi! :)

I'm working on JS gallery (for fun) and I need help.
I made some kind of gallery with fade out/in effect and it works more or less alright, but now i want to add more functionality to it http://www.eynsoft.com/myGallery/ :D

I want to add some kind of slide effect to listed images (when somebody click to show new row of images with slide effect).
My problem at this time is http://www.eynsoft.com/myGallery/slide.php ...
I can move div around but i want to make him dissapear gradually when he leave the border of container div...
Is there some way to do this (without using giant JS Libraries)...
Thanks in advance ;)

tomws
06-27-2009, 02:38 PM
jquery.com

Edit: missed you last line before I posted earlier. Jquery has a "minified" version that helps getting to a smaller footprint.

vwphillips
06-27-2009, 02:55 PM
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}



function slideIt()
{
var slidingDiv = document.getElementById("d2");
var imgs=slidingDiv.getElementsByTagName('IMG')
var stopPosition = -800;

if (parseInt(slidingDiv.style.left) > stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
for (var z0=0;z0<imgs.length;z0++){
zxcOpacity(imgs[z0],100+(Math.max(Math.min(slidingDiv.offsetLeft+imgs[z0].offsetLeft,0),-100)));
}
setTimeout(slideIt, 100);
}
}







<div style="position:relative;text-align:left; width:80%; border:1px solid #999999; margin-left:10%;">


<div id="d2" style="position:relative; left:10px;">

<img src="http://www.eynsoft.com/myGallery/images/nature-1.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>
<img src="http://www.eynsoft.com/myGallery/images/nature-2.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>
<img src="http://www.eynsoft.com/myGallery/images/nature-3.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>

<img src="http://www.eynsoft.com/myGallery/images/nature-4.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;" />
<img src="http://www.eynsoft.com/myGallery/images/nature-5.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>
<img src="http://www.eynsoft.com/myGallery/images/nature-6.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/> <br />
<img src="http://www.eynsoft.com/myGallery/images/nature-7.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;" />
<img src="http://www.eynsoft.com/myGallery/images/nature-8.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;" />
</div>

okram666
06-27-2009, 03:24 PM
Thanks guys :)

okram666
06-27-2009, 04:04 PM
Ok some weird stuff is going on...

If I use left property in css file then the function slideIt() doesn't work (JS doesn't return value), but if I put that property directly inside element
<div id="slidingDIV" style="left:10px;"> then it works fine... :confused:

vwphillips
06-27-2009, 06:32 PM
function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}

function zxcSVInt(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}



pass the slider object and 'left' to the functions above to obtain the inline or the CSS class rule value.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum