Posts

Showing posts from April, 2019

slider with masonry effect

screenshot -  https://prnt.sc/nip75x custom module -  https://prnt.sc/nip7hj demo -  http://huronassociates-5576036.hs-sites.com/  ,  http://huronassociates.com/ HTML ===================================================== <div class="custom-service-offerings">   <div class="page-center">     <h3 class="vc_custom_heading">{{ module.heading }}</h3>     <div class="service-offerings-wrapper">       <div class="tg-filters-holder">         <div class="tg-filter tg-filter-active" data-filter="*">           <span class="tg-filter-name tg-nav-color tg-nav-font">All</span>         </div>         {% for item in module.item %}         {% for item2 in item.category_item %}         <div class="tg-filter" data-taxo="post_tag" data-filter=".{{ item2.category|replace(' ','_')|lower|replace('/',

Hover slider

custom module -  https://prnt.sc/nip624 output -  https://prnt.sc/nip6cn demo -  http://huronassociates-5576036.hs-sites.com/  ,  http://huronassociates.com/ HTML ============== <div class="cycle-slider-wrapper {{ module.content_size }}">   <h2 style="text-align: center" class="cycle-slider-heading">{{ module.heading }}</h2>   <div class="cycle-slider-box loop_{{ module.item|length }}">     {% for item in module.item %}     <div class="cycle-slider-box-item item_{{ loop.index }}">       <div class="icon-wrapper">         <div class="mpc-icon-wrap">           <i class="mpc-icon-part mpc-regular mpc-transition  etl etl-{{ item.icon_name }}"></i>         </div>       </div>       <div class="content-wrapper">         <div class="content-wrapper-inner">           <h3 class="content-headi

Instagram Feeds - by yogesh

<section class="content-instagram-feed">  <div class="col-wrapper clearfix">    <div class="instafeed-items" data-token=" 7371049852.1677ed0.dba3180e29b848f1b665fbe1902c3a53 "></div>  </div> </section> <script src=" https://cdn2.hubspot.net/hubfs/5490511/Cyclerun_Fitness_April2019%20Theme/Javascript/instafeed.min.js "></script> <script> function getIntaFeedToken(elem, id, token) { var feed = new Instafeed({ get: 'user', target: elem.toString(), userId: id.toString(), accessToken: token.toString(),    resolution: 'low_resolution',    limit: 8 });   feed.run(); }  jQuery(document).ready(function($) { $(".content-instagram-feed").each(function(){ var o = $(this); if (o.hasClass("init")) {    return; } o.addClass("init"); var headerId = "id-" + Math.random().toString().slice(2); o.find('.instafeed-items').attr("id"

SQS Parallax banner

demo - http://5490511.hs-sites.com/free-consultation https://www.cyclerun.com/free-consultation ======================================================== HTML ======================================================== {% if module.banner_title or module.banner_image.src %} <div class="custom-banner-area title-{{ module.title_size }}">   <div class="banner-bg" style="background-image:url({{ module.banner_image.src }});">   </div>   <div class="page-center">     <div class="inner-group">       {% if module.banner_title %}       <h1 class="title">         {{ module.banner_title }}       </h1>       {% endif %}     </div>   </div> </div> {% endif %} ======================================================== CSS ======================================================== .custom-banner-area {   overflow: hidden;   position: relative; } .custom-banner

jump to specific slide in slick

When data fetch from other custom module =========== <div class="hs-section bios-next-profiles case-studies-next carousel-block light-grey-background hs-work-pagination-wrapper hs-what-next-pagination">   <div class="page-center container">     {% if module.heading %}     <div class="hs-row text-center">       <h3>{{ module.heading }}</h3>     </div>     {% endif %}     <div class="hs-row">       <div class="hs-col-md-10 hs-col-md-offset-1">         <div class="owl-carousel next-items-carousel hidden-sm-down">           {% set my_page = page_by_id(module.select_page) %}           {% for item1 in my_page.widget_containers %}           {% for item2 in item1.widgets %}           {% if item2.body.widget_name == "Featured Content Group - Lane_Terralever_April2019" %}           {% for item in item2.body.items %}           {% set current = content.a