手机页面，点击某缩略图，在弹出层看大图，并能左右切换看图

头部需加载的：

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/TouchSlide.1.0.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>

html代码：

<div class="tip_boxs" id="tip_boxs" style="display:none;">
    <div class="align">
        <div id="slideBoxindexb">
            <div class="bd">
                <ul class="clearfix">
                    <li><img src="images/list_01.jpg" /></li>
                    <li><img src="images/list_02.jpg" /></li>
                    <li><img src="images/list_03.jpg" /></li>
                </ul>
            </div>
            <div class="hd">
                <span class="prev"></span>
                <span class="next"></span>
            </div>
        </div>
        <div class="pop_con close">
            <p class="time">2014-10-06</p>
            <h5>餐桌上的创意美学</h5>
            <p>Audi City Beijing是亚洲首家数字化奥迪展厅，坐落于市中心东方广场。Audi City Beijing是奥迪品牌为粉丝们创造的一个可以相识交流的奇幻场所，同时，Audi City Beijing为人们提供了一个与品牌交流对话的空间,让奥迪与城市生活更加紧密地联系在一起。</p>
        </div>
    </div>  
</div>

css 样式：

/*弹框*/
.tip_boxs{z-index:9999; width:80%; position:relative;left:10%;display:none;height:100%;display:-webkit-box; -webkit-box-pack: center;-webkit-box-align: center; text-align:center; margin:0 auto; }
.tip_boxs .align{border-radius: 10px;overflow:hidden;width:100%;background: #fff;}
.tip_boxs_zhezhao{ background:#000; opacity:0.8; z-index:8888; display:none; position:fixed; top:0; left:0;}
#slideBoxindexb{ position:relative; width:100%; overflow:hidden; margin:0 auto;}
#slideBoxindexb .bd{ position:relative; z-index:0; width:100%;}
#slideBoxindexb .bd .tempWrap{width:100%;}
#slideBoxindexb .bd li{ position:relative;float:left;}
#slideBoxindexb .bd li{display: block;width:100%;display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
#slideBoxindexb .bd li img{display: block;width:100%;border-top-left-radius: 10px;border-top-right-radius: 10px;}
#slideBoxindexb .prev,#slideBoxindexb .next{cursor:pointer; position:absolute;top:50%;margin-top:-16px;display:block; width:30px; height:32px;background: url(../images/prev_next_bg.png) no-repeat; }
#slideBoxindexb .prev{left:5px;}
#slideBoxindexb .next{right:5px;background-position: -30px 0;}
.tip_boxs .pop_con{width:100%;padding:10px;box-sizing:border-box;background: #fff;font-size: 12px;color:#060505;text-align: left;}
.tip_boxs .pop_con p{text-indent: 2em;line-height: 26px;}
.tip_boxs .pop_con p.time{color:#000;text-indent:0;}
.tip_boxs .pop_con h5{font-size: 14px;font-weight: bold;}

jquery代码：

<script type="text/javascript">
$(function(){
    $(".content_02 .list_item li").on('click',function(){ 
        popup($(".tip_boxs"));  
         TouchSlide({
        slideCell: "#slideBoxindexb",
        autoPlay:false,
        mainCell: ".bd ul",
        effect: "leftLoop"
    });
    })
})
</script>

实现效果图为：

注：其中TouchSlide.1.0.js为弹出层中图片预览左右滑动效果；
popup.js为弹框