案例取自于GitHub分享的源代码，作者是Tomasz Kalinowski。使用该案例的目的有两个：一个目的是学习他人如何编写脚本代码，获取他人编写脚本代码的经验；另外一个目的是掌握编写HTML5响应式代码的技术和技巧。
1、 页面布局
页面布局比较简单，网页内容主要是标题和一组图片，用户单击图片，可将图片放大浏览。在图片放大浏览页面，用户可以单击图片左右两侧的按钮来切换图片，单击关闭按钮，可以关闭图片放大浏览页面。
显示组图页面和图片放大浏览页面，实际是一个页面，通过JS完成内容的切换。
很重要的一点是，该页面采用了响应式布局，页面会自动匹配不同尺寸的浏览器，在手机端和电脑端浏览网页，都有较好的体验。
2、 项目文件结构
下图是项目文件结构：
项目文件结构由css目录、images目录、js目录和index.html文件构成，css目录存储了网页使用到的样式文件，images目录存储了网页使用到的图片文件，js目录存储了网页使用到的脚本文件。
3、 项目代码
主页代码
<!DOCTYPE html> <html> <head> <title>jQuery响应式相册代码</title> <meta name="description" content="Ultralekka responsywna galeria jQuery"> <meta name="keywords" content="ma5gallery, galeria html5, galeria jquery"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/screen.css" rel="stylesheet" type="text/css"> <link href="css/ma5gallery.css" rel="stylesheet" type="text/css"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/ma5gallery.js"></script> <script src="js/functions.js"></script> <!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]--> </head> <body> <section class="site-header container"> <h1>MA5-Gallery</h1> <p>Ultralight responsive jQuery gallery with fullscreen and movie player features</p> <br> <p>Example 1. Gallery mode with keys controll (space, arrows left right keys, escape)</p> <div> <figure> <img src="./images/ptaki/a1.jpg" alt=""> <figcaption>Kurka wodna</figcaption> </figure> <figure> <img src="./images/ptaki/a2.jpg" alt=""> <figcaption>?yska</figcaption> </figure> <figure> <img src="./images/ptaki/a3.jpg" alt=""> <figcaption>Kawka</figcaption> </figure> <figure> <img src="./images/ptaki/a4.jpg" alt=""> <figcaption>Kaczka</figcaption> </figure> <figure> <img src="./images/ptaki/a5.jpg" alt=""> <figcaption>Wrona</figcaption> </figure> <figure> <img src="./images/ptaki/a6.jpg" alt=""> <figcaption>Wróbel</figcaption> </figure> </figure> </div> <br><br> <p>Example 2. Single mode, only one image</p> <figure> <img src="./images/ptaki/a1.jpg" alt=""></figure><figure><img src="./images/ptaki/a1.jpg" alt=""> </figure> <br><br> <p>Example 3. Path to full</p> <figure> <img src="./images/ptaki/a2d.jpg" alt="" data-ma5pathtofull="./images/ptaki/a2.jpg"> </figure> </section> </body> </html>
网页使用了bootstrap框架，bootstrap是比较受欢迎的前端开发框架，bootstrap提供了模式对话框、标签页、滚动条、弹出框等众多设计完美的组件，帮助前端开发者快速构建一个漂亮、功能完备的网站。
网页分别导入了三个样式文件，其中bootstrap.min.css是bootstrap框架的样式文件。
网页分别导入了三个脚本文件，其中functions.js和ma5gallery.js是项目自身脚本文件，下面解读这两个脚本文件。
functions脚本文件
$(document).ready(function(){
$('.gallery-item').ma5gallery({
preload:true,
fullscreen:false
});
});ready函数在网页加载完成后执行，针对每个具有gallery-item样式的元素，执行ma5gallery()方法，该方法在ma5gallery.js脚本文件内定义。
ma5gallery脚本文件
ma5gallery.js是案例项目的主要脚本文件，该脚本文件通过jQuery的$.fn命名空间定义了ma5gallery()方法和ma5preload()方法，鉴于代码比较长，这里就不给出源代码了，读者可以在课程资源中查看源代码。
ma5gallery()方法在网页加载完成后被调用，并对所有样式为gallery-item的元素执行该方法。
该方法将“touch click”事件绑定到元素上，touch为移动端触摸事件，click为电脑端鼠标单击事件，在事件处理函数中，操作图片元素，完成图片的浏览和切换。