这里所说的不是遍历文章内容里的图片地址来获取所有图片,而且获取上传到当前文章的媒体库的所有图片,因为有时候我们回去单独做一个相册,而文章内容里的图片可能有其他不相干的图片存在,所有获取上传到当前文章的媒体库图片是最合适的。
下面的代码是通过获取所有图片来弄一个类似淘宝产品图切换的效果,swiper版本是4.5。
function MBThemes_thumbnail_gallery(){ global $post; $attachments = get_posts(array( 'post_type' => 'attachment', 'posts_per_page' => 6, 'post_status' => 'any', 'post_parent' => $post->ID )); if ($attachments){ $count = count($attachments); if($count){ ?> <link rel="stylesheet" href="https://www.mobantu.com/<?php bloginfo('template_url');?>/static/css/swiper.min.css"> <div class="swiper-container gallery-top" id="gallery-top<?php echo $post->ID;?>"> <div class="swiper-wrapper"> <?php foreach ($attachments as $attachment){ echo '<div class="swiper-slide"><img src="https://www.mobantu.com/7875.html'.wp_get_attachment_url($attachment->ID).'"></div>'; } ?> </div> </div> <div class="swiper-container gallery-thumbs" id="gallery-thumbs<?php echo $post->ID;?>"> <div class="swiper-wrapper"> <?php foreach ($attachments as $attachment){ echo '<div class="swiper-slide"><img src="https://www.mobantu.com/7875.html'.wp_get_attachment_url($attachment->ID).'"></div>'; } ?> </div> </div> <script src="https://www.mobantu.com/<?php bloginfo('template_url');?>/static/js/swiper.min.js"></script> <script> var galleryThumbs = new Swiper('#gallery-thumbs<?php echo $post->ID;?>', { spaceBetween: 10, slidesPerView: <?php echo ($count>6)?$count:6;?>, freeMode: true, autoHeight: true, watchSlidesVisibility: true, watchSlidesProgress: true, }); var galleryTop = new Swiper('#gallery-top<?php echo $post->ID;?>', { spaceBetween: 10, thumbs: { swiper: galleryThumbs } }); </script> <?php } } }
原文链接:https://www.dqzy.cn/2025/04/28/499.html,转载请注明出处。
1、本站所有源码资源(包括源代码、软件、学习资料等)仅供研究学习以及参考等合法使用,请勿用于商业用途以及违法使用。如本站不慎侵犯您的版权请联系我们,我们将及时处理,并撤下相关内容!
2、访问本站的用户必须明白,本站对所提供下载的软件和程序代码不拥有任何权利,其版权归该软件和程序代码的合法拥有者所有,请用户在下载使用前必须详细阅读并遵守软件作者的“使用许可协议”,本站仅仅是一个学习交流的平台。
3、如下载的压缩包需要解压密码,若无特殊说明,那么文件的解压密码则为:www.dqzy.cn。
4、点启资源网是一个免费且专业分享网站源码、图片素材、特效代码、教程文章、站长工具的平台。我们努力给站长提供好的资源!
评论0