如何调整图像大小

Question

我使用表格使用jQuery与jQuery分页，我在每行的第一列都有图像，并且有jQuery ui滑块允许我调整图像大小但是只调整第一行的大小，我怎样才能调整第一列中的所有图像的大小所有图像同时出现！

请参阅fiddle的演示

var orginalWidth = $("#image").width();

$("#infoSlider").text(orginalWidth + ', 100%');

$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;

        $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

        $("#image").width(newWidth);
    }
});

Answer 1

ID必须是唯一的，而是使用类：

<img class="image" src="http://practicalaction.org/images/sea-of-ducks-300.jpg" />

jsFiddle example

var orginalWidth = $(".image").width();
$("#infoSlider").text(orginalWidth + ', 100%');
$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;

        $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

        $(".image").width(newWidth);
    }
});

Answer 2

您对所有图像使用相同的id。这不好。

尝试使用类来识别它们，例如

<img ... class="resizable-image" ... />

然后在jQuery中使用.resizable-image而不是#image选择器。