Spry Tabbedpane problem

Question

Hi,
I'm combining what I learned in creating a spry photo album
with using a tabbed pane for the thumbnails. But every time I add
another pane of thumbnails, the previous ones disappear. See what I
mean here:
http://www.dananourie.com/portfolio.html
Each tab changes correctly, but the thumbnails aren't showing up,
except for the first one.
This is the code that I have at the top of my page to call
the xml file for each type of photos:
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("scenicphotos.xml",
"/gallery3/photos/photo");
var dsData = new Spry.Data.XMLDataSet("scenicphotos.xml",
"/gallery3");
</script>
<script type="text/javascript">
var dsGallery2 = new Spry.Data.XMLDataSet("naturephotos.xml",
"/gallery4/photos/photo");
var dsData2 = new Spry.Data.XMLDataSet("naturephotos.xml",
"/gallery4");
</script>
<script type="text/javascript">
var dsGallery3 = new Spry.Data.XMLDataSet("travelphotos.xml",
"/gallery5/photos/photo");
var dsData3 = new Spry.Data.XMLDataSet("travelphotos.xml",
"/gallery5");
</script>
<script type="text/javascript">
var dsGallery4 = new Spry.Data.XMLDataSet("stockphotos.xml",
"/gallery6/photos/photo");
var dsData4 = new Spry.Data.XMLDataSet("stockphotos.xml",
"/gallery6");
</script>
<style type="text/css">
Then where the code for the panes are:
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
tabindex="0">Scenic</li>
<li class="TabbedPanelsTab"
tabindex="0">Nature</li>
<li class="TabbedPanelsTab"
tabindex="0">Travel</li>
<li class="TabbedPanelsTab"
tabindex="0">Stock</li>
<li class="TabbedPanelsTab" tabindex="0">Digital
Art</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="thumbs" spry:region="dsGallery dsData">
<img src="{dsData::thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery" class="thumbs"
onclick="dsGallery.setCurrentRow('{ds_RowID}');" />
</div></div>
<div class="TabbedPanelsContent">
<div id="thumbs" spry:region="dsGallery2 dsData2">
<img src="{dsData2::thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery2" class="thumbs"
onclick="dsGallery2.setCurrentRow('{ds_RowID}');" />
</div></div>
<div class="TabbedPanelsContent">
<div id="thumbs" spry:region="dsGallery3 dsData3">
<img src="{dsData3::thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery3" class="thumbs"
onclick="dsGallery3.setCurrentRow('{ds_RowID}');" />
</div></div>
<div class="TabbedPanelsContent">
<div id="thumbs" spry:region="dsGallery4 dsData4">
<img src="{dsData4:thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery4" class="thumbs"
onclick="dsGallery4.setCurrentRow('{ds_RowID}');" />
</div></div>
<div class="TabbedPanelsContent">Content 5</div>
</div>
</div>
I don't understand why each pane can't just pull in the
photos as the first one does. I can have two panes working, but
when I had a third, it hoses the one before it. You can see how it
should work as shown on my home and bio pages.
thanks!!! Dana

Answer 1

Well, you are changing the right style selector.
I suggest you use the vertical image element as a background image in the menu items themselves, then they will be harmoniously positioned with the menu.
You can give each menu item its own width (in the stylesheet), if you need to, but for heaven's sake, get rid of those huge padding measurements. Pad enough on the right to disclose the vertical image, but try centering the text in each button instead of using padding to move it around.
Beth