• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

tutorialzine/touchTouch: Touch Optimized Mobile Gallery

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

tutorialzine/touchTouch

开源软件地址(OpenSource Url):

https://github.com/tutorialzine/touchTouch

开源编程语言(OpenSource Language):

JavaScript 52.2%

开源软件介绍(OpenSource Introduction):

jQuery TouchTouch

A jQuery 1.7+ plugin that makes it easy to display a set of photos on your site as a touch-optimized photo gallery.

Highlights

  • Smooth CSS3 animations and transitions;
  • A responsive CSS interface that fills the screen and responds to changes in device orientation;
  • Preloads photos only when they are needed;
  • Supports swiping through photos;
  • Displays onscreen arrows and listens for arrow key presses on desktop browsers;
  • Supports multiple galleries;

How to use

Using it is simple. Drop the touchTouch folder (you can find it in the download under assets/) somewhere in your website folder tree. After this, include touchTouch/touchTouch.css in your <head>, and touchTouch.jquery.js right after the jQuery library. The script depends on jQuery 1.7 or above.

After you do all this, simply call the gallery as a regular jQuery plugin:

$(function(){

	// Initialize the gallery
	$('.thumbs a').touchTouch();

});

You must pass anchor elements which point to images in their href attributes for the gallery to work. In addition to conveying which images are to be displayed in the gallery, this also provides a graceful fallback in case JavaScript is not available.

Multiple Galleries

To show specific sets of pictures, add a "data-gallery" attribute to either:

Each of the anchor tags you want in that set, with a unique value.

	<a href="image.jpg" data-gallery="hongkong" title="Lion Rock"></a>

Or:

Any ancestor containing the elements selected by the plugin. Note that this method takes priority if both are used on the same set.

	<ul data-gallery="hongkong">
		...
	</ul>

Of course you can ignore all this and all selected elements will be displayed.

License

Released under the MIT license

Demo

Go to Tutorialzine for a live demo.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap