Swiper中文论坛
标题: swiper zoom 添加新的进去不能放大 [打印本页]
作者: kobe 时间: 2017-3-29 17:24
标题: swiper zoom 添加新的进去不能放大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>证件资料</title>
<link rel="stylesheet" type="text/css" href="../../dist/css/app.min.css"/>
<script src="../../dist/js/flexible.js"></script>
<script src="../../dist/js/flexible_css.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="../../dist/js/app.min.js"></script>
</head>
<body class="accident-container" id="fadan-zhengjianziliao">
<div class="tips">
上传证件资料<span>(用于接单人报价,最多9张图）</span>
</div>
<div class="fadan-img-ul">
<ul id="fadan-img-ul-id">
<li>
<img src="../../dist/img/images/hk2.png" onclick="maxfunction(this)" class="h" />
<i onclick="deletefunction(this)"></i>
<input type="hidden" name="fadanimg1" />
</li>
<li>
<img src="../../dist/img/images/mp_bg1.jpg" onclick="maxfunction(this)" class="h" />
<i onclick="deletefunction(this)"></i>
<input type="hidden" name="fadanimg1" />
</li>
<li class="upimg-but"></li>
</ul>
</div>
<div class="fadan-img-but">
<button id="fadan-img-but-id">提交</button>
</div>
<!-- 照片相册 -->
<div class="xiangce-class" id="xiangche-id">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="../../dist/img/images/hk2.png" class="h" />
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="../../dist/img/images/mp_bg1.jpg" class="h" />
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Navigation -->
</div>
</div>
<!-- 照片相册 end-->
<div class="loading"></div>
<script src="../../dist/js/swiper.min.js"></script>
<script src="../../dist/js/app-util.js"></script>
<script>
var swiperindex=0,
imgmuber=9;
function maxfunction(e){
$("#xiangche-id").removeClass("disnone");
swiperindex=$(e).parents("li").index();
swiper.slideTo(swiperindex, 1000, false);
swiper.progress();
}
function deletefunction(e){
var index=$(e).parents("li").index();
$(e).parents("li").remove();
swiper.removeSlide(index);
swiper.progress();
}
var swiper = new Swiper('.swiper-container', {
zoom: true,
pagination: '.swiper-pagination',
observer:true,
observeParents:true
});
$("#xiangche-id").addClass("disnone");
$(".upimg-but").on("click",function(){
imgmuber=imgmuber-$("#fadan-img-ul-id img").length;
if(imgmuber==0)
{
return false;
}
window.appUtil = createAppUtil({
type: 99,
reqId: 'appUtil',
title: '111',
shareUrl: '111',
content: imgmuber,
imageUrl: '111'
}, myfunction);
appUtil.callApp();
})
var myfunction = function callBackContent(data) {
var context="",
conhtml="";
$(".loading").show();
for(var i = 0; i < data.length; i++){
context += '<li>';
context += '<img src="data:audio/'+data.img+';base64,'+data.url+'" class="h" />'
context += '<i ></i>';
context += '<input type="hidden" name="fadanimg'+i+'" />';
context += '</li>';
conhtml +='<div class="swiper-slide">';
conhtml +='<div class="swiper-zoom-container">';
conhtml +='<img src="data:audio/'+data.img+';base64,'+data.url+'" />';
conhtml +='</div>';
conhtml +='</div>';
}
$("#fadan-img-ul-id .upimg-but").before(context);
$("#xiangche-id .swiper-wrapper").append(conhtml);
var swiper = new Swiper('.swiper-container', {
zoom: true
});
setTimeout("$('.loading').hide()",500);
};
function iosfunction(data) {
if ((typeof data).toLowerCase() == 'string') {
data = JSON.parse(data);
myfunction(data);
}
}
$("#fadan-img-but-id").on("click",function(){
})
</script>
</body>
</html>
作者: admin 时间: 2017-4-1 16:36
update
| 欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) |
Powered by Discuz! X3.2 |