1,在织梦的 include/common.func.php 文件最后尾 添加 循环输出图集全部图片 的方法 Getimgs() 如下:
//循环输出图集全部图片及注释 function Getimgs($aid, $imgwith, $imgheight, $num){ global $dsql; $imgurls = ''; $row = $dsql -> getone("Select * From`yf_addonimages` where aid='$aid'"); $imgurls = $row['imgurls']; preg_match_all("/{dede:img (.*)}(.*){\/dede:img/isU", $imgurls, $wordcount); $textinfo = $wordcount[1]; $count = count($wordcount[2]); if ($num > $count || $num == 0){$num = $count;} for($i = 0;$i < $num;$i++){ $textinfoe = $textinfo[$i]; $textinfoee = explode(" ",$textinfoe); $imglist .="<div class=\"swiper-slide\"><img src='".trim($wordcount[2][$i])."' width='".$imgwith."' height='".$imgheight."'></div>"; } return $imglist; }
2,在列表页 list_article.htm 模板上 用 [field:id function="Getimgs(@me,688,473,10)"/] 调用 如下:
1 {dede:list pagesize ='18'} 2 <li class=""> 3 <a href="javascript:;" target="_self" style="text-align:center;"> 4 <img src="[field:litpic/]"> 5 <p>[field:title/]</p> 6 </a> 7 <div class="ht" style="display:none;">[field:id function="Getimgs(@me,688,473,10)"/]</div> 8 <div class="tit" style="display:none;">[field:title/]</div> 9 10 </li> 11 12 13 {/dede:list}
3,swiper的轮播插件 要动态获取 $('.ht') 所包含的图片资源做轮播图,直接用click事件来做就行,这里不细讲。这里要讲的是swiper动态获取的图片轮播 时 总会无法正常轮播或正常 展示,这是因为swiper的js函数通常是在页面加载时就加载并渲染环境,所以 会导致动态获取的图片无法正常渲染和轮播展示。解决办法是,在动态获取完图片的js或ajax后重新加载swiper的js函数,如下:
1 $('.go_article li a').click(function () { 2 var imgs = $(this).next('.ht').html(); 3 var tit = $(this).next('.ht').next('.tit').html(); 4 5 $('.swiper-container1 .swiper-wrapper').html(imgs);//动态加载图片资源 6 7 //swiper 图片资源改变后才加载swiper函数开始渲染-------- 8 var swiper = new Swiper('.swiper-container1', { 9 slidesPerView: 1, 10 spaceBetween: 30, 11 loop: true, 12 pagination: { 13 el: '.swiper-pagination', 14 clickable: true, 15 }, 16 navigation: { 17 nextEl: '.swiper-button-next', 18 prevEl: '.swiper-button-prev', 19 }, 20 }); 21 //-------------------------------------------------------------------------------- 22 23 $('#htgg').show(); 24 $('#hbgg').css("height","473"); 25 26 })
END