欢迎访问WDPHP素材源码站!熬夜对身体不好,早点休息吧!
您好,游客 [ 马上登录 | 注册帐号 | QQ登录]
当前位置:首页 > 特效 > 图片代码 > 全屏照片展示画廊Jquery插件

全屏照片展示画廊Jquery插件
栏目分类:图片代码    发布日期:2019-04-19    浏览次数:536次     收藏

全屏照片展示画廊Jquery插件,引入JS 同时在图片中添加class名子 fs-gal 即可...
浏览次数:536 文件大小:18.8MB 下载积分:20积分

调用示例

        <!-- Create objects with class 'fs-gal' and include the attribute 'data-url' with the relative or absolute path which is to be displayed. -->
        <img class="fs-gal" src="img/example/1.jpg" alt="Example Image 1" data-url="img/example/1.jpg" />
        
        <img class="fs-gal" src="img/example/3.jpg" alt="Example Image 3" data-url="img/example/3.jpg" />
		<img class="fs-gal" src="img/example/4.jpg" alt="Example Image 4" data-url="img/example/4.jpg" />
		<img class="fs-gal" src="img/example/5.jpg" alt="Example Image 5" data-url="img/example/5.jpg" />
		
		<img class="fs-gal" src="img/example/7.jpg" alt="Example Image 7" data-url="img/example/7.jpg" />
		<img class="fs-gal" src="img/example/8.jpg" alt="Example Image 8" data-url="img/example/8.jpg" />
		<img class="fs-gal" src="img/example/9.jpg" alt="Example Image 9" data-url="img/example/9.jpg" />
		
		<img class="fs-gal" src="img/example/11.png" alt="Example Image 11" data-url="img/example/11.png" />
		<img class="fs-gal" src="img/example/12.jpg" alt="Example Image 12" data-url="img/example/12.jpg" />
		<img class="fs-gal" src="img/example/13.jpg" alt="Example Image 13" data-url="img/example/13.jpg" />
		<img class="fs-gal" src="img/example/14.jpg" alt="Example Image 14" data-url="img/example/14.jpg" />
		<img class="fs-gal" src="img/example/15.jpg" alt="Example Image 15" data-url="img/example/15.jpg" />
		<img class="fs-gal" src="img/example/16.jpg" alt="Example Image 16" data-url="img/example/16.jpg" />
		<img class="fs-gal" src="img/example/17.jpg" alt="Example Image 17" data-url="img/example/17.jpg" />
		<img class="fs-gal" src="img/example/2.jpg" title="Example Image 2" data-url="img/example/2.jpg" />
		<img class="fs-gal" src="img/example/10.jpg" alt="Example Image 10" data-url="img/example/10.jpg" />
        <!-- Full screen gallery. -->
        <div class="fs-gal-view">
            <h1></h1>
            <img class="fs-gal-prev fs-gal-nav" src="img/prev.svg" alt="Previous picture" title="上一张" />
            <img class="fs-gal-next fs-gal-nav" src="img/next.svg" alt="Next picture" title="下一张" />
            <img class="fs-gal-close" src="img/close.svg" alt="关闭" title="关闭" />
            <img class="fs-gal-main" src="" alt="" />
        </div>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/fs-gal.js"></script>

大图展示

申明:本站代码不提供任何技术服务,仅提供有偿服务。WDPHP素材源码所有资源都经过检测,请放心下载!

声明:本文为原创文章,如需转载,请注明来源 WDPHP.COM 并保留原文链接:http://www.wdphp.com/detail/1735.html
评论1
头像 游客
友情提示:评论成功赠送5积分(每日前3次),刷评论扣8积分!
  • 头像 沙发
    2019年06月24日
    bboynam99
    全屏照片展示画廊Jquery插件
Copyright © 2016-2018 wdphp.com 版权所有   本站由WDPHP网站管理系统强力驱动  陕ICP备16002142号
网站首页 | 交流社区 | 关于我们 | 仿站定制 | 积分获取 | 广告投放 | WPS/云主机 | 站点地图
特效 资源 源码 模板 素材 教程 站长