Add Fancybox in your blog page in shopify

1. Add below js and css in your blog.liquid file:
{{ 'jquery.fancybox.js' | asset_url | script_tag }}
{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
{{ 'jquery.fancybox-thumbs.css' | asset_url | stylesheet_tag }}
{{ 'jquery.fancybox-thumbs.js' | asset_url | script_tag }}

Add script in same file
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
   $('.fancybox').fancybox({
            closeBtn  : true,
            arrows    : true,
            nextClick : true,
          });
});
</script>
2. Blog post page:
<div class="detail_images">
<p>
     <a class="fancybox" href="//cdn.shopify.com/s/files/1/0259/2189/files/9._Hoop_Earrings_large.jpg?v=1491472942">
    <img src="//cdn.shopify.com/s/files/1/0259/2189/files/9._Hoop_Earrings_large.jpg?v=1491472942" alt="Hoop Earrings" />
    </a>
</p>
</div>

Comments

Post a Comment

Popular posts from this blog

Application ld json data in shopify

To implement application/ld json in your shopify theme, add following code into your theme.liquid  file.  {% if template == 'product' %}  <script type="application/ld+json">  {"@context":"https://schema.org", "@type":"Product", "name":"{{ product.title }}", "description":"{{ product.description | strip_html | escape }}", "url":"{{ shop.url | append: '/products/' | append: product.handle }}", "brand": {"@type":"Brand", "name":"{{ product.vendor }}", "image":"{{ product.featured_image.src | img_url: 'master'}}", "url":"{{collection_urls}}"}, {% if product.metafields.yotpo.reviews_count and product.metafields.yotpo.reviews_count != "0" %} "aggregateRating":       {"@type":"AggregateR...
Read more

on_sent_ok not working in Contact Form 7 version 5.0.2

Image
In Contact Form 7, there are several Additional Settings available to add extra functionality to your forms. One of these additional settings was on_sent_ok. But it is not work on version 5.0.2 Instead of this, Using Contact Form 7 Controls  plugin the task becomes fairly simple. Once you install and activate the plugin, a Customize tab will appear in each one of your Contact Form 7 forms. Then all you have to do is simply check the option for Google Analytics at the very bottom. Alternative way to use Global redirect via WordPress functions: This option will utilize a WordPress function which automatically adds the JavaScript into your WordPress footer. Simply open your function.php file then copy and paste the code below.       add_action( 'wp_footer', 'redirect_cf7' );       function redirect_cf7() { ?>       < script type = "text/javascript" >   ...
Read more

Make carousel slider in shopify

1)  In index.liquid file include following code: add css and js files {{ 'slick.css' | asset_url | stylesheet_tag }} {{ 'slick-theme.css' | asset_url | stylesheet_tag }} {{ 'slick.js' | asset_url | script_tag }} add html part of slider <!--slider start--> <div id="slider">  <!-- Wrapper for carousel items --> <div class="home_slider"> <div>           <a href="{{ settings.slide1_url }}" title="{{ settings[alt] | escape }}"> <img src="{{ 'slide1.jpg' | asset_url }}" class="img-responsive" alt="{{shop.name}}" /></a>               </div>             {% for i in (2..10) %}               {% capture show_slide %}slide-{{ i }}-check{% endcapture %}           ...
Read more