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>
Я хочу, чтобы мои изображения открывались, когда кто-то нажимал на них, но моя проблема в том, что если я нажму более одного снимка, другой останется открытым, я попробовал разные способы, и ничто не сработало для меня, у вас есть какая-то идея Как я могу решить эту проблему? Я хочу, чтобы ранее открытое изображение закрывалось, когда нажимали новый.
Вы можете установить width
и height
всех .myImg
в исходные размеры и только увеличить размер щелкнутого изображения:
$('.myImg').click(function() {
$('.myImg').width(40);
$('.myImg').height(300);
$(this).width('60%');
$(this).height('60%');
});
отредактируйте текущий 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
меньше, а затем откройте тот, который вы нажали