Home Forums Porto Template Instafeed with Load More Button

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 month ago. This post has been viewed 165 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10022815

    dsc81
    Participant

    I finally manage to create instagram feed in carousel as per your instruction.
    By any chance is that possible make instafeed like a page. like make 3×6 picture with a load more button.
    I check the website instafeedjs.com It seems possible. But I don’t know how to put the code.
    If you can help I would be very appreciate it. If not can you put in next update ?
    Thanks a lot


    #10022818

    Support2
    Keymaster
    This reply has been marked as private.
    #10022827

    dsc81
    Participant

    Hi Thank you for all your support I want to share how I finally get this cool features that can have instafeed with load more button from codepen.io <– This was very cool too.
    So to all guys that want to make instafeed with load more button
    just do this
    in your html file inside the section put this code

    <div id="instafeed-gallery-feed" class="gallery row no-gutter">
    </div>
    <button id="btn-instafeed-load" class="btn">Load more</button>

    and add this to your custom.css

    @import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
    body {
      font-family: 'Lato', "Helvetica", Arial, sans-serif;
    }
    
    /* remove bootstrap gutter*/
    .row.no-gutter {
      margin-left: 0;
      margin-right: 0;
    }
    
    .row.no-gutter [class*='col-']:not(:first-child),
    .row.no-gutter [class*='col-']:not(:last-child) {
      padding-right: 0;
      padding-left: 0;
    }
    
    /* the good stuff */
    body {
    }
    
    .img-featured-container {
      overflow: hidden;
      position: relative;
    }
    
    .img-featured-container img {
      width: 100%;
    /*   padding: 10px; */
    }
    
    .img-featured-container .img-backdrop {
      background: linear-gradient(135deg, rgba(38, 163, 255, 0.85), rgba(83, 201, 179, 0.85));
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      opacity: 0;
      transition: all 0.3s ease;
    }
    
    .img-featured-container:hover > .img-backdrop {
      opacity: 1;
    }
    
    /* center text horizontally and vertically on image hover */
    .img-featured-container .description-container {
      color: #fff;
      font-size: 16px;
      line-height: 1.2;
      padding: 0 30px;
      text-align: center;
      line-height: 20px;
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-style: preserve-3d;
      z-index: 2;
      opacity: 0;
      transition: all .2s ease;
    }
    
    .img-featured-container .description-container .fa-instagram {
      font-size: 40px;
    }
    
    .img-featured-container .description-container p {
      font-weight: 300;
      margin-bottom: 0;
    }
    
    .img-featured-container:hover .description-container {
      opacity: 1;
    }
    
    .img-featured-container .description-container .caption {
      display: none;
      margin-bottom: 10px;
    }
    
    .img-featured-container .description-container .likes,
    .img-featured-container .description-container .comments {
      margin: 0 5px;
    }
    
    /* load more button */
    #btn-instafeed-load {
      color: #fff;
      background: #26a3ff;
      font-size: 16px;
      margin: 20px auto;
      padding: 8px 40px;
      display: block;
      border: none;
    }
    
    /* media queries  */
    @media screen and (min-width:768px) {
      .img-featured-container .description-container .caption {
        display: block;
      }
    }

    and this to custom.js
    `var galleryFeed = new Instafeed({
    get: “user”,
    userId: 4622774,
    accessToken: “4622774.7cbaeb5.ec8c5041b92b44ada03e4a4a9153bc54”,
    resolution: “standard_resolution”,
    useHttp: “true”,
    limit: 6,
    template: ‘<div class=”col-xs-12 col-sm-6 col-md-4″><div class=”img-featured-container”><div class=”img-backdrop”></div><div class=”description-container”><p class=”caption”>{{caption}}</p><span class=”likes”><i class=”icon ion-heart”></i> {{likes}}</span><span class=”comments”><i class=”icon ion-chatbubble”></i> {{comments}}</span></div></div></div>’,
    target: “instafeed-gallery-feed”,
    after: function() {
    // disable button if no more results to load
    if (!this.hasNext()) {
    btnInstafeedLoad.setAttribute(‘disabled’, ‘disabled’);
    }
    },
    });
    galleryFeed.run();

    var btnInstafeedLoad = document.getElementById(“btn-instafeed-load”);
    btnInstafeedLoad.addEventListener(“click”, function() {
    galleryFeed.next()
    });’
    And dont forget to change your ID and access token
    Hope this can help
    Cheers


    #10022834

    Support2
    Keymaster

    Hello,

    This is a nice instafeed gallery, thanks for share.

    If you need further assistance, please contact us.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)