Populating script tags with content on page load

I've not used Big Cartel before, but looking at the API link you posted, it looks as though the following function would allow you to access the data you require.

<script type="text/javascript" charset="utf-8">
  $(function() {
    Product.findAll({}, function(products) {
      $.each(products, function(i, product) {
        $('#products').append('<li><img src="' + Product.findImage(product.images[0].url, 'large') + '" /><br/><a href="' + product.url + '">' + product.name + '</a> - $' + Format.money(product.price) + '</li>');
      });
    });
  });
</script>

If you make the call to Product.findAll() before initializing the SuperSize plugin, you should be able to dynamically create the slides array. E.g. (untested)

<script type="text/javascript" charset="utf-8">
  $(function() {
    var product_slides = new Array();

    Product.findAll({}, function(products) {
        $.each(products, function(i, product) {
            var product_slide = new Object();
            product_slide.title = product.name;
            product_slide.image = Product.findImage(product.images[0].url, 'large');
            product_slide.url = product.url;

            product_slides[i] = product_slide;
        });
    });

    $.supersized({
        property_1: value,     
        property_2: value,
        // ...      
        slides: product_slides,
        // ...             
        option_1: value,
        option_1: value
    });
  });
</script>

Thank you very much for the reply - sadly I'll have to wait and test this tomorrow.
TBC...

Chris

Well, it's taken me a few hours to get to grips with the above post, but thanks to firebug's console (and of course blocblue's code), I'm almost there.

The (hopefully final) issue I have now is that whilst I need my code to be formatted as...

[
  {image : 'value', url : 'value'}
]

...what I'm actually getting is...

[
  {image = 'value', url = 'value'}
]

...which sadly isn't quite close enough.

Surely there's an easy way to substitue those equals signs for colons?

Can you post your revised code?

If you're building the slides array with JavaScript, why have you got equal signs, rather than colons?

The code is exactly as you posted - it just took me a while to get it working (developing in Big Cartel is far from straightforward).

When I console.log(product_slides);, in firebug I get the array of objects as intended, except they're formatted with "=" signs, as above (which I now understand may just be how firebug displays them, rather than how they're actually coded).

However, the problem remains that adding slides : product_slides, doesn't seem to work.

However, the problem remains that adding slides : product_slides, doesn't seem to work.

When you say doesn't work, can you be more specific. Are you getting a JS error? Is there no error, but the slides aren't displaying either?

Can you post the console output for the product_slides variable? I'm wondering whether the image URL is being generated correctly.

I'm not getting any javascript errors, just no slides displayed.

The image URL works when pasted into the address bar (although it's not the correct size, but that issue can wait for now). I'm not able to copy from firebug's console, so please see the attached screenshot.

Can't find a way to edit my previous post - after playing around, I've noticed I'm actually getting the following errors in firebug:

TypeError: element.dispatchEvent is not a function
[Break On This Error]   
return base.options.slides[vars.current_slide][field];

TypeError: base.options.slides[vars.current_slide] is undefined
[Break On This Error]   
return base.options.slides[vars.current_slide][field];

But I think this may just be supersized getting upset by the lack of data.

I cannot see any reason why the slides would not be getting populated. Is this accessible on a public URL?

Otherwise, I can only suggest putting in debug points so you can step through the JS code and find out where the values are being lost.