Clickfunnels Image Gallery

01- Clickfunnels Image Gallery.md

Introduction

This code will help you to add an image gallery to any of your Clickfunnels pages.

Instructions

You can watch the video on this link: https://www.facebook.com/christoforocros/videos/2044466312433412/ to learn how to install the code and get your image gallery up and running!

02-cf-image-gallery.css

@import url('https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css');

/**
 * PHOTO GRID
 */
.grid-item {
    width: 100%;
    margin-bottom: 10px;
}

.masonry-link:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    transition: .2s all;
    opacity: 0;
    visibility: hidden;
}

.masonry-link:hover:before {
    visibility: visible;
    opacity: 1;
}

.masonry-link:hover:after {
    content: '\f00e';
    position: absolute;
    color: #fff;
    top: calc(50% - 20px);
    left: calc(50% - 15px);
    font-family: 'FontAwesome';
    font-size: 2em;
}

@media screen and (min-width: 40em) {
    .grid-item {
        width: calc(32% - 8px);
    }
}

03-cf-image-gallery.html

<script>
/**
 * Clickfunnels Gallery Code
 *
 * Author: Christian Cisneros
 *
 * Website: https://christiancisneros.me
 */
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
/**
 * Masonry Grid
 */
var $masonryContainer = $('[data-title~=masonry-row] .col-inner');

if ($masonryContainer.length) { // Is there a masonry in the page?
    $masonryContainer.addClass('grid');
    $masonryContainer.children().each(function() {
        $(this).addClass('grid-item');
    });

    if ($(window).width() > 640) {
        var msnry = new Masonry('.grid', {
            columnWidth: '.grid-item',
            itemSelector: '.grid-item',
            gutter: 10,
            percentPosition: false
        });

        imagesLoaded(document.querySelector('.grid')).on('progress', function() {
            msnry.layout();
        });
    }

    /**
     * Masonry Lightboxes
     */
    var currentImgSrc = null;
    $('.grid img').each(function() {
        currentImgSrc = $(this).attr('src');
        $(this).wrap('<a href="' + currentImgSrc + '" data-lightbox="masonry" class="masonry-link"></a>');
    });
}
</script>