激情综合色五月六月婷婷,久久久久久综合网天天,国产精品久久久久精品综合紧无码

  • 2022-10-28
宇哥博客 前端開發 WordPress文章頁圖片點擊放大效果,純代碼實現,非插件

WordPress文章頁圖片點擊放大效果,純代碼實現,非插件

先看效果:

電腦端
手機端

點擊左右箭頭(也可拖拽滑動)切換文章內容的所有圖片。

代碼

在 header.php文件中添加以下代碼:

<link rel='stylesheet' href='//cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.css?ver=202205' type='text/css' />

在 footer.php 文件中添加以下代碼:

<script type='text/javascript' src='//cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.js?ver=202205'></script>

可以加上is_single()標簽,限制只在文章頁才引入。

在 functions.php 添加以下代碼:

add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

更多

Fancybox是一款基于jquery開發的類Lightbox插件。支持對放大的圖片添加陰影效果,對于一組相關的圖片添加導航操作按紐。

GitHub地址:https://github.com/fancyapps/fancybox(V3)

fancyapps:https://fancyapps.com/docs/ui/fancybox (V4)

FANCYBOX CDNs:https://www.cdnpkg.com/fancybox?id=35159

以上基于3.5.7版本。

以上代碼部分來自:http://www.manongjc.com/detail/21-axgvunqexqzrngf.html

本文來自網絡,不代表本站立場,轉載請注明出處。http://www.callingbugs.com/2450.html

發表評論

您的電子郵箱地址不會被公開。

返回頂部
激情综合色五月六月婷婷,久久久久久综合网天天,国产精品久久久久精品综合紧无码