Swipebox

下载地址:http://brutaldesign.github.io/swipebox/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>Demo</title>

  <link rel="stylesheet" href="css/swipebox.min.css"/>

  <script src="jslib/jquery-1.9.0.js"></script>
  <script src="jslib/jquery.swipebox.min.js"></script>

  <style type="text/css">
      div{font-size:0;
        width:500px;
        height:500px;
        display:inline-block;
      }

      div img{
          height:50%;
          width:50%;
      }
  </style>

</head>

<body>

  <div> 
    <a rel="gallery-1" href="images/image-1.jpg" class="swipebox" title="image-1">
        <img src="images/image-1.jpg" alt="image">
    </a>
    <a rel="gallery-1" href="images/image-2.jpg" class="swipebox" title="image-2">
        <img src="images/image-2.jpg" alt="image">
    </a>
    <!-- Gallery 2 -->
    <a rel="gallery-1" href="images/image-3.jpg" class="swipebox" title="image-3">
        <img src="images/image-3.jpg" alt="image">
    </a>
    <a rel="gallery-1" href="images/image-4.jpg" class="swipebox" title="image-4">
        <img src="images/image-4.jpg" alt="image">
    </a>
  </div>
    <script type="text/javascript">
        $(‘.swipebox‘ ).swipebox();
    </script>
</body>
</html>
时间: 2024-08-10 06:29:15

Swipebox的相关文章

推荐两款简单好用的图片放大jquery插件

一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可js里加入 调用插件的函数 $('这里写要放大的图片').zoomify();如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数. 二.zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站.这个图片方法不是 单独图片跳脱出来的放

移动端框架篇-控制父容器的滑屏框架-slip.js

设计滑屏框架的办法一般有2种 控制父容器法 控制子容器法 这个算是控制父容器法 通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的取值为当前页面高度~ 这里采用slip框架,库大小5.75K,非常轻量,可以放心用在你的项目~ slip框架的页面样式需要自定义,不过这里我简单写好了~ (如果你不使用框架,推荐用transform: translate(X,Y)的写法,首先transform: translate可设计高性能动画,

1.图片-相册

? baguetteBox    Simple and easy to use lightbox script written in pure JavaScript https://feimosi.github.io/baguetteBox.js/ Cloud Zoom    a super-smooth, touch-enabled jQuery image zoom plugin used on many high profile retail sites 官网:http://www.sta

Html5添加支持桌面、移动触摸手机和平板电脑的Lightbox插件教程

一.使用方法 首先在<body>标签之前或<header>标签中引入jquery和swipebox js文件. <script src="lib/jquery-2.0.3.js"></script> <script src="src/js/jquery.swipebox.js"></script> 在<header>标签中引入swipebox.css文件. <link rel=

10款响应式 jQuery实现图片效果插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

JavaScript资源大全中文版(Awesome最新版)

JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC框架与库 Package Managers Loaders Bundlers Testing Frameworks QA Tools QA工具 Node-Powered CMS Frameworks 节点供电的CMS框架 Templating Engines 模板发动机 Articles and Posts 文章和帖子 Data Visualization 数据可视化 Timeline 时间线 Spreadsheet 电

前端插件库【原】 2016-08-21

自己整理的一些质量还可以的前端插件,各种分类的都有,工作中需要用到插件时可以在下面的列表中查找. 1.幻灯片 Camera    a free jQuery slideshow by Pixedelic http://www.pixedelic.com/plugins/camera/ FlexSlider2    An awesome, fully responsive jQuery slider toolkit http://flexslider.woothemes.com/ Flickity

【原】移动web滑屏框架分享

本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成任务的想法可能会比较多,而想做得更好,需不惜花费时间精力,孜孜不倦,反复改进产品,把99%提高到99.99%,实在是不容易,那么专业,敬业也是少不了的~ 这里也是给自己做个提醒,保持做事的热情和激情,哪怕以后产品发展得不好,对提升自身能力还是很有帮助~ 进入主题,现在很流行在H5页面滑屏的效果,特别

20款美化网站的 jQuery Lightbox 灯箱插件

jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力. 因此在这个集合中,我们编译了20款最好的 jQuery 灯箱插件清单,这将有助于开发人员创建和设计精美的网站.您可以将这些插件很容易地集成到您的网站,可以下载他们瞬间充实你的插件库. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载]