DIVクラスを非アクティブにしてリスト項目をクリックするまでロードする

Question

私のウェブサイトでポートフォリオを稼働させるのに助けが必要です。

現在、私はすべての写真（4つのカテゴリのそれぞれから）が表示されています。ただし、そのカテゴリをクリックすると、選択したカテゴリの写真のみが表示されます。

サイトがロードされて何かがクリックされる前に、写真がロードされていないか、指定された1つのカテゴリの写真のみが読み込まれます。

   <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が次のようになります：

  <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> 

この続く：

$(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

：

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

#myPhoto { 
 
    max-width: 200px; 
 
} 
 

 
.container{ 
 
    width: 200px; 
 
    height: 200px; 
 
}

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

これがないと、それが設定されることですユーザーが画像を表示するためにクリックしたい場所をクリックするだけで、画像のソース。これはかなりシンプルで、これがあなたに多少役立つことを願っています。