Sliding Panels Navigation Question

Question

I'm using the sliding panels widget to display some image
thumbnails. The problem is, I'm displaying about 5 or so at a time,
and the showNextPanel function only moves the whole thing over by
one thumbnail, making it necessary to click it five times to show
the next set of thumbnails.
Mangled test file can be found
here.

Answer 1

Hello Luke,
I see there are 3 problems here you want/have to solve:
1. On page load you try to animate an element in page that
doesn't exists: thimbContainer. Every time you load the page in the
browser 3 alerts that the element is not found are generated by the
Spry Effects because the element isn't there. Please remove the
following code from the onload attribute attached to the body tag:
MM_effectAppearFade('thumbContainer', 2000, 0, 100, false);
2. The move next arrow doesn't work on the first click. The
problem appears because the SlidingPanel widget is instantiated
before the data to be putted in place in your page by the ds1 XML
DataSet. The regions are populated on page finish with the data but
the SlidingPanel widget will still try to animate the old,
incorrect element on the first click. To avoid this problem you'll
have to remove from page the SlidingPanel instantiation and
register a listener on the 'ticker' region update. Remove this
code:
<script type="text/javascript">
var sp = new Spry.Widget.SlidingPanels("ticker");
</script>
and just after the ds1 DataSet instantiation add the
following line:
Spry.Data.Region.addObserver('ticker',
{onPostUpdate:function(){sp = new
Spry.Widget.SlidingPanels("ticker");}});
3. To move the slider with the next 5 or prev 5 elements
you'll have to create your own functions that should add or
subtract from the current display index 5. The functions you look
for are:
function moveNextFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) + 5;
var maxPanels = sp.getContentPanels().length;
if (idx > maxPanels)
idx = maxPanels;
sp.showPanel(idx);
function movePrevFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) - 5;
var minPanels = 0
if (idx < minPanels)
idx = minPanels;
sp.showPanel(idx);
Please change the onclick for the previous and next arrows in
your Sliding Panels with calls to these 2 functions.
Regards,
Cristian