Investigation on PhotoSwipe - 02

最新推荐文章于 2024-11-21 15:42:43 发布

原创最新推荐文章于 2024-11-21 15:42:43 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#image #structure #listview #function #jquery #variables

Javascript 同时被 3 个专栏收录

85 篇文章

订阅专栏

Ajax

58 篇文章

订阅专栏

Konica Minolta

10 篇文章

订阅专栏

本文详细介绍了如何在jQuery Mobile框架中集成PhotoSwipe，并解析了PhotoSwipe的设计模式。通过具体的HTML结构和JavaScript代码示例，展示了页面布局及PhotoSwipe实例的创建过程。

And now, use Firefox console to inspect all the classes structure:

PhotoSwipe structure:

util-classes-structure

Util structure:

photoswipe-class-structure

We can easily figure out the design pattern of the classes, for certain entry, it has a specific class name, and it serves as a data structure, it has CssClass, EventTypes and a class definition in general, and action types perhaps:

EntryName

| - - - CssClass

| - - - EventTypes

| - - - EntryNameClass

| - - - XXXAction (optional)

| - - - other functions (optional)

| - - - other variables (optional)

And even PhotoSwipe it uses this pattern. The EntryNameClass embody the operating logic of that entry, and others serve as static member variables, such as EventTypes defines what event types that entry may dispatch.

Now is time to inspect it from top to down, use WinHTTrack to download the files from the demo, and solve some little problems. Then we set up the demo kit locally, and the HTML:

<body>

<div data-role="page" id="Home">

	<div data-role="header">
		<h1>PhotoSwipe</h1>
	</div>
	
	
	<div data-role="content" >	
		
		<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>		
		
		<ul data-role="listview" data-inset="true">
			<li><a href="#Gallery1">First Gallery</a></li> 
			<li><a href="#Gallery2">Second Gallery</a></li> 
		</ul> 
		
		<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>
		
		<ul data-role="listview" data-inset="true">
			<li><a href="01-default.html" target="_blank">Code Computerlove</a></li> 
		</ul> 
		
	</div>

	<div data-role="footer">
		<h4>© 2011 Code Computerlove</h4>
	</div>

</div>


<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">

	<div data-role="header">
		<h1>First Gallery</h1>
	</div>

	<div data-role="content">	
		
		<ul class="gallery">
		
			<li><a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
			<li><a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
			<li><a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
			<li><a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
			<li><a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
			<li><a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
			<li><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
			<li><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
			<li><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
			
		</ul>
		
	</div>
	
	<div data-role="footer">
		<h4>© 2011 Code Computerlove</h4>
	</div>
	
</div>

<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">

	<div data-role="header">
		<h1>Second Gallery</h1>
	</div>

	<div data-role="content">	
		
		<ul class="gallery">
		
			<li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
			<li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
			<li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
			<li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>
			<li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>
			<li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>
			<li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>
			<li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>
			<li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>
		
		</ul>
		
	</div>

	<div data-role="footer">
		<h4>© 2011 Code Computerlove</h4>
	</div>

</div>

</body>

According to jQueryMobile official docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html

The structure of the HTML is formed to follow jQueryMobile framework, and the navigation among pages is handled by jQM. So let's focus on its script part:

<script type="text/javascript">

	(function(window, $, PhotoSwipe){
		
		$(document).ready(function(){
			
			$('div.gallery-page')
				.live('pageshow', function(e){
					
					var currentPage = $(e.target),
						options = {},
						photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
						
					return true;
					
				})
				
				.live('pagehide', function(e){
					
					var currentPage = $(e.target),
						photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

					if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
						PhotoSwipe.detatch(photoSwipeInstance);
					}
					
					return true;
					
				});
			
		});
	
	}(window, window.jQuery, window.Code.PhotoSwipe));
	
</script>

This script tell browser to do that after DOM loaded: bind anonymous function on pageShow event to 'gallery-page' class DIV tag. And what the handler function does is to create a photoSwipe instance, passing all the a tags within the showed page.

photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

photoSwipe() seems to be declared as a jQuery wrapper method now.