这里所说的不是遍历文章内容里的图片地址来获取所有图片，而且获取上传到当前文章的媒体库的所有图片，因为有时候我们回去单独做一个相册，而文章内容里的图片可能有其他不相干的图片存在，所有获取上传到当前文章的媒体库图片是最合适的。
下面的代码是通过获取所有图片来弄一个类似淘宝产品图切换的效果，swiper版本是4.5。
|
1 |
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="<?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="'.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="'.wp_get_attachment_url($attachment->ID).'"></div>'; } ?> </div> </div> <script src="<?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 } } } |
创作不易，用心坚持，请喝一怀爱心咖啡！继续坚持创作~~
