| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
- <% String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
- <% String contextPath = request.getContextPath() ;%>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>jQuery lightGallery demo</title>
- <link href="<%=basePath %>/style/lightgallery.css" rel="stylesheet">
- <style type="text/css">
- body{
- background-color: #152836
- }
- .demo-gallery > ul {
- margin-bottom: 0;
- }
- .demo-gallery > ul > li {
- float: left;
- margin-bottom: 15px;
- margin-right: 20px;
- width: 200px;
- }
- .demo-gallery > ul > li a {
- border: 3px solid #FFF;
- border-radius: 3px;
- display: block;
- overflow: hidden;
- position: relative;
- float: left;
- }
- .demo-gallery > ul > li a > img {
- -webkit-transition: -webkit-transform 0.15s ease 0s;
- -moz-transition: -moz-transform 0.15s ease 0s;
- -o-transition: -o-transform 0.15s ease 0s;
- transition: transform 0.15s ease 0s;
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- height: 100%;
- width: 100%;
- }
- .demo-gallery > ul > li a:hover > img {
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
- transform: scale3d(1.1, 1.1, 1.1);
- }
- .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
- opacity: 1;
- }
- .demo-gallery > ul > li a .demo-gallery-poster {
- background-color: rgba(0, 0, 0, 0.1);
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- -webkit-transition: background-color 0.15s ease 0s;
- -o-transition: background-color 0.15s ease 0s;
- transition: background-color 0.15s ease 0s;
- }
- .demo-gallery > ul > li a .demo-gallery-poster > img {
- left: 50%;
- margin-left: -10px;
- margin-top: -10px;
- opacity: 0;
- position: absolute;
- top: 50%;
- -webkit-transition: opacity 0.3s ease 0s;
- -o-transition: opacity 0.3s ease 0s;
- transition: opacity 0.3s ease 0s;
- }
- .demo-gallery > ul > li a:hover .demo-gallery-poster {
- background-color: rgba(0, 0, 0, 0.5);
- }
- .demo-gallery .justified-gallery > a > img {
- -webkit-transition: -webkit-transform 0.15s ease 0s;
- -moz-transition: -moz-transform 0.15s ease 0s;
- -o-transition: -o-transform 0.15s ease 0s;
- transition: transform 0.15s ease 0s;
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- height: 100%;
- width: 100%;
- }
- .demo-gallery .justified-gallery > a:hover > img {
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
- transform: scale3d(1.1, 1.1, 1.1);
- }
- .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
- opacity: 1;
- }
- .demo-gallery .justified-gallery > a .demo-gallery-poster {
- background-color: rgba(0, 0, 0, 0.1);
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- -webkit-transition: background-color 0.15s ease 0s;
- -o-transition: background-color 0.15s ease 0s;
- transition: background-color 0.15s ease 0s;
- }
- .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
- left: 50%;
- margin-left: -10px;
- margin-top: -10px;
- opacity: 0;
- position: absolute;
- top: 50%;
- -webkit-transition: opacity 0.3s ease 0s;
- -o-transition: opacity 0.3s ease 0s;
- transition: opacity 0.3s ease 0s;
- }
- .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
- background-color: rgba(0, 0, 0, 0.5);
- }
- .demo-gallery .video .demo-gallery-poster img {
- height: 48px;
- margin-left: -24px;
- margin-top: -24px;
- opacity: 0.8;
- width: 48px;
- }
- .demo-gallery.dark > ul > li a {
- border: 3px solid #04070a;
- }
- .home .demo-gallery {
- padding-bottom: 80px;
- }
- </style>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- </head>
- <body class="home">
- <div class="demo-gallery">
- <ul id="lightgallery" class="list-unstyled row">
- <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg">
- <a href="">
- <img class="img-responsive" src="img/thumb-1.jpg">
- </a>
- </li>
- <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg">
- <a href="">
- <img class="img-responsive" src="img/thumb-2.jpg">
- </a>
- </li>
- <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800">
- <a href="">
- <img class="img-responsive" src="img/thumb-13.jpg">
- </a>
- </li>
- <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg">
- <a href="">
- <img class="img-responsive" src="img/thumb-4.jpg">
- </a>
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- $(document).ready(function(){
- $('#lightgallery').lightGallery();
- });
- </script>
- <script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
- <script src="<%=basePath %>/js1/lightgallery.js"></script>
- <script src="<%=basePath %>/js1/lg-fullscreen.js"></script>
- <script src="<%=basePath %>/js1/lg-thumbnail.js"></script>
- <script src="<%=basePath %>/js1/lg-video.js"></script>
- <script src="<%=basePath %>/js1/lg-autoplay.js"></script>
- <script src="<%=basePath %>/js1/lg-zoom.js"></script>
- <script src="<%=basePath %>/js1/lg-hash.js"></script>
- <script src="<%=basePath %>/js1/lg-pager.js"></script>
- <!-- <script src="../lib/jquery.mousewheel.min.js"></script> -->
- </body>
- </html>
|
