1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/asPopup.css">
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="../src/jquery-popup.js" type="text/javascript"></script>
2. HTML
<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>
3. JAVASCRIPT
$(".popup-image").popup({
namespace: 'popup',
theme: 'default',
modalEffect: 'none',
winBtn: true,
keyboard: true,
autoSlide: false,
playSpeed: 1500,
preload: false,
thumbnail: false,
});
4. OPTIONS
{
// 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>'
}
}
5. METHODS
jquery popup has different methods , we can use it as below :
// show colorInput panel
$(".popup-image").popup("show");
// close colorInput panel
$(".popup-image").popup("close");
// apply selected color
$(".popup-image").popup("apply");
// go to prev
$(".popup-image").popup("prev");
// close the target element
$("popup-image").popup("close");
6. EVENTS
-
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
});
JS Tutorial
