Clickfunnels Instagram Gallery

01-Clickfunnels Instagram Gallery

# Introduction

This code will help you to add an image gallery with your Instagram feed in Clickfunnels.

## Instructions

Join my Facebook group at https://www.facebook.com/groups/987727134699631 and once I approve you you can see the tutorial here: https://www.facebook.com/groups/987727134699631/permalink/1058199830985694/

03-cf-instagram-gallery.html

<!--
 
1) DOWNLOAD THE INSTAFEED PLUGIN HERE: http://instafeedjs.com
2) GENERATE YOUR INSTAGRAM CLIENT ID HERE: https://www.instagram.com/developer/
3) CREATE YOUR INSTAGRAM ACCESS TOKEN HERE: http://instagram.pixelunion.net
4) FIND YOUR INSTAGRAM USER ID HERE: https://codeofaninja.com/tools/find-instagram-user-id
 
-->
 
 
<!-- FIRST PART, THIS GOES IN "SETTINGS > CUSTOM CSS" -->

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css');
 
/**
 * PHOTO GRID
 */
.grid-item {
    width: 100%;
    margin-bottom: 10px;
}
 
.grid-item img {
    width: 100%;
}
 
.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);
    }
}
</style>
 
 
<!-- SECOND PART, THIS GOES IN "TRACKING CODE > FOOTER" -->
 
 
<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 src="https://d2saw6je89goi1.cloudfront.net/uploads/digital_asset/file/368313/instafeed.min.js"></script>
 
<script>
var $masonryContainer = $('[data-title~=masonry-row] .col-inner');
$masonryContainer.attr('id', 'instagram-masonry');
 
/**
 * Loading images form IG
 */
var myFeed = new Instafeed({
    target: 'instagram-masonry',
    get: 'user',
    userId: '1587960585',
    clientId: '3b45efe7312944148fc17c27696fbba5',
    accessToken: '1587960585.1677ed0.d9ee935aaa7d4ab8becbe5080e46df0a',
    template: '<div><img src="{{image}}" /></div>',
    resolution: 'standard_resolution',
    after: makeThemLookGood
});
 
myFeed.run();
 
 
/**
 * Making the images look nice
 */
function makeThemLookGood() {
    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();
            });
        }
 
        /**
        * Slideshow functionality
        */
        var currentImgSrc = null;
        $('.grid img').each(function() {
            currentImgSrc = $(this).attr('src');
            $(this).wrap('<a href="' + currentImgSrc + '" data-lightbox="masonry" class="masonry-link"></a>');
        });
    }
}
</script>

Thanks