JavaScript画像ギャラリー

Question

動的に生成された画像の配列に基づいて動作するjavascript関数を探しています。私はプレビューウィンドウを持っています。

これをクリックすると、プレビューウィンドウを非表示にして、最初のイメージを配列にロードします。私は配列の残りの画像をナビゲートすることができるようになります。

誰かが正しい方向に私を指すことができた場合、またはあなたがこれを一緒にする方法を知っていれば、それは非常に高く評価されます。ありがとう。

Answer 1

イメージ要素を動的に作成し、これを使用し続けることができますか？ （これはjQueryを使用しています）。

<button id='nextImage'>Load nect image</button> 
<div id='imageContainer'><div id='previewWindow'>Preview</div></div> 


//Javascript frome here (JQuery) 
var images = Array(); 
images.push('url/to/image.jpg'); 
window.lastImage=-1; 
$('#previewWindow').click(function() { ('#nextImage').click(); }); 
$('#nextImage').click(function() { 
window.lastImage += 1; 
if(typeof(images[window.lastImage]) == 'undefined') { return; } //if endof array 
$('#previewWindow').remove(); //better is to only do this once 
$('#image').remove(); //Only creating an image once is even better 
$('<img />') 
    .attr('id', 'image') 
    .attr('src', images[window.lastImage]) 
    .appendTo('#imageContainer'); 
}); 

EDIT
はちょうどあなたがプレビューウィンドウをクリックすることがしたいと思い読んで、それを追加しました。