Picture Viewer Javascript

0

HTML

<div id="portfolio_content">
<h4 class="titles">Portfolio</h4>

   //Pictures//

<img class="myImg" src="images/cabinconcept.jpg" width="40" height="300" />
<img class="myImg" src="images/aloneconcept.jpg" width="40" height="300" />
<img class="myImg" src="images/woodsconcept.jpg" width="40" height="300" />
</div>

JAVASCRIPT

<script>
$('.myImg').click(function() {
if ($(this).height() == 300) {
    $(this).width('60%');
    $(this).height('60%');

}
else {
    $(this).width(40);
    $(this).height(300);
}
})
</script>

Я хочу, чтобы мои изображения открывались, когда кто-то нажимал на них, но моя проблема в том, что если я нажму более одного снимка, другой останется открытым, я попробовал разные способы, и ничто не сработало для меня, у вас есть какая-то идея Как я могу решить эту проблему? Я хочу, чтобы ранее открытое изображение закрывалось, когда нажимали новый.

  • 0
    не могли бы вы предоставить jsfiddle, пожалуйста?
  • 0
    jsfiddle.net/HsRL6 да простите за это! :)
Показать ещё 1 комментарий
Теги:
image

2 ответа

2
Лучший ответ

Вы можете установить width и height всех .myImg в исходные размеры и только увеличить размер щелкнутого изображения:

$('.myImg').click(function() {
    $('.myImg').width(40);
    $('.myImg').height(300);
    $(this).width('60%');
    $(this).height('60%');
});
  • 0
    работает как очарование большое спасибо, за исключением того, что я не могу затем закрыть изображение: /
  • 0
    jsfiddle.net/HsRL6/1
0

отредактируйте текущий js

$('.myImg').click(function() {
if ($(this).height() == 300) {
    $(".myImg").height(300);
    $(".myImg").width(40);
    $(this).width('60%');
    $(this).height('60%');
}
else {
    $(this).width(40);
    $(this).height(300);
}
})

это сначала сделает все изображения с классом myImg меньше, а затем откройте тот, который вы нажали

Ещё вопросы

Сообщество Overcoder
Наверх
Меню