Master List Horizontal Layout Woes

Question

I'm combining a jQuery horizontal scroller with Spry
datasets. How's that for an invitation for trouble? My Master List
items are literally stacked ontop of one another, and I cannot for
the life of me figure out how to distribute them horizontally using
normal CSS techniques of floating left.
In this example, you'll see how I want the bottom navigation
to behave:
http://libertyclothing.com/2008/
In this example, I've added in the Spry elements. The
thumbnails at the bottom is the Master data from my external HTML
data source. The Detail displays above.
http://libertyclothing.com/2008/index_spry.htm
I think my brain is going to explode. Anyone have an idea of
how to get these divs distributed horizontally and still have the
jQuery carousel work?
Alternatively, can someone suggest how to do this using Spry
only?

Answer 1

I appreciate your help here. Seems like I'm inches away, but
those last inches have been destroying my brain.
So here's what I've done:
var ds1 = new Spry.Data.HTMLDataSet("data/unisex.html",
"unisexProducts", {distinctOnLoad: true, sortOnLoad:
"Product_Number", sortOrderOnLoad: "ascending"});
var observer = { onPostUpdate: function(notifier, data) {
// This is the invocation code for stepcarousel.js
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing
all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding
content
autostep: {enable:false, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 5, leftnav:
['images/left.png', -5, 60], rightnav: ['images/right.png', -10,
60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3
variables that contain current panel (start), current panel (last),
and total panels
contenttype: ['inline'] //content setting ['inline'] or
['external', 'path_to_external_file']
// Ends stepcarousel.js invocation code
Spry.Data.Region.addObserver("
carousel", observer);
// to reference the div containing the Spry Region
In the body (nothing really different here):
<!-- SPRY AREA -->
<div id="mygallery" class="stepcarousel" style="top:20px;
left:130px;">
<div
id="carousel" spry:region="ds1" class="belt">
// Added this id to target this div in the observer
<div spry:repeat="ds1" spry:setrow="ds1" class="panel"
style="float:left; padding:1;">
{Image}<br />{Product_Number} {Product_Name}
</div>
</div>
</div>
<!-- END SPRY AREA -->
The resultant page briefly loads, then goes blank - seemingly
caught in a loop or something.
What I want to happen here is for Spry to first populate the
master list, and only THEN for the stepcarousel.js script to apply
styling and functionality to the resultant repeated regions that
should be populating it's panels.
I suspect the answer is to be found in the stepcarousel.js
script itself somewhere in this function:
setup:function(config){
//Disable Step Gallery scrollbars ASAP dynamically (enabled
for sake of users with JS disabled)
document.write('<style
type="text/css">\n#'+config.galleryid+'{overflow:
hidden;}\n</style>')
jQuery(document).ready(function($){
config.$gallery=$('#'+config.galleryid)
config.gallerywidth=config.$gallery.width()
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0),
"offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0),
"offsetTop")}
config.$belt=config.$gallery.find('.'+config.beltclass)
//Find Belt DIV that contains all the panels
config.$panels=config.$gallery.find('.'+config.panelclass)
//Find Panel DIVs that each contain a slide
config.panelbehavior.wraparound=(config.autostep &&
config.autostep.enable)? true : config.panelbehavior.wraparound
//if auto step enabled, set "wraparound" to true
config.onpanelclick=(typeof
config.onpanelclick=="undefined")? function(target){} :
config.onpanelclick //attach custom "onpanelclick" event handler
config.onslideaction=(typeof config.onslide=="undefined")?
function(){} : function(beltobj){$(beltobj).stop();
config.onslide()} //attach custom "onslide" event handler
config.oninit=(typeof config.oninit=="undefined")?
function(){} : config.oninit //attach custom "oninit" event handler
config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft'))
//Find length of Belt DIV's left margin
config.statusvars=config.statusvars || [] //get variable
names that will hold "start", "end", and "total" slides info
config.$statusobjs=[$('#'+config.statusvars[0]),
$('#'+config.statusvars[1]), $('#'+config.statusvars[2])]
config.currentpanel=0
stepcarousel.configholder[config.galleryid]=config //store
config parameter as a variable
stepcarousel.alignpanels($, config) //align panels and
initialize gallery
}) //end document.ready
I've bolded lines that might be of interest. I know that this
part is not Spry-specific. But you can see why I thought about
hard-coding the links into an external file that I could load in
here.
Any insight is appreciated.