Несколько url thumbnail galeries

Привет всем. Пожалуйста, обратите внимание, что я еще новичок в CSS;)Несколько url thumbnail galeries

Я воздействую на создание интерактивного предварительного просмотра URL миниатюры из моих сообщений в блоге (точнее -> галереи изображений с описанием под или на им, что при нажатии приведет вас к самому сообщению)

, и интересно, о дисплее diffrent изображений вместо одного и того же, как на экране ниже:

Gallery

I уже знаю, что я, вероятно, должен использовать background-imag e: вместо изображения в HTML, но я не могу понять, что лучше всего подходит для многих изображений.

Должен ли я создать класс или идентификатор для каждого изображения div? Или это может быть сделано одним или двумя классами?
Каковы ваши лучшие практики, когда дело доходит до создания галереи эскизов сообщений с 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>

Все помощь ценится :)

источник

2017-01-07 Tomasz

Вы можете создать идентификатор для каждого из них в отдельности и назначить их но в качестве разработчиков мы должны стремиться к истреблению дублирования.

Использование только CSS и HTML почти невозможно для достижения этого.

Для этого нам нужна помощь Javascript.

Identifier

Нам нужно что-то, что может сделать каждый один специальный, то, что можно установить их всех друг от друга, независимо от того, что идентификатор или класс.

Синтаксис кода, который я собираюсь написать, будет выглядеть немного сумасшедшим, но он работает.

Решение

Использование 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

ответ

Смежные вопросы