Как изменить размер изображения на «onClick» с помощью jquery?

Как изменить размер изображения с помощью jquery?Как изменить размер изображения на «onClick» с помощью jquery?

<td align="center"><img width="150px" src="{{=URL(r=request, f='download', args=Product.image)}}" AlT="no picture provided"/></td>

изображения загружаются непосредственно из базы данных запятыми и отображаются на экране.

все, что я хочу достичь, это увеличение размера изображения при нажатии на него. что-то вроде этого http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_relative , но он не должен продолжать увеличивать изображение.

источник

2013-10-09 theNoob

Это мой fiddle. Это просто.

Хитрость не возрастут во много раз, что если:

if (img.width() < 200)

код скрипка в:

<!-- Html --> 

<img id="mrbean" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" /> 

<input type="button" value="Increase image size" /> 

// JavaScript 
$("input").click(function() { 
    var img = $("#mrbean"); 

    if (img.width() < 200) 
    { 
     img.animate({width: "200px", height: "200px"}, 1000); 
    } 
    else 
    { 
     img.animate({width: img.attr("width"), height: img.attr("height")}, 1000); 
    } 
});

Обновлено fiddle, чтобы изменить размер изображения обратно в исходном размере по второму щелчку.

источник

2013-10-09 17:25:31 DontVoteMeDown

эй спасибо за это, у меня еще не было возможности попробовать это, но сделаю это как можно скорее .. имел один вопрос .. после того, как вы увеличиваете изображение или открываете его, как мы выходим из вместо нажатия кнопки «Назад» или кнопки обновления? в основном, я могу снова щелкнуть изображение, чтобы вернуть его к исходному размеру? – theNoob

@ theNoob хорошо, я только что обновил свой пост и скрипку. Теперь он меняет размер изображения на исходный размер при втором нажатии. Он считывает исходные размеры из атрибутов 'width' и' height'. – DontVoteMeDown

@ theNoob Спасибо за согласие. – DontVoteMeDown

Очень простой JSFiddle для вас: Fiddle.

Просто установите событие click на изображении с помощью jQuery, а затем измените высоту и ширину напрямую.

$('.myImg').click(function() { 
    $(this).height(400); 
    $(this).width(400); 
    $(this).off(); //removes the handler so that it only resizes once... 
})

источник

2013-10-09 17:19:44

эй спасибо за это, у меня еще не было возможности попробовать это, но сделаю это как можно скорее .. действительно имел один вопрос .. после того, как вы увеличиваете изображение или открываете его, как мы получаем из него вместо нажатия кнопки «Назад» или кнопки обновления? в основном, я могу снова щелкнуть изображение, чтобы вернуть его к исходному размеру? – theNoob

Что-то очень простое: [JSFiddle] (http://jsfiddle.net/andRyanMiller/54Kch/5/). Проверяет, что такое текущая высота, а затем переключается на это. –

Как изменить размер изображения на «onClick» с помощью jquery?

ответ

Смежные вопросы