Useful JQ Picture Effects jquery-poptrox-popup-galleries

Source: Internet
Author: User

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: ' &bull;&bull; ',//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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.