随着越来越多的用户使用移动设备浏览网页，现在是开始移动web开发的时候了。在本教程中，我们将使用令人惊异的jQTouch jQuery插件开发一个简单的移动图像库，用于移动web开发。jQTouch是一个jQuery插件，具有本地动画、自动导航和移动WebKit浏览器的主题，如iPhone、iPod Touch、G1和Pre。
我们的小应用程序将在列表视图中显示一些相册，当它被单击时，它会显示一个缩略图墙。当点击缩略图时，我们会看到完整的图像视图，我们可以通过点击导航按钮或在图片上滑动来浏览所有的照片。
这款应用可以在iPhone、iPod Touch等移动设备上使用，也可以在像谷歌Chrome或Safari这样的Webkit浏览器中使用。如果你正在使用iPhone或iPod Touch(或iPad)，将这个应用程序添加到你的主屏幕上，以享受完整的视图和功能。
就像我们之前的教程一样，使用jQuery和PHP的新的滑动缩略图库，我们将使用PHP从文件夹结构自动生成带有PHP的相册。
jQTouch的优点是你不必担心太多，不管是风格还是JavaScript。它有很多令人惊讶的效果我们从iPhone中知道它是默认功能它负责正确的头部属性。这使得创建一个移动设备友好的网站变得非常容易。
我们还有一个没有相册的静态版本。您可以在本文末尾找到演示和ZIP文件。
所以,让我们开始吧!
HTML非常简单:对于每个屏幕，当我们在该页面上时，我们将会有一个容器。
HTML中的第一个屏幕是“About”部分，当点击右上角的About按钮时，可以看到它的“About”部分:
<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>
在我们的HTML结构中，第二个容器将是我们动态添加专辑链接列表的部分。我们从特殊的文件夹结构中自动获取该列表。
文件夹结构包含一个图像文件夹和一个拇指文件夹。每一个都包含了相册文件夹。它们必须被命名为相同的，就像里面的图像一样。
在缩略图相册文件夹中，我们将有一个名为“desc”的XML文件。可以用来为每个图像编写描述的xml。在这个文件中，我们将写下图片的名称和标题。每个图像的描述都不是必须的，这意味着我们可以省略没有任何标题或描述的图像。
该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>用拇指表示。我们将php文件保存在一个名为“ajax”的子文件夹中，我们将自动得到这些描述。有关工作原理的更详细的说明，请参阅我们之前的教程。
第二个容器的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>带有id“相册”的无序列表将被包含包含到该相册的链接的列表项填充。
工具栏将位于屏幕顶部，并显示在每个容器中。它将有一个按钮，可以到达about部分和返回到前一个屏幕的后链接。
JavaScript的第一步是调用函数loadAlbums()，它通过向PHP端发送AJAX请求获取相册的名称(albums . PHP):
/* 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'); });PHP文件的相册。php的外观如下:
<?phpif(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>'; } } } }?>我们正在扫描名为“images”的目录，以便获得我们的相册的所有子文件夹。注意，每个列表元素链接将会有一个用于大拇指容器的href。当我们点击其中一个列表项时，JavaScript变量“album”将跟踪当前的相册。
第三个容器是缩略图的部分。这里我们将使用小的缩略图作为链接元素来填充无序列表。
正如你在图片中看到的，缩略图将占据所有屏幕。我们使用一个定心函数，它决定了给定一个窗口宽度，有多少个缩略图适合于一行。左边的边距是根据左边的空间来计算的。
如果缩略图大于预定义的宽度和75px的高度，我们也可以调整缩略图的大小。所以，如果你使用的不是二次型和不同大小的缩略图，它们将被制成列表元素。
缩略图视图有以下结构:
<!-- 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>在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(); });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);?>
最后一个容器将是完整的图像预览。这里我们将使用另一个resize函数来调整图像的宽度和高度来适应viewport。
我们还将添加两个导航按钮，将指向下一个和前面的图像进行完整预览。
要浏览这些图像，我们可以使用这些导航按钮，或者在图像上滑动(如果我们的移动设备支持这一点，比如iPhone或iPod Touch)。
在导航按钮之间，我们将添加当前图像的描述。
我们将使用的resize函数检查图像是否大于窗口，如果是，图像就会相应地调整大小。
最后一个容器的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>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在添加了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' ] });除了其他，我们定义应用程序的图标和启动屏幕图像。我们也可以列出要预装的图片。您可以配置几个参数。您可以在这里找到所有的初始化选项。
如果我们使用一个可以旋转屏幕的设备，我们的图像预览将是这样的:
现在，让我们来看看它的风格。
CSS这个画廊的风格主要是基于jQTouch插件提供的主题。我们对默认样式的颜色做了一些细微的更改，并为gallery添加了以下样式:
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;}这是它!我希望您喜欢从移动web开发开始!
