Useful JQ Picture Effects jquery-poptrox-popup-galleries

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

varfoo = $(‘#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