layerphotos.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>H+ 后台主题UI框架 - layer相册</title>
  7. <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  8. <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">
  9. <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
  10. <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  11. <link href="../css/animate.min.css" rel="stylesheet">
  12. <link href="../css/style.min.css?v=4.0.0" rel="stylesheet">
  13. <style>
  14. .layer-photos-demo img {
  15. width: 200px;
  16. margin-bottom: 5px;
  17. }
  18. </style>
  19. </head>
  20. <body class="gray-bg">
  21. <div class="wrapper wrapper-content">
  22. <div class="row">
  23. <div class="col-sm-12">
  24. <div class="ibox float-e-margins">
  25. <div class="ibox-title">
  26. <h5>layer相册</h5>
  27. <div class="ibox-tools">
  28. <a class="collapse-link">
  29. <i class="fa fa-chevron-up"></i>
  30. </a>
  31. <a class="dropdown-toggle" data-toggle="dropdown" href="basic_gallery.html#">
  32. <i class="fa fa-wrench"></i>
  33. </a>
  34. <ul class="dropdown-menu dropdown-user">
  35. <li><a href="basic_gallery.html#">选项1</a>
  36. </li>
  37. <li><a href="basic_gallery.html#">选项2</a>
  38. </li>
  39. </ul>
  40. <a class="close-link">
  41. <i class="fa fa-times"></i>
  42. </a>
  43. </div>
  44. </div>
  45. <div class="ibox-content layer-photos-demo" id="layer-photos-demo">
  46. <a href="#" title="图片1">
  47. <img alt="image" src="../img/p1.jpg" />
  48. </a>
  49. <a href="#" title="图片2">
  50. <img alt="image" src="../img/p2.jpg" />
  51. </a>
  52. <a href="#" title="图片3">
  53. <img alt="image" src="../img/p3.jpg" />
  54. </a>
  55. <a href="#" title="图片4">
  56. <img alt="image" src="../img/p1.jpg" />
  57. </a>
  58. <a href="#" title="图片5">
  59. <img alt="image" src="../img/p1.jpg" />
  60. </a>
  61. <a href="#" title="图片6">
  62. <img alt="image" src="../img/p2.jpg" />
  63. </a>
  64. <a href="#" title="图片7">
  65. <img alt="image" src="../img/p3.jpg" />
  66. </a>
  67. <a href="#" title="图片8">
  68. <img alt="image" src="../img/p2.jpg" />
  69. </a>
  70. <a href="#" title="图片9">
  71. <img alt="image" src="../img/p1.jpg" />
  72. </a>
  73. <a href="#" title="图片10">
  74. <img alt="image" src="../img/p2.jpg" />
  75. </a>
  76. <a href="#" title="图片11">
  77. <img alt="image" src="../img/p3.jpg" />
  78. </a>
  79. <a href="#" title="图片12">
  80. <img alt="image" src="../img/p1.jpg" />
  81. </a>
  82. <a href="#" title="图片13">
  83. <img alt="image" src="../img/p1.jpg" />
  84. </a>
  85. <a href="#" title="图片14">
  86. <img alt="image" src="../img/p2.jpg" />
  87. </a>
  88. <a href="#" title="图片15">
  89. <img alt="image" src="../img/p3.jpg" />
  90. </a>
  91. <a href="#" title="图片16">
  92. <img alt="image" src="../img/p2.jpg" />
  93. </a>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <script src="../js/jquery.min.js?v=2.1.4"></script>
  100. <script src="../js/bootstrap.min.js?v=3.3.5"></script>
  101. <script src="../js/plugins/layer/layer.min.js"></script>
  102. <script src="../js/content.min.js?v=1.0.0"></script>
  103. <script>
  104. layer.config({extend:["extend/layer.ext.js","skin/moon/style.css"],skin:"layer-ext-moon"});$(function(){layer.ready(function(){player.photos({photos:"#layer-photos-demo",shade:[0.3,"#293846"]})})});
  105. </script>
  106. </body>
  107. </html>