weui/src/example/gallery/gallery.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Gallery</h1>
        <p class="page__desc">画廊，可实现上传图片的展示或幻灯片播放</p>
    </div>
    <div style="display: none;" role="dialog" aria-labelledby="galleryImg" aria-hidden="true" aria-modal="true" class="weui-gallery" id="gallery">
        <span id="galleryImg" alt="图片详情" role="img" class="weui-gallery__img" style="background-image: url(./images/pic_article.png);"></span>
        <div class="weui-gallery__opr">
            <a role="button" aria-label="删除" href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
</div>
<script>
    $(function(){
      $gallery = $("#gallery");
      $galleryImg = $("#galleryImg");
      $gallery.attr('aria-hidden','false');
      $gallery.fadeIn(100);
      setTimeout(function(){
        $galleryImg.attr("tabindex", '-1').trigger('focus');
      },200);
    })
</script>