Gallery Components

    • Example 1:

    • Code:

      <ul class="vcel vm-cel vsl-cel vs-cel cell-gallery" style="--columns: 3;--m-columns: 3;--sl-columns: 3;--s-columns: 2;" data-vsettings>
      <li class="image-item image-326 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="cell-66690885db313" href="/wp-content/uploads/2017/08/gallery_05.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_05-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-325 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="cell-66690885db313" href="/wp-content/uploads/2017/08/gallery_04.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_04-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-324 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="cell-66690885db313" href="/wp-content/uploads/2017/08/gallery_03.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_03-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-323 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="cell-66690885db313" href="/wp-content/uploads/2017/08/gallery_02.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_02-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-322 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="cell-66690885db313" href="/wp-content/uploads/2017/08/gallery_01.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_01-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-321 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="cell-66690885db313" href="/wp-content/uploads/2017/08/gallery_06.jpg">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_06-450x299.jpg"></figure>
      </a>
      </div>
      </li>
      </ul>

    • Example 1:

    • Code:

      <ul class="vrow list-gallery" style data-vsettings>
      <li class="image-item image-323 vl-6 vm-6 vs-6 vcol">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="list-66690885dce5d" href="/wp-content/uploads/2017/08/gallery_02.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_02.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-322 vl-6 vm-6 vs-6 vcol">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="list-66690885dce5d" href="/wp-content/uploads/2017/08/gallery_01.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_01.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-321 vl-6 vm-6 vs-6 vcol">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="list-66690885dce5d" href="/wp-content/uploads/2017/08/gallery_06.jpg">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_06.jpg"></figure>
      </a>
      </div>
      </li>
      </ul>

    • Example 1:

    • Code:

      <ul class="vgri vl-2 vali-v vmar-l0 vpad-li-l0 vpad-li-b10 grid-gallery" style data-vsettings>
      <li class="image-item image-326 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="grid-66690885de8c0" href="/wp-content/uploads/2017/08/gallery_05.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_05-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-325 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="grid-66690885de8c0" href="/wp-content/uploads/2017/08/gallery_04.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_04-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-324 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="grid-66690885de8c0" href="/wp-content/uploads/2017/08/gallery_03.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_03-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-323 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="grid-66690885de8c0" href="/wp-content/uploads/2017/08/gallery_02.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_02-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-322 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="grid-66690885de8c0" href="/wp-content/uploads/2017/08/gallery_01.png">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_01-450x299.png"></figure>
      </a>
      </div>
      </li>
      <li class="image-item image-321 ">
      <div class="vimg vove-h">
      <a class="link-to-figure vlight vh-run" data-vlight="grid-66690885de8c0" href="/wp-content/uploads/2017/08/gallery_06.jpg">
      <figure class="vmedia vtra vgrow vrun" data-vmedia="/wp-content/uploads/2017/08/gallery_06-450x299.jpg"></figure>
      </a>
      </div>
      </li>
      </ul>

    • Example 1:

    • Code:

      <div id="slider-66690885e07b7" class="vslider slider-gallery" style data-vsettings="items:5,tween:vmoveIaUa,stagger:100">
      <ul id="slider-66690885e07b7-div" class="vsli-divs vpos-r vgri vl-5 vm-5 vs-1">
      <li class="vsli-div image-item image-326 ">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="slider-66690885e07b7" href="/wp-content/uploads/2017/08/gallery_05.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_05.png"></figure>
      </a>
      </div>
      </li>
      <li class="vsli-div image-item image-325 ">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="slider-66690885e07b7" href="/wp-content/uploads/2017/08/gallery_04.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_04.png"></figure>
      </a>
      </div>
      </li>
      <li class="vsli-div image-item image-324 ">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="slider-66690885e07b7" href="/wp-content/uploads/2017/08/gallery_03.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_03.png"></figure>
      </a>
      </div>
      </li>
      <li class="vsli-div image-item image-323 ">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="slider-66690885e07b7" href="/wp-content/uploads/2017/08/gallery_02.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_02.png"></figure>
      </a>
      </div>
      </li>
      <li class="vsli-div image-item image-322 ">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="slider-66690885e07b7" href="/wp-content/uploads/2017/08/gallery_01.png">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_01.png"></figure>
      </a>
      </div>
      </li>
      <li class="vsli-div image-item image-321 ">
      <div class="vimg">
      <a class="link-to-figure vlight" data-vlight="slider-66690885e07b7" href="/wp-content/uploads/2017/08/gallery_06.jpg">
      <figure class="vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_06.jpg"></figure>
      </a>
      </div>
      </li>
      </ul>
      <ul class="vsli-nav vrow cf" data-vcontrol="slider-66690885e07b7">
      <li class="vl-3 vm-3 vs-6 vcol vtex-al">
      <p>
      <a class="vsli-tag varr vl" href="#prev"></a>
      </p>
      </li>
      <li class="vl-3 vm-3 vs-6 vcol vl-r6 vm-r6 vtex-ar">
      <p>
      <a class="vsli-tag varr vr" href="#next"></a>
      </p>
      </li>
      <li class="vl-6 vm-6 vs-12 vcol vl-l3 vm-l3 vtex-ac">
      <ul class="vsli-dots cf"></ul>
      </li>
      </ul>
      </div>
©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • Gallery Components | Frontend UI Toolkit + Wordpress Framework

  • A wordpress framework used to structure simple Javascript and CSS prototypes. Hive is lite, only includes necessities and encourages custom styling.