jquery.poptrox

2018-08-11 admin

jquery.poptrox是什么

什么是jquery.poptrox,A lightbox gallery plugin for jQuery.

jquery.poptrox介绍、jquery.poptrox使用

</script> <script src=“jquery.poptrox.min.js”></script>


Set up your gallery:

```text-html-basic
<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>

And call poptrox() on it:

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

Notes

  • Poptrox parses all anchors inside the element you call it on, even if they’re nested in other stuff. For example, this would totally work:
<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>
  • Each anchor must link to whatever you want shown in its popup, be it an image or something else (see below).

  • If you want captions on your popups, enable usePopupCaption (see below) and assign a title attribute to your <img> element, like so:

<a href="path/to/image.jpg"><img src="path/to/image_thumbnail.jpg" title="This right here is a caption." /></a>
  • You can also use the caption option to tell Poptrox where it should look for captions:

The default behavior, which simply uses the title attribute of each <img> element.

caption: { selector: "xxxxxx" }

Uses the content of the element pointed to by the selector xxxxxx (must be inside the anchor).

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

Uses the content of the element pointed to by the selector xxxxxx (must be inside the anchor), then removes the element.

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

(Advanced) Uses a callback function to figure out the caption, where a is a jQuery object pointing to the anchor tag.

Supported Types

In addition to images, popups can also show other stuff (like YouTube videos). To do this, point your thumbnail’s anchor to the appropriate URL (see below for specifics) and give it a data-poptrox attribute like so:

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

The data-poptrox attribute breaks down like this:

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

YouTube Videos

  • Link format: http://youtu.be/xxxxxxxxxxx (found via the “Share” link)
  • Type: youtube
  • Example:
<a href="http://youtu.be/loGm3vT8EAQ" data-poptrox="youtube,800x480"><img src="path/to/thumbnail.jpg" /></a>

Vimeo Videos

  • Link format: http://vimeo.com/xxxxxxxx (found via the “Share” button under “Embed”)
  • Type: vimeo
  • Example:
<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" />

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37720.html

文章标题:jquery.poptrox

回到顶部