Question

所以我创建了这个脚本（尽管有一个教程，我还是JQuery的新手），在点击时为图片打开一个灯箱。我没有想到的是，这个脚本只会打开一张图片而不管点击一张图片。任何人都可以指出我正确的方向，我可以弄清楚如何更改此脚本，以便当我点击图片时，它打开正确，完整的图片。所有代码都在下面。

HTML

<div class="backdrop"></div>
<div class="box">
    <div class="close">X</div>
    <img class="big_img" src="../pics/placeholder.png">
</div>

<div>
    <ul class="body">
        <li class="responsive">
            <div class=image>
                <a href="#" class="lightbox"><img class="gallery" src="../pics/placeholder.png"></a>
                <p>Test</p>
            </div>
        </li>
    </ul>
    </div>

CSS

.backdrop {
  position: absolute;
  text-align: center;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter:alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  top: 20%;
  position: fixed; /* Lightboxes usually use position: fixed. */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: #ffffff;
  z-index: 51;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  display: none;
}

.close {
  position: fixed;
  float: right;
  padding-left: 10px;
  padding-top: 4px;
  margin-top: 4px;
  cursor: pointer;
  font-family: sans-serif;
}

.big_img {
  margin: 5px;
}

JQuery的

<script type="text/javascript">
    $(document).ready(function() {
        $('.lightbox').click(function(){
            $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
            $('.box').animate({'opacity':'1'}, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
        });

        $('.close').click(function(){
            close_box();
        });

        $('.backdrop').click(function(){
            close_box();
        })
    });

    function close_box()
    {
        $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                $('.backdrop, .box').css('display', 'none');
            });
    }
</script>

Answer 1

当您点击相应的缩略图时，您要做的就是打开大局。但是，您还没有提到点击了哪个缩略图，因此您的功能并不知道要打开哪个缩略图。此外，您的功能始终打开相同的图像，您应该更改图像的src。试试这个

<a href="#" class="lightbox"><img class="gallery thumbnail" src="../pics/placeholder.png"></a>

并在jquery中执行此操作

$(".thumbnail").click(function() {
   var image = $(this).attr("src");
   $('.big_img').attr("src",image);
   $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
   $('.box').animate({'opacity':'1'}, 300, 'linear');
   $('.backdrop, .box').css('display', 'block');
});

休息是一样的。

希望这会有所帮助。如果有任何查询可以随意询问。

Answer 2

试试这个Fiddle

这是解决您问题的方法。并将此脚本添加到您的上方 HTML。

SELECT material_status, COUNT(*) c
FROM purchase_order
WHERE YEAR(date_created) = YEAR(DATE_SUB(CURDATE(), INTERVAL 1 YEAR)) AND material_status='open';

JQuery - 根据点击的图像打开不同的图片

2 个答案: