JQuery Poptrox–popup GalleriesRate this (1 Vote)
Download Demo
jquery Poptrox Adds Popup galleries to jquery. Heavily customizable, easy-to-use, and built-to-support images, YouTube videos, Vimeo videos, Soundcloud tracks, IFRAMEs, and AJAX content.
1. INCLUDE JS FILES
<script src= "http://code.jquery.com/jquery-x.x.x.min.js" ></script> <script src= "jquery.poptrox.min.js" ></script> |
2. HTML
<div id=
"gallery"
>
<a href=
"path/to/image1.jpg"
> "path/to/image1_thumbnail.jpg" /></a>
<a href=
"path/to/image2.jpg"
> "path/to/image2_thumbnail.jpg" /></a>
<a href=
"path/to/image3.jpg"
> "path/to/image3_thumbnail.jpg" /></a>
<a href=
"path/to/image4.jpg"
> "path/to/image4_thumbnail.jpg" /></a>
<a href=
"path/to/image5.jpg"
> "path/to/image5_thumbnail.jpg" /></a>
<a href=
"path/to/image6.jpg"
> "path/to/image6_thumbnail.jpg" /></a>
</div>
|
3. JAVASCRIPT
var foo = $( ‘#gallery‘ ); foo.poptrox(); |
4. OPTIONS
Poptrox () have 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: //Global Fade speed overlaycolor: ' #000000 ',//Overlay color ove rlayopacity:0.6,//Overlay opacity windowmargin:50,//Window Margi n size (in pixels; only comes to//play when a image is larger than the Viewport) windowheightpad:0,//Window height pad selector: ' A ', Anchor Tag Selector popupspeed:300,//Popup (resize) speed popupwidth: $,//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 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'll be applied (background color, text color, etc) Popupbackgroundcolor: ' #FFFFFF ',//(Default Sty Le) Popup background color (when//usepopupstyling = True) Popuptextcolor: ' #00000 0 ',//(Default Style) Popup text color (when//usepopupstyling = Tru e) 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 St YLE) PopUp height of caption Area popupcaptiontextsize:null,//(Default Style) Popup caption Text size pop Upblankcaptiontext: ' (untitled) ',//applied to images and that don ' t has captions (when captions is enabled) Popupclosertext: ' & #215; ',//Popup Closer text Popu Ploadertext: ' •• ',//Popup loader text popupclass: ' Poptrox-popup ',//Pop Up class Popupselector:null,//(Advanced) Popup selector (with the If you Want to replace the built-in popup) Popuploaderselector: '. Loader ',//(Adva nced) Popup Loader selector popupcloserselector: '. Closer ',//(Advanced) Popup closer selector Popupcap Tionselector: '. 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});
5. Supported TYPES
In addition to images, popups can also show other stuff (like YouTube videos). To does this, point your thumbnail ' s anchor to the appropriate URL (see below for specifics) and give it a Data-poptrox attr Ibute:
<a href= "Http://untitled.tld/path/to/whatever" data-poptrox= "type, (width) x (height)" ></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" ></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" > </a>
Soundcloud Tracks
- Link format:https://api.soundcloud.com/tracks/xxxxxxxx (found via the "Share" button under "Widget Code" or "WordPress Co De ")
- Type:soundcloud
- Example:
<a href= "https://api.soundcloud.com/tracks/93549370" data-poptrox= "SoundCloud" ></a>
IFRAMEs
- Link format:anything.
- Type:iframe
- Example:
<a href= "path/to/whatever.html" data-poptrox= "iframe,600x400" ></ 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" ></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" ></a>
Useful jq picture effects jquery-poptrox-popup-galleries