多个 url 缩略图库答案

【问题标题】：Multiple url thumbnail galerry多个 url 缩略图库
【发布时间】：2017-05-22 02:45:30
【问题描述】：

大家好。请注意，我还是 CSS 的初学者 ;)

我正在为我的博客文章制作可点击的 url 缩略图预览（或者更准确地说 --> 图片库，图片下方或上面有描述，点击后会跳转到帖子本身）

，并且想知道如何显示不同的图像，而不是只显示一个相同的图像，如下面的屏幕所示：

我已经知道，我可能应该使用 background-image:，而不是 HTML 中的图像，但是当涉及到许多图像时，我不知道什么是最佳实践。

我应该为每个图像 div 创建一个类还是一个 id？或者可以由一两个班级完成吗？
在制作带有网址的帖子缩略图库时，您的最佳做法是什么？

代码如下：

 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>

非常感谢所有帮助 :)

【问题讨论】：

标签： gallery thumbnails

【解决方案1】：

您可以为它们单独创建一个 ID 并分配它们，但作为开发人员，我们应该着眼于消除重复。

仅使用 CSS 和 HTML 几乎不可能做到这一点。

所以我们需要 Javascript 的帮助。

标识符

我们需要能够让每个人都与众不同，能够让他们与众不同的东西，无论是 ID 还是类。

我将要编写的代码的语法看起来有点疯狂，但它确实有效。

解决方案

也使用 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>

【讨论】：