Question

我需要一些帮助，让我的网站上有一个投资组合。

目前，所有图片（来自四个类别中的每一个）都会显示出来。但是，当我点击激活该类别时，只显示所选类别的照片。

我希望在网站加载时以及在点击任何内容之前这样做，要么没有照片加载，要么只加载一个指定类别的照片。

到目前为止我有这个：

            <ul class="simplefilter">
                <li class="active" data-filter="1"><p>BRIDAL</p></li>
                <li data-filter="2"><p>PHOTOSHOOT</p></li>
                <li data-filter="3"><p>LASHES</p></li>
                <li data-filter="4"><p>OTHER</p></li>
            </ul>

紧随其后：

               <div class="filtr-container">

               <!-- bridal photos -->

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="img/portfolio/bridal/bridal_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/bridal/bridal_1.jpg" alt="sample image"></a>
                    </div>


                <!-- end bridal photos -->


                <!-- photoshoot photos -->

                    <div class="col s6 filtr-item col-pd" data-category="2">
                        <a href="img/portfolio/photoshoot/photoshoot_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/photoshoot/photoshoot_1.jpg" alt="sample image"></a>
                    </div>

                 <!-- end photoshoot photos -->


                 <!-- lashes photos -->

                    <div class="col s6 filtr-item col-pd" data-category="3">
                        <a href="img/portfolio/lashes/lashes_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/lashes/lashes_1.jpg" alt="sample image"></a>
                    </div>

                  <!-- end lashes photos -->


                  <!-- other photos -->

                    <div class="col s6 filtr-item col-pd" data-category="4">
                        <a href="img/portfolio/other/other_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/other/other_1.jpg" alt="sample image"></a>
                    </div>

                   <!-- end lashes photos -->
                   </div>

，我的Javascript看起来像这样：

$(function(){
    'use-strict';

    $('.simplefilter li').load(function() {
    $('.filtr-container').removeClass('active');
    });

     // portfolio filter container
    $('.filtr-container').filterizr();

    // portfolio filter
    $('.simplefilter li').click(function() {
        $('.simplefilter li').removeClass('active');
        $(this).addClass('active');
    });

    // portfolio image-popup
    $(".image-popup").magnificPopup({
        type: "image",
        removalDelay: 300,
        mainClass: "mfp-fade"
    });

});

有什么想法吗？

提前致谢！

Answer 1

密钥似乎隐藏在您使用的filterizr插件中。

在调用$('...').filterizer()构造函数的初始化时，应该传递过滤器参数：

$('.filtr-container').filterizr('filter', '1');

Answer 2

由于您说您希望在打开页面时不加载图片，我建议您这样做：

＆＃13;

function changeSrc(){
	document.getElementById("myPhoto").src = "https://image.freepik.com/psd-gratis/projeto-do-fundo-da-textura-de-madeira-branca_1022-75.jpg";
}

＆＃13;

#myPhoto {
  max-width: 200px;
}

.container{
  width: 200px;
  height: 200px;
}

＆＃13;

<div class="container" onclick="changeSrc()">
  <h3>
    Click to show image!
  </h3>
  <img src="" id="myPhoto">
</div>

＆＃13;

这样做是为了在点击您希望用户点击以显示图像的位置时设置图像的来源。这很简单，我希望这会对你有所帮助。

使DIV类处于非活动状态，直到加载直到列表项为单位

2 个答案: