Définition dynamique du tableau d'images (actuellement statique) en Javascript

Question

Je souhaite implémenter un diaporama d'images à l'aide de fichiers javascript et js, où le diaporama contient les images top4.

J'ai utilisé le script où le tableau d'images a des images statiques.

Je veux le convertir dynamiquement en trouvant mes noms d'images à partir des fichiers index.aspx.cs qui sont stockés dans des champs cachés. Comment puis-je récupérer ces champs masqués et les ajouter au tableau d'images?

<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> 

où le script ci-dessus a une image imagée d'images statiques. Je veux le faire dynamiquement comme dans le 1er script en trouvant des valeurs de champs cachés.

Comment puis-je faire cela.

Je suis pauvre en javascript. S'il vous plaît aidez-moi

Answer 1

Si vous connaissez l'ID de vos champs cachés [zones de saisie cachés], alors vous pouvez essayer cette

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

Answer 2

Avant le script donné exécute, vous pouvez créer un tableau Javascript contenant les noms de vos scripts est toutefois approprié, par exemple:

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

Ensuite, lorsque vous créez le fadeSlideShow, vous pouvez passer ce tableau au lieu de créer une ligne:

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

Ceci utilisera le tableau que vous avez créé précédemment pour les sources d'image. (Notez que selon votre extrait, vous devrez probablement en faire un tableau bidimensionnel avec des titres/légendes, mais le principe reste le même.) Créez le tableau comme variable Javascript standard, en fonction de votre code. champs cachés, puis le passer dans au constructeur de diaporama).

Notez que l'extraction d'informations à partir de champs masqués ne semble pas être le moyen le plus propre d'obtenir cette fonctionnalité. Vous pouvez constater que, si vous générez dynamiquement la page, il est plus facile de générer simplement la page avec une déclaration de tableau Javascript littérale plutôt que d'ajouter des champs cachés et de les transformer ensuite en tableau à l'exécution via JS.