swiper写的图片点击放大,如何进行修改!请帮忙

这个图片放大是用swiper写的。有一个地方不知道怎么修改?请大神指点


$(document).on('click', '.viewpic', function() {
    SMS.setfun("SMS.closepic()");
    var src = $(this).attr("src"),thumb = $(this).attr("thumb"),swiper = $(this).attr("swiper");

    if(!SMS.empty(swiper)){
        var swipers=$('.currentbody .swiper p').children('img');
        var html='<div class="weui-gallery" id="gallery" style="display: block; opacity: 1;">';
            html += '<div class="weui-gallery__img"><div class="viewpic_swiper"><div class="swiper-wrapper">';
                for(var i=0;i<swipers.length;i++){
                    var path=$(swipers[i]).attr('data-original')?$(swipers[i]).attr('data-original'):swipers[i]['src'];
                    if($(swipers[i]).attr('thumb')){
                        var src=path.replace(thumb+'.jpg','');
                    }else{
                        var src=path;
                    }
                    html += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="'+src+'"/></div></div>';
            }
            html += '</div><div class="swiper-pagination"></div></div></div><div class="weui-gallery__opr"><a href="javascript:" class="icon icon-close c3"></a></div></div>';
        $('body').append(html);
        var script='var showpics = new Swiper(\'.viewpic_swiper\', {zoom: true,initialSlide :'+swiper+',pagination: \'.viewpic_swiper .swiper-pagination \',paginationType: \'fraction\',spaceBetween: 20});';
        eval(script);
    }else{
        if(thumb){
            var src=src.replace('_'+thumb+'.jpg','');
        }        
        var html='<div class="weui-gallery" id="gallery" style="display: block; opacity: 1;">';
                html += '<div class="weui-gallery__img" id="galleryImg"><div class="galleryimg"><img src="'+src+'"></div></div>';
                html += '<div class="weui-gallery__opr"><a href="javascript:" class="icon icon-close c3"></a></div></div>';
    
        $('body').append(html);
    }
    $('.weui-gallery__img').off().on('click', function() {SMS.closepic();});        
    $('.weui-gallery__opr a').off().on('click', function() {SMS.closepic();});    

});

HTML中的代码写法?

<div class="swiper">
        <p><img src="ui/sl.png" data-original="/DDBF04E9B03F1F162B2B383A1B73083B.jpeg" class="viewpic lazyload" thumb=".thumb" swiper="0"></p>
              <p><img src="ui/sl.png" data-original="/A116F86225046DB4BE8B5AA98FF1E947.jpeg" class="viewpic lazyload" thumb=".thumb" swiper="1"></p>
        </div>

必须带swiper="0",swiper="1",点击图片才能放大可以切换。

那么如果修改单图点击放大,不需要swiper="1" 这个标记

又如何删除这一段呢,只保留上面一段。

else{
        if(thumb){
            var src=src.replace('_'+thumb+'.jpg','');
        }        
        var html='<div class="weui-gallery" id="gallery" style="display: block; opacity: 1;">';
                html += '<div class="weui-gallery__img" id="galleryImg"><div class="galleryimg"><img src="'+src+'"></div></div>';
                html += '<div class="weui-gallery__opr"><a href="javascript:" class="icon icon-close c3"></a></div></div>';
    
        $('body').append(html);
    }
阅读 3.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题