With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre.
随着越来越多的用户使用移动设备浏览Web，现在该开始进行移动Web开发了。 在本教程中，我们将使用惊人的jQTouch jQuery插件开发一个简单的移动图像库，以进行移动Web开发。 jQTouch是一个jQuery插件，具有本机动画，自动导航和适用于iPhone，iPod Touch，G1和Pre等移动WebKit浏览器的主题。
Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. When a thumbnail is clicked, we get to the full image view where we can navigate through all the photos by either clicking on the navigation buttons or swiping over the image.
我们的小应用程序将在列表视图中显示一些专辑，单击该列表将显示缩略图的墙。 单击缩略图后，我们进入完整的图像视图，在其中可以通过单击导航按钮或在图像上滑动来浏览所有照片。
This app is best viewed on a mobile device like the iPhone or the iPod Touch, or in a Webkit Browser like Google Chrome or Safari. If you are using the iPhone or the iPod Touch (or the iPad), add this app to your home screen to enjoy the full view and features.
最好在移动设备(如iPhone或iPod Touch)或Webkit浏览器(如Google Chrome或Safari)中查看此应用。 如果您使用的是iPhone或iPod Touch(或iPad)，请将此应用程序添加到主屏幕以欣赏完整的视图和功能。
Just like in our previous tutorial, the Fresh Sliding Thumbnails Gallery with jQuery and PHP we will be using PHP to automatically generate albums with PHP from the folder structure.
就像在我们之前的教程《带有jQuery和PHP的Fresh Sliding Thumbnails Gallery》中一样，我们将使用PHP通过文件夹结构自动使用PHP生成专辑。
The great thing about jQTouch is that you don’t really have to worry about much, be it the style or the JavaScript. It has pretty much all the amazing effects that we know from the iPhone as default functionality and it takes care of the right head properties. This makes it really easy to create a mobile device friendly website.
jQTouch的优点在于，您不必担心太多，无论是样式还是JavaScript。 它具有我们从iPhone知道的所有惊人功能，它们是默认功能，并且可以保护适当的头部特性。 这使得创建移动设备友好的网站变得非常容易。
We also have a static version without albums. You can find the demo and the ZIP file at the end of this post.
我们也有没有专辑的静态版本。 您可以在本文末尾找到该演示和ZIP文件。
So, let’s start!
所以，让我们开始吧！
标记和JavaScript (The Markup and JavaScript)
The HTML is pretty simple: for each screen we will have a container that becomes visible when we are on that page. The first screen that we will have in the HTML is the “About” section that get’s visible when clicking (or tapping) on the about button on the top right:
HTML非常简单：对于每个屏幕，我们都有一个容器，当我们在该页面上时，该容器将变为可见。 HTML中将显示的第一个屏幕是“关于”部分，当单击(或点击)右上角的“关于”按钮时，该部分可见：
<div id="about" class="selectable">
<p><img src="codropsIcon.png"/></p>
<p>
<strong>Wonderwall Image Gallery</strong>
<a href="http://www.codrops.com">By Codrops</a>
</p>
<p>A web app created with <br /> <strong>jQTouch</strong></p>
<p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
</div>
The second container that we will have in our HTML structure, will be the part where we dynamically add a list of album links. We get that list automatically from our special folder structure.
我们将在HTML结构中拥有的第二个容器将是我们动态添加专辑链接列表的部分。 我们从特殊的文件夹结构中自动获得该列表。
The folder structure contains an image folder and a thumbs folder. Each one of those contains folders of albums. They have to be named the same, just like the images inside.
文件夹结构包含一个图像文件夹和一个拇指文件夹。 其中的每一个都包含相册文件夹。 它们必须被命名为相同的名称，就像里面的图像一样。
In the thumbnails album folders we will have an XML file called “desc.xml” which can be used to write a description for each image. In this file, we will write the name of the picture and it’s title. The description of each image is not obligatory which means that we can leave out images that don’t have any title or description.
在缩略图相册文件夹中，我们将有一个名为“ desc.xml”的XML文件，可用于为每个图像编写描述。 在此文件中，我们将写入图片的名称及其标题。 每个图像的描述不是强制性的，这意味着我们可以省略没有任何标题或描述的图像。
The structure of that XML file will look as follows:
该XML文件的结构如下所示：
<descriptions>
<image>
<name>1.jpg</name>
<text>Inna 02 © studio.es by Vincent Boiteau</text>
</image>
<image>
<name>2.jpg</name>
<text>Inna 01 © studio.es by Vincent Boiteau</text>
</image>
...
</decriptions>
With the thumbs.php file which we keep in a sub folder called “ajax” we will automatically get those descriptions. For a more detailed explanation of the workings, check out our previous tutorial.
使用我们保存在名为“ ajax”的子文件夹中的thumbs.php文件，我们将自动获得这些描述。 有关工作原理的详细说明，请查看我们以前的教程。
The second container’s HTML structure is going to look like this:
第二个容器HTML结构如下所示：
<!-- The list of albums -->
<div id="albums_container" class="current">
<div class="toolbar">
<h1>Albums</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<div class="loader" style="display:none;"></div>
<ul id="albums" class="edgetoedge" style="display:none;">
</ul>
</div>
The unordered list with the id “albums” will be populated with list items containing the links to the albums. The toolbar will be at the top of the screen and present in every container. It will have a button to get to the about section and a back link that brings us back to the previous screen. The first step in the JavaScript is to call the function loadAlbums() which gets the names of the albums with an AJAX request to the PHP side (albums.php):
ID为“专辑”的无序列表将被包含列表链接的列表项填充。 工具栏将位于屏幕顶部，并出现在每个容器中。 它将具有一个前往“关于”部分的按钮和一个后退链接，可将我们带回到上一屏幕。 JavaScript的第一步是调用函数loadAlbums() ，该函数使用PHP端(albums.php)的AJAX请求获取专辑的名称：
/* name of the selected album */
var album = '';
/* index of li where there is the selected image */
var current = -1;
/* 1 step : Load the Albums */
loadAlbums();
function loadAlbums(){
var $loader = $('#albums_container').find('.loader');
$loader.show();
var url = 'ajax/albums.php';
/*
gets the names of the albums with an AJAX request to the PHP side
*/
$.get(url, function(data) {
$loader.hide();
$('#albums').html(data).show();
},'html');
}
/*
clicking on an album:
we keep track of which album is currently selected by
getting the id (album name) of the clicked row
*/
$('#albums_container').delegate('li','click tap',function(e){
var $this = $(this);
album = $this.attr('id');
});
The PHP file albums.php looks as follows:
PHP文件albums.php如下所示：
<?php
if(file_exists('../images')){
$files = array_slice(scandir('../images'), 2);
if(count($files)){
natcasesort($files);
foreach($files as $file){
if($file != '.' && $file != '..'){
echo '<li id="'.$file.'" class="arrow"><a href="#thumbs_container">'.$file.'</a></li>';
}
}
}
}
?>
We are scanning the directory called “images” in order to get all the sub folders which are our albums. Note that the each list element link will have a href for the thumbs container. The JavaScript variable “album” will keep track of the current album when we click on one of the list items.
我们正在扫描名为“ images”的目录，以获取属于我们相册的所有子文件夹。 请注意，每个list元素链接将为thumbs容器具有href。 当我们单击列表项之一时，JavaScript变量“专辑”将跟踪当前专辑。
The third container is the section for the thumbnails. Here we will populate an unordered list #thumbs with the small thumbnail images as link elements.
第三个容器是缩略图的区域。 在这里，我们将使用小缩略图图像作为链接元素填充无序列表#thumb。
As you can see in the image, the thumbnails will occupy all the screen. We use a centering function that determines how many thumbnails fit into one row given a certain window width. The left margin is calculated according to the left over space.
正如您在图像中看到的那样，缩略图将占据整个屏幕。 我们使用居中功能来确定在给定窗口宽度的情况下一行中可容纳多少缩略图。 左边距是根据剩余空间计算的。
We also resize the thumbnails if they are bigger than our predefined width and height of 75px. So, if you use thumbnails that are not quadratic and of different sizes, they will be made to fit into the list element.
如果缩略图大于我们预定义的宽度和高度75px，我们还将调整缩略图的大小。 因此，如果您使用的不是二次方且大小不同的缩略图，它们将适合列表元素。
The thumbnails view has the following structure:
缩略图视图具有以下结构：
<!-- The list of images (thumbs) -->
<div id="thumbs_container">
<div class="toolbar">
<h1>Thumbs</h1>
<a class="back" href="#albums_container">Albums</a>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<div class="loader" style="display:none;"></div>
<ul id="thumbs" class="thumbView" style="display:none;">
</ul>
</div>
In the JavaScript we need to load the thumbnails by making another AJAX request to the PHP side (thumbs.php) which lists us all the images inside of the current album. We also need to keep track of the currently clicked image which we save in the JavaScript variable “current”:
在JavaScript中，我们需要通过向PHP端(thumbs.php)发出另一个AJAX请求来加载缩略图，该请求将列出当前相册内的所有图像。 我们还需要跟踪保存在JavaScript变量“ current”中的当前单击的图像：
/*
load thumbs when the panel thumbs_container slides in;
hides the thumbs_container when it slides out
*/
$('#thumbs_container').bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in'){
loadThumbs();
}else{
$('#thumbs').hide();
}
});
/*
gets the photos information with an AJAX request to the PHP side
then creates and loads each one of the images,
and appends it to the DOM
after that, we need to center the grid of the images
based on how many fit per row
*/
function loadThumbs(){
var $thumbscontainer = $('#thumbs_container');
var $loader = $thumbscontainer.find('.loader');
$loader.show();
var url = 'ajax/thumbs.php?album='+album;
$.get(url, function(data) {
var countImages = data.length;
var $ul = $('#thumbs').empty();
var counter = 0;
for(var i = 0; i < countImages; ++i){
try{
var description = data[i].desc[0];
}catch(e){
description = '';
}
if(description == undefined)
description = '';
$('<img alt="'+data[i].alt+'" title="'+description+'"/>').load(function(){
++counter;
var $this = $(this);
/*
we need to make sure the grid thumbs are no bigger than 75 px
*/
resizeGridImage($this);
var $li = $('<li/>',{
className : 'pic'
});
var $a = $('<a/>',{
href : '#photo_container'
});
$ul.append($li.append($a.append($this)));
if(counter == countImages){
$loader.hide();
$thumbscontainer.append($ul.show());
autoCenterPhotos();
}
}).attr('src',data[i].src);
}
},'json');
}
/*
when clicking on an image we keep track of the index
of the image, which is in the alt attribute of the thumb
*/
$('#thumbs_container').delegate('li','click tap',function(){
current = $(this).index();
});
The thumbs.php looks as follows:
thumbs.php如下所示：
<?php
$album = $_GET['album'];
$imagesArr = array();
$i = 0;
/* read the descriptions xml file */
if(file_exists('../thumbs/'.$album.'/desc.xml')){
$xml = simplexml_load_file('../thumbs/'.$album.'/desc.xml');
}
if(file_exists('../thumbs/'.$album)){
$files = array_slice(scandir('../thumbs/'.$album), 2);
if(count($files)){
foreach($files as $file){
if($file != '.' && $file != '..' && $file!='desc.xml'){
if($xml){
$desc = $xml->xpath('image[name="'.$file.'"]/text');
$description = $desc[0];
if($description=='')
$description = '';
}
$imagesArr[] = array('src' => 'thumbs/'.$album.'/'.$file,
'alt' => 'images/'.$album.'/'.$file,
'desc' => $description);
}
}
}
}
$json = $imagesArr;
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
?>
Our last container will be for the full image preview. Here we will use another resize function in order to adapt the width and height of the image to fit into the viewport.
我们的最后一个容器将用于完整图像预览。 在这里，我们将使用另一个调整大小功能，以调整图像的宽度和高度以适合视口。
We will also add two navigation buttons that will point to the next and previous images in full preview.
我们还将添加两个导航按钮，它们将指向完整预览中的下一张和上一张图像。
To browse through the images we can either use these navigation buttons or swipe over the image (if our mobile device supports that, i.e. iPhone or iPod Touch).
要浏览图像，我们可以使用这些导航按钮或在图像上滑动(如果我们的移动设备支持iPhone或iPod Touch)。
Between the navigation buttons, we will add the description of the current image.
在导航按钮之间，我们将添加当前图像的描述。
The resize function that we will be using checks if the image is bigger than the window and if it is, the image gets resized accordingly.
我们将使用的调整大小功能检查图像是否大于窗口，如果大于窗口，则会相应调整图像大小。
The HTML structure for the last container looks as follows:
最后一个容器HTML结构如下：
<!-- The single image container -->
<div id="photo_container">
<div class="toolbar">
<h1>Photo</h1>
<a class="back" href="#thumbs_container">Photos</a>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<div class="loader" style="display:none;"></div>
<div id="theimage" class="singleimage"></div>
<div class="descriptionWrapper">
<p id="description"></p>
<div id="prev" style="display:none;"></div>
<div id="next" style="display:none;"></div>
</div>
</div>
And the JavaScript looks as follows:
JavaScript如下所示：
/*
load the large image when the panel photo_container slides in;
empty the contents of the image element when it slides out
*/
$('#photo_container').bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in'){
var $thumb = $('#thumbs_container li:nth-child('+parseInt(current+1)+')').find('img');
if(!$thumb.length) return;
loadPhoto($thumb);
}
else{
$('#theimage').empty();
$('#description').empty();
$('#prev,#next').hide();
}
});
/* loads a large photo */
function loadPhoto($thumb){
var $loader = $('#photo_container').find('.loader');
$loader.show();
var $theimage = $('#theimage');
$('<img/>').load(function(){
var $this = $(this);
resize($this);
$loader.hide();
var $a=$('<a/>');/*for swipe*/
$theimage.empty().append($a.append($this));
$('#description').empty().html($thumb.attr('title'));
$('#prev,#next').show();
}).attr('src',$thumb.attr('alt'));
}
/* swipe image - navigate right/left */
$('#theimage').swipe(function(evt, data) {
if(data.direction=='left')
navigateNext();
else
navigatePrevious();
});
/*
Events for navigating through the images
The current gives us our current photo,
so we need to get the next / previous one
from the thumbs container - these have
the source for the large photo in the
alt attribute
*/
$('#next').bind('click tap',function(){
navigateNext();
});
$('#prev').bind('click tap',function(){
navigatePrevious();
});
/* goes to next image */
function navigateNext(){
++current;
var $thumb = $('#thumbs_container li:nth-child('+parseInt(current+1)+')').find('img');
if(!$thumb.length) {
--current;
return;
}
loadPhoto($thumb);
}
/* goes to previous image */
function navigatePrevious(){
--current;
var $thumb = $('#thumbs_container li:nth-child('+parseInt(current+1)+')').find('img');
if(!$thumb.length) {
++current;
return;
}
loadPhoto($thumb);
}
初始化jQTouch(Initializing jQTouch)
After adding the scripts of jQuery and jQTouch we also have to initialize the jQTouch plugin:
添加了jQuery和jQTouch的脚本之后，我们还必须初始化jQTouch插件：
var jQT = new $.jQTouch({
icon : 'codropsIcon.png',
cacheGetRequests: true,
addGlossToIcon : false,
startupScreen : 'codropsSplash.png',
statusBar : 'black',
preloadImages: [
'themes/img/back_button.png',
'themes/img/back_button_clicked.png',
'themes/img/button_clicked.png',
'themes/img/grayButton.png',
'themes/img/whiteButton.png',
'themes/img/loading.gif'
]
});
Beside others, we define the icon for the app and the start up screen image. We can also list what images shall be preloaded. There are several parameters that you can configure. You can find all about the initialization options here.
在其他旁边，我们定义了应用程序的图标和启动屏幕图像。 我们还可以列出应预加载哪些图像。 您可以配置几个参数。 您可以在此处找到有关初始化选项的所有信息。
If we use a device where we can rotate the screen, our image preview will look like this:
如果我们使用可以旋转屏幕的设备，则图像预览将如下所示：
And now, let’s take a look at the style.
现在，让我们看一下样式。
CSS (The CSS)
The style for this gallery is mainly based on the provided theme in the jQTouch plugin. We did some minor changes to the colors in the default style and added the following style for the gallery:
该库的样式主要基于jQTouch插件中提供的主题。 我们对默认样式中的颜色做了一些小的更改，并为图库添加了以下样式：
ul.thumbView{
list-style:none;
margin:0px;
border:none;
}
ul.thumbView li {
float:left;
position:relative;
width:80px;
height:80px;
border:none;
margin:0px;
padding:0px;
background:transparent;
line-height:80px;
overflow:visible;
}
ul.thumbView li a {
height:80px;
margin:0;
padding:0;
width:80px;
text-align:center;
vertical-align:middle;
display:table-cell;
overflow:visible;
}
ul.thumbView li a img{
border:none;
vertical-align:middle;
-webkit-box-shadow:2px 2px 8px #000;
}
div.singleimage{
text-align:center;
width:100%;
}
div.singleimage img{
margin-top:10px;
-webkit-box-shadow:2px 2px 8px #000;
}
.descriptionWrapper{
height:40px;
position:relative;
}
p#description{
text-align:center;
color:white;
text-transform:uppercase;
font-weight:bold;
margin:10px 0px 0px 0px;
padding:0px 45px;
}
div#prev,div#next{
cursor:pointer;
position:absolute;
top:10px;
width:40px;
height:40px;
background-color:black;
background-repeat:no-repeat;
background-position:center center;
}
div#prev{
left:0px;
background-image:url(img/prev.png);
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
div#next{
right:0px;
background-image:url(img/next.png);
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
div.loader{
background:transparent url(img/ajax-loader.gif) no-repeat center center;
position:absolute;
top:90px;
width:100%;
left:0px;
height:24px;
}
And that’s it! I hope you enjoyed starting with mobile web development!
就是这样！ 希望您喜欢从移动Web开发开始！
We also have a static version of this mobile photo gallery without the album functionality. Check out the static demo or download the ZIP file.
我们还有此移动照相馆的静态版本，没有相册功能。 查看静态演示或下载ZIP文件。
翻译自: https://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
