How to use hexo to pop up a picture

Question

I changed the hexo (landscape theme) sharing button, the following is the code. (HEXO\themes\landscape\layout_partial\article.ejs)

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
  <div class="article-meta">
    <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
    <%- partial('post/category') %>
  </div>
  <div class="article-inner">
    <%- partial('post/gallery') %>
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
      </header>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link){ %>
          <p class="article-more-link">
            <a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
          </p>
        <% } %>
      <% } else { %>
        <!-- table of content -->
        <% if (post.toc == true){ %>
          <div id="toc" class="toc-article">
            <div class="toc-title">目录</div>
            <%- toc(page.content, {class: 'post-toc', list_number: false}) %>
          </div>
        <% } %>
        <%- post.content %>
      <% } %>
    </div>
    <footer class="article-footer">
      <!--
      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
      -->

      <div style="float: right">
        <a title="分享到新浪微博" class="article-share-weibo" target="_blank" href="http://service.weibo.com/share/share.php?url=<%- post.permalink %>"></a>
        <a title="分享到 QQ 空间" class="article-share-qq" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%- post.permalink %>"></a>
        <a title="分享到微信" class="article-share-wechat" href="javascript:void(0)" onclick="window.open('http://s.jiathis.com/qrcode.php?url=<%- post.permalink %>','QRCODE','width=200,height=200,directories=0,location=0,toolbar=0,menubar=0,resizable=0,status=0,scrollbars=0,titlebar=0');return false;"></a>
      </div>

      <% if (post.comments && config.disqus_shortname){ %>
        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
      <% } %>
      <%- partial('post/tag') %>

    </footer>
  </div>
  <% if (!index){ %>
    <%- partial('post/nav') %>
  <% } %>
</article>

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
</section>
<% } %>

Click on the third button will pop up a two-dimensional code picture (two-dimensional code picture is generated online), as below. You can also see the effect on the site. I would like to use fancybox pop up that picture, as below, how to do? I am not good at web development and receive all the better ways.

Answer 1

The only thing you need to do is to add the class fancybox to your anchor and replace the value of the href attribute with the URL of the QRCode image (currently in the window.open function) like:

<a class="fancybox article-share-wechat" 
   href="http://s.jiathis.com/qrcode.php?url=https://knightmobile.github.io/2017-07-25/bing-included/','QRCODE','width=200,height=200,directories=0,location=0,toolbar=0,menubar=0,resizable=0,status=0,scrollbars=0,titlebar=0">
</a>

Then, bind that class to fancybox in your jQuery code like:

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        type: 'image'
    }); // fancybox
}); // ready

See a DEMO using fancybox v2.1.5

You may eventually want to use fancybox v3, see DEMO too

NOTE: I am using the rendered html on both demos. You may need to tweak your code to reflect the proper class and href

Of course, you need to include in your page the proper JS and CSS fancybox files of the version you are using. Please refer to the plugin documentation