[WordPress theme modification] Add Fancybox light box effect to 7b2 and other theme article pages - support amplification, automatic play, etc

Introduction to Fancybox

Fancybox is a dependency on JQuery JavaScript library for rendering images, videos and any HTML content in an elegant way. It has all the features you want – touch enabled, responsive and fully customizable.

rely on

• JQuery 3+is the first choice, but the fancyBox is applicable to jQuery 1.9.1+and jQuery 2+（ 7b2 Theme It's useless JQuery Of)

compatibility

• FancyBox includes support for touch gestures, and even supports zoom gestures. It is ideal for mobile phones and desktop browsers.

characteristic

• Move First: Each device looks good; Support the most common touch gestures - double click, pinching and pinching image browsing; Navigate by sliding horizontally.
• Multiple instances: It can open one mode while the other is still visible.
• Quick and easy installation: In two files, there is no need to write a line of JavaScript code.
• Automatic content recognition: Support the most popular websites such as YouTube, Vimeo and Google Maps.
• GPU  Acceleration: Hardware accelerated animation has better performance.
• Response: If any CSS unit is set, the browser will complete the remaining content dimensions; All graphics, including loading icons, are created only with CSS.

fancybox Official Introduction Tutorial

1. Add jQuery and fancyBox files

 <!--  Load jQuery --> < script  src = " https://code.jquery.com/jquery-3.3.1.min.js " ></ script > <!--  Load FancyBox --> < link   href = " /path/to/jquery. fancybox .min.css "  rel = " stylesheet " > < script  src = " /path/to/jquery. fancybox .min.js " ></ script >

2. Create a picture link and add data to the picture link- fancybox attribute

 < a  data- fancybox = " gallery "  href = " big_1.jpg " > < img  src = " small_1.jpg " > </ a > < a  data-fancybox = " gallery "  href = " big_2.jpg " > < img  src = " small_2.jpg " > </ a >

WordPress modification method

• This method applies to most topics~

Add picture links in the article page data-fancybox Attributes can be added automatically using functions. You only need to add the following code to the functions.php File Last ?> Just in front of. (This code will automatically identify the pictures in the article and automatically add data-fancybox Attribute)

 /* ================================================== Fancybox picture light box effect 22:35:05, September 18, 2019 ================================================== */ add_filter('the_content', 'fancybox1'); add_filter('the_content', 'fancybox2'); function fancybox1($content){  global $post; $pattern = "/<img(.*?)src=('|\")([^>]*). (bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>'; $content = preg_replace($pattern, $replacement, $content); return $content; } function fancybox2($content){  global $post; $pattern = "/<a(.*?)href=('|\")([^>]*). (bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'; $content = preg_replace($pattern, $replacement, $content); return $content; }

Next, we will introduce two files: jquery.fancybox.min.css and jquery.fancybox.min.js（ 7b2 JQuery also needs to be introduced)

 <!--  It is recommended to use the cdn link because it is faster 233 --> <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css " /> <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js "></script> <!-- 7b2 Please introduce the following JQuery (Others without JQuery The same is true for the theme of 7b2 The vue used is special - _ -) --> <script type="text/javascript" src=" https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js "></script>

The blogger also found the plug-in officially, but did not test it. If you can try not to bother, you can try not to bother

Plug in address: https://cn.wordpress.org/plugins/w3dev-fancybox/

Effect display