jquery - How to use hexo to pop up a picture -
i changed hexo (landscape theme) sharing button, following 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 view <a href="//disqus.com/?ref_noscript">comments powered disqus.</a></noscript> </div> </section> <% } %> click on third button pop two-dimensional code picture (two-dimensional code picture generated online), below. can see effect on site. 
use fancybox pop picture, below, how do? not @ web development , receive better ways. 
the thing need add class fancybox anchor , replace value of href attribute url of qrcode image (currently in 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 class fancybox in jquery code like:
jquery(document).ready(function ($) { $(".fancybox").fancybox({ // api options type: 'image' }); // fancybox }); // ready see demo using fancybox v2.1.5
you may want use fancybox v3, see demo too
note: using rendered html on both demos. may need tweak code reflect proper class , href
of course, need include in page proper js , css fancybox files of version using. please refer plugin documentation
Comments
Post a Comment