複数のURLサムネイルgalery

私のブログ記事のクリック可能なサムネイルプレビューの作成に取り組んでいます。（またはより正確には、画像のギャラリーの下または上に説明がありますクリックしたときに、ポスト自体が表示されますことを彼ら、）

、以下の画面のように、代わりに一つだけ同じのを切り抜いた画像の表示について、疑問に思っ：

を私はすでに知っている、私はおそらく背景を使用する必要がありますimag e：はHTMLの画像ではなく、多くの画像で何がベストプラクティスであるかを知ることができません。

イメージIDごとにクラスまたはIDを設定する必要がありますか？または、1つまたは2つのクラスで行うことができますか？
URLでポストサムネイルをギャラリーにする際のベストプラクティスは何ですか？

ここでは、コードです：

div.wrapper{ 
 
    width: ("275 + YOUR border-size" x 3)px; 
 
    } 
 
    div.image{ 
 
    background-image: url(..path to your img); 
 
    float: left 
 
    }

<div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="image"></div> 
 
    <div class="image"></div> 
 
    <div class="image"></div> 
 
    ... add all your imgs here 
 
    <div style="clear: both"></div> //need this one here to make the wrapper extend 
 
</div>

すべてはあなたが個別にそれらのすべてのためのIDを作成し、それらを割り当てることができ感謝:)

出典

2017-01-07 Tomasz

を助けるが、開発者としては重複をなくすべきである。

CSSとHTMLだけでは、これを達成することはほとんど不可能です。

私たちはJavascriptの助けが必要です。

識別子

私たちは、それがIDまたはクラスだかどうか、離れてそれらすべてを設定することができ、それぞれ1特別な、何かを作ることができる何かを必要としています。

私が書こうとしているコードの構文はちょっと狂っていますが、うまくいきます。また、jqueryのを使用して

ソリューション

。

 $(document).ready(function(){ 
    //once the document/page has loaded run this code 
     array = [filepath1,filepath2,filepath3]; 
     //hold all your file paths in an array 
     for (i=0;i<array.length;i++){ 
      //here we loop through the array and enclose each file path with an image tag 
      $('.wrapper').html('<img class="image" src="'+array[i]+'.jpg" /><br>'); 
     } 
    });

HTML

あなたのHTMLはこの

 <html lang="en"> 
      <head> 
       <!--Include Javascript file you just made--> 
       <script type="text/javascript" src="./file.js"></script> 
       <!--Include jquery--> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      </head> 

      <body> 
       <div class="wrapper"></div> 
      </body> 
     </html>

のようになります。

出典

2017-01-09 12:24:53

複数のURLサムネイルgalery

答えて

関連する問題