放大一个图片点击 [英] Enlarge one pic onclick

问题描述

我正在制作带有图片的网站，如果您点击其中应放大的图片之一。我通过在jquery中使用 toggleClass 函数做到了这一点。

我放大所选图像，如下所示：

$（'.cg1，.img2）。on（'click'，function（）{
$（this）。

  toggleClass（'enlarge'）; 
}）; 
  

使用的类：

  .enlarged {
 position：absolute; 
 z-index：2; 
 width：500px; 
 height：600px; 
 top：-10％; 
 left：300px; 
} 
  

很难解释，但现在发生的情况是，当您点击图片它放大。当你点击另一张图片时，它也会放大，但是会在放大的其他图片背后隐藏/隐藏。

我想要发生的情况是当img1被放大并且用户选择img2，它应该关闭img1并放大img2。

谢谢：）

UPDATE

它现在几乎不起作用，它会在垃圾点击后打开，一旦放大，我可以再次将其最小化。但后来我再也无法放大了。

有人可以帮我吗？

 <脚本> 
 $（document）.ready（function（）{
 $（＃header）。load（header.html .header）; 
 $（＃footer）。 load（footer.html .footer）; 
 
 $（body）。on（'click'，function（）{
 
 if（！$（ 。'.gg1，.img2）。hasClass（'expanded'））{
 
 $（。img1，.img2）。（'click'，function（）{
 $ （this）.addClass（'expanded'）; 
}）; 
} else {
 $（body）。on（'click'，'.enlarged'，function（） {
 $（this）.removeClass（'expanded'）; 
}）; 
} 
 
}）; 
}）; 
< / script> 
  

解决方案

您可以执行以下操作。这将删除放大的类。然后将其添加到您点击的图片上。 （请参阅 jsfiddle here ）

<$ p $ （'click'，function（）{

$（。img1，.img2）。removeClass（（）。code> $（。img1，.img2 放大）;
$（this）.toggleClass（'enlarge'）;

}）;

请参阅下面的工作示例：

（''click'，function（）{$（。img1）。

，.img2）。removeClass（expanded）; $（this）.toggleClass（'expanded'）;}）;

  .enlarged {position：absolute; z-index：2;宽度：500px; height：600px;前10名％; left：300px;} label {font-weight：bold;} input [type = text] {width：20em} p {margin：1em 0 0;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery。 min.js>< / script>< img class =img1src =https://placehold.it/350x150alt =image/>< img class =img2src = https://placehold.it/350x150/F2F5A9alt =image/>  

I'm making a website with images on it, and if you click on one of the images it should enlarge. I did that by using the toggleClass function in jquery

I enlarged the selected image like so:

$(".img1, .img2").on('click',function(){
    $(this).toggleClass('enlarged');
});

the used class:

.enlarged{
position:absolute;
z-index:2;
width:500px;
height:600px;
top:-10%;
left:300px;
}

it's hard to explain but right now what happens is, when you click an image it enlarges. when you click another image, it enlarges too but overlaps/stays hidden behind the other image that's enlarged.

What I would like to happen is when img1 is enlarged and the user selects img2, it should "close" img1 and enlarge img2.

Thank you :)

UPDATE

it now works barely, it opens after spamclicking and once enlarged I can minimize it again. but then I can't enlarge it anymore.

Can anybody help me with this?

<script>
    $(document).ready(function() {
        $("#header").load("header.html .header");
        $("#footer").load("footer.html .footer");

        $("body").on('click', function(){

            if(!$(".img1, .img2").hasClass('enlarged')){

                $(".img1, .img2").on('click',function(){
                    $(this).addClass('enlarged');
                });
            }else{
                $("body").on('click', '.enlarged', function(){
                    $(this).removeClass('enlarged');
                });
            }

        });
    });
</script>

解决方案

You could do something like the following. This will remove the enlarged class. Then add it to the image that you have clicked on. (See jsfiddle here)

$(".img1, .img2").on('click', function() {

  $(".img1, .img2").removeClass("enlarged");
  $(this).toggleClass('enlarged');

});

See working example below:

$(".img1, .img2").on('click', function() {
  $(".img1, .img2").removeClass("enlarged");
  $(this).toggleClass('enlarged');
});

.enlarged {
  position: absolute;
  z-index: 2;
  width: 500px;
  height: 600px;
  top: -10%;
  left: 300px;
}

label {
  font-weight: bold;
}

input[type=text] {
  width: 20em
}

p {
  margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="https://placehold.it/350x150" alt="image" />
<img class="img2" src="https://placehold.it/350x150/F2F5A9" alt="image" />

这篇关于放大一个图片点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！