插件 jQuery.poptrox 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.poptrox 中文API文档 https://github.com/ajlkn/jquery.poptrox

将灯箱库添加到jQuery。重定制,易于使用,并支持图像,视频(YouTube,Vimeo,Wistia,Brightcove),Soundcloud轨道,IFRAME和AJAX内容。

需要jQuery 1.7+。

用法

在jQuery之后加载它:

<script src="http://code.jquery.com/jquery-x.x.x.min.js"></script>
<script src="jquery.poptrox.min.js"></script>

设置您的图库:

<div id="gallery">
	<a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a>
	<a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a>
	<a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a>
	<a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a>
	<a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a>
	<a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a>
</div>

poptrox():

var foo = $('#gallery');
foo.poptrox();

Notes

  • Poptrox解析你调用它的元素内的所有锚点,即使它们嵌套在其他东西中。例如,这将完全奏效:
<div id="gallery">
	<section>
		<h2>Stuff I Like</h2>
		<ul>
			<li><a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a></li>
			<li><a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a></li>
			<li><a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a></li>
		</ul>
	</section>
	<section>
		<h2>Stuff I Don't Like</h2>
		<ul>
			<li><a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a></li>
			<li><a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a></li>
			<li><a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a></li>
		</ul>
	</section>
</div>
  • 每个锚点必须链接到弹出窗口中显示的任何内容,无论是图像还是其他内容(见下文)。

  • 如果你想要弹出窗口的标题,启用usePopupCaption(见下文)并title为你的<img>元素分配一个属性,如下所示:

<a href="path/to/image.jpg"><img src="path/to/image_thumbnail.jpg" title="This right here is a caption." /></a>
  • 您还可以使用该caption选项告诉Poptrox它应该在哪里查找标题:
caption: null

默认行为,它只使用title每个元素的属性。

caption: { selector: "xxxxxx" }

使用选择器指向的元素的内容xxxxxx(必须在锚点内)。

caption: { selector: "xxxxxx", remove: true }

使用选择器指向的元素的内容xxxxxx(必须在锚点内),然后删除元素。

caption: function(a) { /* return something */ },

(高级)使用回调函数来确定标题,其中a是一个指向锚标记的jQuery对象。

支持的类型

除了图像,弹出窗口还可以显示其他内容(如YouTube视频)。要执行此操作,请将缩略图的锚点指向相应的URL(请参阅下面的详细信息)并为其指定如下data-poptrox属性:

<a href="http://untitled.tld/path/to/whatever" data-poptrox="type,(width)x(height)"><img src="path/to/thumbnail.jpg" /></a>

data-poptrox 属性如下所示:

  • type: The type (eg. youtube)
  • (width)x(height): An optional width and height for the popup (eg. 800x400)

YouTube Videos

<a href="http://youtu.be/loGm3vT8EAQ" data-poptrox="youtube,800x480"><img src="path/to/thumbnail.jpg" /></a>

Vimeo Videos

<a href="http://vimeo.com/22439234" data-poptrox="vimeo,800x480"><img src="path/to/thumbnail.jpg" /></a>

Wistia Videos

  • Link format: http://fast.wistia.net/embed/iframe/fe8t32e27x (found via “Share” or “Get Link”)
  • Type: wistia
  • Example:
<a href="http://fast.wistia.net/embed/iframe/fe8t32e27x" data-poptrox="wistia,800x480"><img src="path/to/thumbnail.jpg" /></a>

Brightcove Videos

  • Link format: http://bcove.me/xxxxxxxx (found via “Share” or “Get Link”)
  • Type: bcove
  • Example:
<a href="http://bcove.me/qly3wjdw" data-poptrox="bcove,636x360"><img src="path/to/thumbnail.jpg" /></a>

Soundcloud Tracks

  • Link format: https://api.soundcloud.com/tracks/xxxxxxxx (found via the “Share” button under “Widget Code” or “WordPress Code”)
  • Type: soundcloud
  • Example:
<a href="https://api.soundcloud.com/tracks/93549370" data-poptrox="soundcloud"><img src="path/to/thumbnail.jpg" /></a>

