1. Home
  2. Marco HTML
  3. Gallery
  4. Gallery structure

Gallery structure

Gallery uses a grid columns with settings count of columns and space between gallery items. Single gallery item you can open in lightbox or single gallery page.


Gallery filters

Add list of category filters and replace hash to category page link. Change position for filters to appear, simply replace class from “filters-right” to “filters-left” or “filters-center”.
 

...
   <div class="gallery-filters small-12 columns animate-text animate-second">
      <ul class="gallery-filters-list filters-right">
         <li>
            <a href="category page url" class="active-filter">All</a>
         </li>
         <li>
            <a href="category page url" class="active-filter">CATEGORY NAME</a>
         </li>
         ...
      </ul>
   </div>
...

Gallery options

By default the gallery will appear as 3 columns grid with space between items (30px). You can modify this appearance in a couple of ways by changing a class to the gallery container. All settings we presented below.
 
NOTE: For window width less than 640px, we appear 1 column. If window width is wider than 640px and less than 1024 px, gallery will appear as 2 columns grid.
 

Grid options:

 

gallery-2-col
for high resolution gallery will appear as grid with 2 columns
gallery-3-col
for high resolution gallery will appear as grid with 3 columns
gallery-4-col
for high resolution gallery will appear as grid with 4 columns
data-gutter
add space between gallery items

 

Gallery item:

 

single gallery page
add single gallery url
single image in lightbox
add to gallery item class “swipebox”
images gallery in lightbox
add to gallery item images, class “swipebox” and attribute “data-rel”
video in lightbox
add to gallery item video url, class “swipebox” and attribute “data-rel”

Gallery item structure

 

...
   GALLERY ITEM DEFAULT (open single gallery)

   <div class="gallery-item">
      <a href="single gallery url" class="gallery-item-img">
         <span class="img-wrapper">
            <img src="image url" alt=""/>
         </span>
         <div class="gallery-item-info">
            <div class="gallery-item-title">
               <h6>Gallery title</h6>
            </div>
         </div>
         <div class="gallery-item-overlay"></div>
      </a>
   </div> 
   ...
   
   SINGLE IMAGE OPEN IN LIGHTBOX
   <a href="single gallery url" class="gallery-item-img swipebox">
   ...
   
   IMAGES GALLERY OPEN IN LIGHTBOX
   <a href="single image url" class="gallery-item-img swipebox" data-rel="gallery_group">
   ... 
      <div class="gallery-icon">
         (optionally gallery icon)
      </div>
   ...
   </a>
   <a href="single image url" class="gallery-item-img swipebox" data-rel="gallery_group"></a>
   ...
 
   VIDEO OPEN IN LIGHTBOX
   <a href="video url (YouTube or Vimeo)" class="gallery-item-img swipebox" data-rel="video_group">
   ... 
      <div class="video-icon">
         (optionally video icon)
      </div>
...

Single gallery

 
Single gallery page is structured with gallery navigation, image slider, gallery header and content. On the top of the single gallery, we created simple navigation. Click on arrow to go previous or next gallery. Click on “x” to move gallery page. Arrows on the left or the right side of image, nav to previous or next image in galery.
 

...
   <single-gallery page-padding-top>
       ...
       <div class="single-post-nav">
           <div class="previous-post arrow-prev">
               <a href="previous gallery url">
                  ARROW ICON
               </a>
           </div>
           <div class="back-to-blog icon-close">
               <a href="gallery page url">
                  CLOSE ICON
               </a>
           </div>
           <div class="next-post arrow-next">
               <a href="next gallery url">
                  ARROW ICON
               </a>
           </div>
       </div>
       ...
           
       <div class="single-gallery-slider swiper-container">
         <div class="swiper-wrapper">  
            <div class="swiper-slide"> 
               <div class="slide"> 
                  <img src="image url" alt=""/> 
               </div>
            </div>
         </div>
       </div>
       ...
       
       <div class="page-header">
           <div class="header">
               GALLERY HEADER
           </div>
       </div>
       ...

       <div class="single-gallery-content">
           GALLERY CONTENT
       </div>

...
Was this article helpful to you? Yes No