При клике увеличиваются все картинки, а нужно чтобы увеличилась только одна (картинки берутся с бд массивом) Как видоизменить код?

Question

[ВладиМИР]

Вот файл который показывает все картинки

include("bd.php");

$res = mysql_query("SELECT * FROM `det` ");
while($row = mysql_fetch_array($res))
{
echo '<table><tr><td><p160>Фото из кинофильма:</p160><br>
<div class="photo">';

echo $row['imgs'];

echo '</div><br></td></tr></table>';
}

А вот js файл при клике увеличивает. При 2ом клике возвращает прежний размер.

$(function (){
$('.photo img').click(function (){

$('.photo img').css("width","400px","height","350px")
});
$('.photo img').dblclick(function (){
$('.photo img').css("width","200px","height","150px")
});
});

Нажимая например на 7ую картинку увеличиваются и первые шесть и я теряю из виду 7ую (неудобно). И еще я ставил чтобы только при одном клике мышки картинка увеличивалась и так же уменьшалась, но код не работает, работает только когда чередуется click и dbclick как в моем примере.

Comments

[Дмитрий]

Доброе утро.
Вместо $('.photo img') используйте $(this)

[ВладиМИР]

Дмитрий, надо как то комбинировать тег и this так как я перепробовал все варианты с this и код не работает, подскажи где именно он должен находится

[Дмитрий]

dazle, там где Вы указываете размер фото

[ВладиМИР]

Дмитрий,

$(function (){
$('.photo img').click(function (){

$(this).css("width","400px","height","350px")
});
$(.photo img).dblclick(function (){
$(this).css("width","200px","height","150px")
});


});

что не так делаю?

[ВладиМИР]

Дмитрий, все разобрался спс

Answer 1

[Алексей Шашенков]

Думаю лучше сделать управления стилями, это правильнее для адаптивности и производительности.

.photo img {
    width: 200px;
    height: 150px;
  }

  .photo img.active {
    width: 400px;
    height: 350px;
  }

$(function () {
    $('.photo img').on('click', function (e) {
      $(this).addClass('active');
    });

    $('.photo img').on('dblclick', function () {
      $(this).removeClass('active');
    });
  });

Answer 2

[dk-web]

Вот вам легкий фиддл.
Думаю поможет.
По клику переключается класс - toggleClass. И не нужен даббл клик, о котором никто не догадается.
Либо через hover.