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

Question

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

0

как изменить размер изображения с помощью 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, но он не должен продолжать увеличивать изображение.

theNoob 09 окт. 2013, в 19:59

Источник

Теги:

jquery

2 ответа

0

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

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

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

Ryan Miller 09 окт. 2013, в 15:45

0

эй, спасибо тебе за это, у меня еще не было возможности попробовать это, но я сделаю это как можно скорее ... у меня был один вопрос ... после того, как ты увеличил изображение или открышь его, как мы можем вместо этого выбраться? нажав кнопку назад или кнопку обновления? в основном, я могу нажать на изображение снова, чтобы оно вернулось к исходному размеру?
theNoob 12 окт. 2013, в 01:52
0

Может сделать что-то очень простое: JSFiddle . Проверяет, какая текущая высота, а затем переключается на основе этого.
Ryan Miller 12 окт. 2013, в 02:00

Ещё вопросы

эй, спасибо тебе за это, у меня еще не было возможности попробовать это, но я сделаю это как можно скорее ... у меня был один вопрос ... после того, как ты увеличил изображение или открышь его, как мы можем вместо этого выбраться? нажав кнопку назад или кнопку обновления? в основном, я могу нажать на изображение снова, чтобы оно вернулось к исходному размеру?
Может сделать что-то очень простое: JSFiddle . Проверяет, какая текущая высота, а затем переключается на основе этого.

DontVoteMeDown · Accepted Answer · 2013-10-09T16-10-00.000Z

Здесь моя скрипка. Это просто. Уловка, чтобы не увеличиваться много раз, состоит в следующем:

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);
    }
});

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

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