Question

在带有网格系统的引导程序中，元素会自动并排排列，但是有没有一种方法可以将元素一个又一个地堆叠呢？

我正在尝试创建一个图库，在其中显示4张图像，将它们隐藏起来并使用分配的按钮触发每张照片。

但是因为这些图像是首先并排排列的，所以每次我显示一个图像而隐藏另一个图像时，框架都在移动。

示例：因此，如果第一张图片在A点开始，最后一张图片在D点结束。

这是我正在使用的代码

<script src="jquery/jquery-3.2.1.js"></script>

<script>

   $("#gallerytrigger_1").on('click',function(){
   $("#gallery_1").toggle();
   $("#gallery_2").hide(); 
   $("#gallery_3").hide();
   $("#gallery_4").hide();
});

$("#gallerytrigger_2").on('click',function(){
   $("#gallery_4").hide();
   $("#gallery_3").hide();  
   $("#gallery_2").toggle(); 
   $("#gallery_1").hide();
});

$("#gallerytrigger_3").on('click',function(){
   $("#gallery_4").hide(); 
   $("#gallery_3").toggle();
   $("#gallery_2").hide(); 
   $("#gallery_1").hide(); 
});

$("#gallerytrigger_4").on('click',function(){
   $("#gallery_4").toggle();
   $("#gallery_3").hide(); 
   $("#gallery_2").hide(); 
   $("#gallery_1").hide(); 
});
</script

@foreach($gallerys as $gallery)
<div class="col-sm-2">
 <br>
  <div id="gallery_{{$loop->iteration}}" style="display:none;">
   <p style="text-align: center;"><img style="width: 100%;border-radius: 
     6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
  </div>
 </div>
@endforeach

@foreach($gallerys as $gallery)
<div class="col-xs-2">
 <br>
  <div id="gallerytrigger_{{$loop->iteration}}">
   <hr>
   <img style="width: 200%;border-radius: 6px;margin-left: -12px;margin- 
    top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
  </div>    
</div>
@endforeach

Answer 1

尝试此代码

<script src="jquery/jquery-3.2.1.js"></script>

<script>
  $(".galleryTrigger").click(function(){
      var id = $(this).data('id');
      $(".gallery").hide();
      $("#gallery_"+id).show();
  });
</script>

@foreach($gallerys as $gallery)
<div class="col-sm-2">
 <br>
  <div id="gallery_{{$loop->iteration}}" style="display:none;" class="gallery">
   <p style="text-align: center;"><img style="width: 100%;border-radius: 
     6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
  </div>
 </div>
@endforeach

@foreach($gallerys as $gallery)
<div class="col-xs-2">
 <br>
  <div id="gallerytrigger_{{$loop->iteration}}" data-id="{{$loop->iteration}}" class="galleryTrigger">
   <hr>
   <img style="width: 200%;border-radius: 6px;margin-left: -12px;margin- 
    top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
  </div>    
</div>
@endforeach

一张一张地堆叠图像

1 个答案: