使用圖像值從數組中選擇圖像並顯示（JavaScript）

Question

我有一堆照片，當我單擊它們時，我想顯示它們的放大版本。 我現在所擁有的：

    <div class="gallery">
        <div>
            <img src="content/imggallery/img1.jpg" class="oldimg" value="0">
        </div>
        <div>
            <img src="content/imggallery/img2.jpg" class="oldimg" value="1">
        </div>
        <div>
            <img src="content/imggallery/img3.jpg" class="oldimg" value="2">
        </div>
    </div>  

和Javascript / jQuery：

$(function() {
var docHeight = $(document).height();
var imageData = new Array (3);
imageData[0]="0.jpg";
imageData[1]="1.jpg";
imageData[2]="2.jpg";

$(".oldimg").click(function(){
    $("body").append("<div id='overlay'></div>");
    $("body").append("<div id='newimg'></div>");

    $("#overlay")
    .height(docHeight)
    .css({
        'opacity' : 0.4,
        'position': 'fixed',
        'top': 0,
        'left': 0,
        'background-color': 'black',
        'width': '100%',
        '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)',
        'filter': 'alpha(opacity=50)',
        'z-index': 1000
    });
    $("#newimg")
    .css({
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'background-image': 'url(' + imageData[] + ')',
        'transform': 'translate(-50%, -50%)',
        'width': '100%',
        'height': '100%',
        'z-index': 1010
     });
    $("#newimg").click(function(){
        $("#newimg").remove();
        $("#overlay").remove();
    });
});
});

現在，如何獲取圖像的值，將其傳遞給數組，然后傳遞給'background-image': 'url(' + imageData[] + ')' ？ 此外，如何調整#newimg大小以適合圖像？ 因為width和height 100%應該這樣做，但只能在不重復的情況下進行，所以我到底在哪里放置不重復的？
該代碼僅適用於固定的高度/寬度和特定的img背景，即1.jpg 。
jsfiddle中的工作示例： http : //jsfiddle.net/bx27sjLL/

太謝謝了！

Answer 1

使用attr（）獲得圖像值

 $(".oldimg").click(function(){
       var value= $(this).attr("value");
       imageData[value]; // get value 
});

演示