当前位置：首页 > 特效 > 图片代码 > 全屏照片展示画廊Jquery插件

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

全屏照片展示画廊Jquery插件,引入JS 同时在图片中添加class名子 fs-gal 即可...

 下载资源  浏览效果  找支持帮忙

 浏览次数：886次  文件大小：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>