You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Adds lightbox galleries to jQuery. Heavily customizable, easy to use, and built tosupport images, videos (YouTube, Vimeo, Wistia, Brightcove), Soundcloud tracks, IFRAMEs, and AJAX content.
Poptrox parsesall anchors inside the element you call it on, even ifthey're nested in other stuff. For example, this would totally work:
<divid="gallery"><section><h2>Stuff I Like</h2><ul><li><ahref="path/to/image1.jpg"><imgsrc="path/to/image1_thumbnail.jpg"/></a></li><li><ahref="path/to/image2.jpg"><imgsrc="path/to/image2_thumbnail.jpg"/></a></li><li><ahref="path/to/image3.jpg"><imgsrc="path/to/image3_thumbnail.jpg"/></a></li></ul></section><section><h2>Stuff I Don't Like</h2><ul><li><ahref="path/to/image1.jpg"><imgsrc="path/to/image1_thumbnail.jpg"/></a></li><li><ahref="path/to/image2.jpg"><imgsrc="path/to/image2_thumbnail.jpg"/></a></li><li><ahref="path/to/image3.jpg"><imgsrc="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 imageor something else (see below).
If you want captions on your popups, enableusePopupCaption (see below) and assignatitle attribute to your<img> element, like so:
<ahref="path/to/image.jpg"><imgsrc="path/to/image_thumbnail.jpg"title="This right here is a caption."/></a>
You can also use thecaption option to tell Poptrox where it should look for captions:
caption:null
The default behavior, which simply uses thetitle attribute of each<img> element.
caption:{selector:"xxxxxx"}
Uses the content of the element pointed to by the selectorxxxxxx (must be inside the anchor).
caption:{selector:"xxxxxx",remove:true}
Uses the content of the element pointed to by the selectorxxxxxx (must be inside the anchor),thenremoves the element.
caption:function(a){/* return something */},
(Advanced) Uses a callback function to figure out the caption, wherea is a jQuery objectpointing 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 adata-poptrox attribute like so:
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 backgroundbaseZIndex:1000,// Base Z-IndexfadeSpeed:300,// Global fade speedoverlayColor:'#000000',// Overlay coloroverlayOpacity:0.6,// Overlay opacitywindowMargin:50,// Window margin size (in pixels; only comes into// play when an image is larger than the viewport)windowHeightPad:0,// Window height padselector:'a',// Anchor tag selectorcaption:null,// Caption settings (see docs)popupSpeed:300,// Popup (resize) speedpopupWidth:200,// Popup widthpopupHeight:100,// Popup heightpopupIsFixed:false,// If true, popup won't resize to fit imagesuseBodyOverflow:true,// If true, the BODY tag is set to overflow: hidden// when the popup is visibleusePopupEasyClose:true,// If true, popup can be closed by clicking on// it anywhereusePopupForceClose:false,// If true, popup can be closed even while content// is loadingusePopupLoader:true,// If true, show the popup loaderusePopupCloser:true,// If true, show the popup closer button/linkusePopupCaption:false,// If true, show the popup image captionusePopupNav:false,// If true, show (and use) popup navigationusePopupDefaultStyling: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 sizepopupCloserBackgroundColor:'#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 sizepopupPadding:10,// (Default Style) Popup padding (when// usePopupStyling = true)popupCaptionHeight:60,// (Default Style) Popup height of caption areapopupCaptionTextSize:null,// (Default Style) Popup caption text sizepopupBlankCaptionText:'(untitled)',// Applied to images that don't have captions// (when captions are enabled)popupCloserText:'×',// Popup closer textpopupLoaderText:'••',// Popup loader textpopupClass:'poptrox-popup',// Popup classpopupSelector:null,// (Advanced) Popup selector (use this if you// want to replace the built-in popup)popupLoaderSelector:'.loader',// (Advanced) Popup Loader selectorpopupCloserSelector:'.closer',// (Advanced) Popup Closer selectorpopupCaptionSelector:'.caption',// (Advanced) Popup Caption selectorpopupNavPreviousSelector:'.nav-previous',// (Advanced) Popup Nav Previous selectorpopupNavNextSelector:'.nav-next',// (Advanced) Popup Nav Next selectoronPopupClose:null,// Called when popup closesonPopupOpen:null// Called when popup opens});
License
jquery.poptrox.js is released under the MIT license.
Permission is hereby granted, free of charge, to any person obtaining acopy of this software and associated documentation files (the"Software"), to deal in the Software without restriction, includingwithout limitation the rights to use, copy, modify, merge, publish,distribute, sublicense, and/or sell copies of the Software, and topermit persons to whom the Software is furnished to do so, subject tothe following conditions:
The above copyright notice and this permission notice shall be includedin all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESSOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OFMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANYCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THESOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.