Dynamically setting (currently static) image array in Javascript

Question

I want to implementa slideshow of images through javascript and js files, where the slideshow contains top4 images.

I used the script where the image array has static images.

I want to convert it dynamically by finding my images names from index.aspx.cs files which are stored in hidden fields. How do I retrieve these hidden fields and add them to the image array?

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
 dimensions: [568, 313], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["images/1.jpg", "", "", ""],
  ["images/2.jpg", "", "", ""],
  ["images/3.jpg"],
  ["images/4.jpg", "", "", ""] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "always",
 togglerid: "fadeshow2toggler"
})
 </script>

where above script have imagearray of static images. I want to make it dynamically as in 1st script by finding hidden field values.

How can I do this.

I am poor in javascript. Please help me

You should try and change the title of your question to something more meaningful — Will Dean
– Will Dean, Commented Nov 10, 2010 at 9:48

Andrzej Doyle · Accepted Answer · 2010-11-10 10:06:29Z

Before the given script executes, you can create a Javascript array containing the names of your scripts however is appropriate, for instance:

var myImages = [];
var hiddenElements = getMyHiddenElements();
for (int i = 0; i < hiddenElements.length; i++)
{
   myImages[myImages.length] = hiddenElements[i].value;
}

Then when you create the fadeSlideShow, you can pass in this array instead of creating one inline:

var mygallery2=new fadeSlideShow({
 ...
 dimensions: [568, 313], //width/height of gallery in pixels
 imagearray: myImages,
 ...

This will use the array that you created earlier for the image sources. (Note that based on your snippet, you'll likely need to make it a two-dimensional array with what's probably titles/captions, but the principle remains the same. Create the array beforehand as a standard Javascript variable, based on your hidden fields, and then pass it in to the slideshow constructor).

Note that extracting information from hidden fields doesn't sound like the cleanest way to achieve this functionality. You may find that, if you're generating the page dynamically, it's actually easier to simply generate the page with a literal Javascript array declaration rather than adding hidden fields and then turning them into an array at "runtime" via JS.

Chinmayee G · Accepted Answer · 2010-11-10 09:48:57Z

0

If you know the id of your hidden fields [hidden input boxes], then you can try this

imagearray: [
  [$("#id1").val(), "", "", ""],
  [$("#id2").val(), "", "", ""],
  [$("#id3").val()],
  [$("#id4").val(), "", "", ""] //<--no trailing comma after very last image element!
 ]

answered Nov 10, 2010 at 9:48

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

Collectives™ on Stack Overflow

Dynamically setting (currently static) image array in Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related