Hello,
I started to rewrite the lightbox code for a different layout. The main
advantage would be to have a sliding image bar, but I can not get the
sliding motion.
The html code:
<div id="slidebar">
<div id="images-wrapper">
<div id="images">
<a href="img.jpg" title="No title" rel="showcase"><img
src="img.jpg" /></a>
<a href="img.jpg" title="No title" rel="showcase"><img
src="img.jpg" /></a>
<a href="img.jpg" title="No title" rel="showcase"><img
src="img.jpg" /></a>
</div>
</div>
</div>
With the script I change the layout of #images to have only one row,
add the navigation arrows and on onmouseover effect for these arrows:
slidebar = $('slidebar');
Element.hide('slidebar'); // To prevent flickering
Element.setWidth('images',10000);
images = $('images-wrapper');
images.style.overflow = 'hidden';
/*********************************************
Here comes the main part
*********************************************/
var prevArrow = document.createElement('img');
prevArrow.setAttribute('id','prevArrow');
prevArrow.src = prevImage;
prevArrow.className = 'showcaseArrow';
prevArrow.onmouseover =function(){ new Effect.moveBy('images',0,20);
};
slidebar.appendChild(prevArrow);
var nextArrow = document.createElement('img');
nextArrow.setAttribute('id','nextArrow');
nextArrow.src = nextImage;
nextArrow.className = 'showcaseArrow';
nextArrow.onmouseover = function() { new
Effect.moveBy('images',0,-20)};
slidebar.appendChild(nextArrow);
Element.show('slidebar');
If I try this code, then I get an error for the onmouseover:
Effect.moveBy is not a constructor
Any ideas?
You can see this script in work at
http://www.rajk.uni-corvinus.hu/~nag...index/koltozes
Thx, Viktor
