阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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
      });
      
      目录
      目录