IFRAMEs

  • Link format: Anything.
  • Type: iframe
  • Example:
<a href="path/to/whatever.html" data-poptrox="iframe,600x400"><img src="path/to/thumbnail.jpg" /></a>

AJAX Content

  • Link format: Anything (as long as it’s on the same domain)
  • Type: ajax
  • Example:
<a href="path/to/whatever.html" data-poptrox="ajax,600x400"><img src="path/to/thumbnail.jpg" /></a>

Ignore

This “special” (unspecial?) type just tells Poptrox to treat whatever’s in href as if it were a normal link.

  • Link format: Anything.
  • Type: ignore
  • Example:
<a href="http://n33.co" data-poptrox="ignore"><img src="path/to/thumbnail.jpg" /></a>

Config

poptrox() has numerous options one can use or override, if one were so inclined:

foo.poptrox({
	preload:					false,			// If true, preload fullsize images in
												// the background
	baseZIndex:					1000,			// Base Z-Index
	fadeSpeed:					300,			// Global fade speed
	overlayColor:				'#000000',		// Overlay color
	overlayOpacity:				0.6,			// Overlay opacity
	windowMargin:				50,				// Window margin size (in pixels; only comes into
												// play when an image is larger than the viewport)
	windowHeightPad:			0,				// Window height pad
	selector:					'a',			// Anchor tag selector
	caption:					null,			// Caption settings (see docs)
	popupSpeed:					300,			// Popup (resize) speed
	popupWidth:					200,			// Popup width
	popupHeight:				100,			// Popup height
	popupIsFixed:				false,			// If true, popup won't resize to fit images
	useBodyOverflow:			true,			// If true, the BODY tag is set to overflow: hidden
												// when the popup is visible
	usePopupEasyClose:			true,			// If true, popup can be closed by clicking on
												// it anywhere
	usePopupForceClose:			false,			// If true, popup can be closed even while content
												// is loading
	usePopupLoader:				true,			// If true, show the popup loader
	usePopupCloser:				true,			// If true, show the popup closer button/link
	usePopupCaption:			false,			// If true, show the popup image caption
	usePopupNav:				false,			// If true, show (and use) popup navigation
	usePopupDefaultStyling:		true,			// If true, default popup styling will be applied
												// (background color, text color, etc)
	popupBackgroundColor:		'#FFFFFF',		// (Default Style) Popup background color (when 
												// usePopupStyling = true)
	popupTextColor:				'#000000',		// (Default Style) Popup text color (when
												// usePopupStyling = true)
	popupLoaderTextSize:		'2em',			// (Default Style) Popup loader text size
	popupCloserBackgroundColor:	'#000000',		// (Default Style) Popup closer background color
												// (when usePopupStyling = true)
	popupCloserTextColor:		'#FFFFFF',		// (Default Style) Popup closer text color (when
												// usePopupStyling = true)
	popupCloserTextSize:		'20px',			// (Default Style) Popup closer text size
	popupPadding:				10,				// (Default Style) Popup padding (when
												// usePopupStyling = true)
	popupCaptionHeight:			60,				// (Default Style) Popup height of caption area
	popupCaptionTextSize:		null,			// (Default Style) Popup caption text size
	popupBlankCaptionText:		'(untitled)',	// Applied to images that don't have captions
												// (when captions are enabled)
	popupCloserText:			'&#215;',		// Popup closer text
	popupLoaderText:			'&bull;&bull;',	// Popup loader text
	popupClass:					'poptrox-popup',// Popup class
	popupSelector:				null,			// (Advanced) Popup selector (use this if you 
												// want to replace the built-in popup)
	popupLoaderSelector:		'.loader',		// (Advanced) Popup Loader selector
	popupCloserSelector:		'.closer',		// (Advanced) Popup Closer selector
	popupCaptionSelector:		'.caption',		// (Advanced) Popup Caption selector
	popupNavPreviousSelector:	'.nav-previous',// (Advanced) Popup Nav Previous selector
	popupNavNextSelector:		'.nav-next',	// (Advanced) Popup Nav Next selector
	onPopupClose:				null,			// Called when popup closes
	onPopupOpen:				null			// Called when popup opens
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>