cqiannum / jquery-popup

A jquery plugin that used to popup a lightbox in the web page.

jQuery popup

The powerful jQuery plugin that creates all kinds of pop up effect. Project page and demos
Download: jquery-popup-master.zip

---

Features

• Keyboard control support — use left/rightkey to switch pre/next image,escto close
• AJAXed popup support — ajax load content support
• Video and animation playback support — popup provides the function of video and animation play
• Lightweight size — 1 kb gzipped

Dependencies

• jQuery 1.83+

Usage

Import this libraries:

• jQuery
• jquery-popup.min.js

And CSS:

• popup.css and core.css

Create base html element:

    <div class="example">
        <a class="popup-image" href="img/1.jpg" data-popup-transition="fade" data-popup-title='this is a image' data-popup-skin='skinRimless'>
            <img src="img/1-thumbnail.jpg" alt="" />
        </a>
    </div>

Initialize tabs:

$(".popup-image").popup();

Or initialize tabs with custom settings:

$(".popup-image").popup({
namespace: 'popup',
    theme: 'default',
    modalEffect: 'none',
    winBtn: true,
    keyboard: true,
    autoSlide: false,
    playSpeed: 1500,
    preload: false,
    thumbnail: false,
});

Settings

{   

    // Optional property, Set a namespace for css class
    namespace: 'popup',
    
    //Optional property, set transition effect, it works after you load specified theme file
    theme: 'default',

    //Optional property, if 'none',we can close at once needn't to give time to render css3 transition
    modalEffect: 'none',

    //Optional property, if true and when the target elements has class<code>namespace + '-container'</code>, it's can be closed.
    winBtn: true,

    //Optional property, if true, the keyboard control is activated
    keyboard: true,

    //Optional property, if true, the images will auto slide
    autoSlide: false,

    //Optional property,  set the interval time between one image and anther
    playSpeed: 1500,

    //Optional property, if true, the next image will be loaded
    preload: false,

    //Optional property, set the parameters for ajax
    ajax: {
        render: function(data) {
            return $(data);
        },
        options: {
            dataType: 'html',
            headers: {
                 popup: true
            }
        }
    },

    //Optional property, set the parameters for swf
    swf: {
        allowscriptaccess: 'always',
        allowfullscreen: 'true',
        wmode: 'transparent',
        },

    //Optional property, set the parameters for html5
    html5: {
        width: "100%",
        height: "100%",
        preload: "load",
        controls: "controls",
        poster: '',
        type: {
            mp4: "video/mp4",
            webm: "video/webm",
            ogg: "video/ogg",
        },
        source: null
    },

    //Optional property, if true, the component of thumbnails can be activation
    thumbnail: false,

    //set the template
    tpl: {
        overlay: '<div class="popup-overlay"></div>',
        container: '<div class="popup-wrap">' + '<div class="popup-container">' + '<div class="popup-content-wrap">' + '<div class="popup-content-holder">' + '<div class="popup-content">' + '</div>' + '<div class="popup-infoBar">' + '<div class="popup-title"></div>' + '<span class="popup-counter"></span>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>',
        loading: '<div class="popup-loading">loading...</div>',
        close: '<button title="Close" type="button" class="popup-close">x</button>',
        next: '<button title="next" type="button" class="popup-navigate popup-next"></button>',
        prev: '<button title="prev" type="button" class="popup-navigate popup-prev"></button>'
    }
}

Public methods

jquery popup has different methods , we can use it as below :

// start to activate
$(".popup-image").popup("open");

// loading the target element
$(".popup-image").popup("goto");

// go to next
$(".popup-image").popup("next");

// go to prev
$(".popup-image").popup("prev");

// close the target element
$("popup-image").popup("close");

Event / Callback

• popup::init: trigger when popup initilize
• popup::create: trigger when the framework of popup is created
• popup::close: trigger when popup is going to cloing
• popup::change: trigger when popup is going to changing
• popup::resize: trigger when the size of viewport is changed
• popup::preload: trigger when popup need to preload

how to use event:

$(document).on('popup::init', function(event,instance) {
    // instance means current popup instance 
    // some stuff
});

Browser support

jquery-popup is verified to work in Internet Explorer 7+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser and others) is coming soon.

Changes

Version	Notes
0.3.x	(compare) add thumbnails function
0.2.x	(compare) add autoside function
0.1.x	(compare) add keyboard function
...	...

Author

amazingSurge

License

jQuery-popup plugin is released under the GPL licence.