USAGE
Add this js file in the head of your html page with the right path
and add the css files with the right path to your html page
add 2 attributes to your links where you will click to popup
data-flip-popup=””
and the name of the div you want to popup for example
rel=”pop1″
the link will be something like this
now customize the popup addding the settings in json format
simply add this div within body tag and change the values of properties
Pay attention to the quotation marks in the settings Each line should be like this
“popupwidth”:”600px”,
except for the ones with number like this
“speed”:0.5,
it’s better these properties should be the same
“albumLabel”: “Image %1 of %2”,
“alwaysShowNavOnTouchDevices”: false,
“fadeDuration”: 500,
“fitImagesInViewport”: true,
“positionFromTop”: 50,
“resizeDuration”: 700,
“showImageNumberLabel”: true,
“wrapAround”: false,
if you want to change the color of the text in the popup you should change this
“color”: “#fff”,
for the color of the X for closing the popup you should change this
“xcolor”:”#ff5599″,
for the lightbox color this
“lightboxcolor”:”#33ffff”,
for the popup box color this
“popupboxcolor”:”#ff00cc”,
for the background color this
“backgroundcolor”:”#33ffff”,
for the radius of border this
“border_radius”:”25px”,
for the speed of transition this
“speed”:0.5,
for the color of the shadow of the popup this
“shadowcolor”:”#ff5599″,
for the shadow size this:
“shadowsize”:”0px 0px 25px 5px”,
for the font of the popup text this
“font_family”:”arial”,
for the popup width and height these
“popupwidth”:”600px”,
“popupheight”:”400px”,
for the ajax request to load data this
“loadurl”:””,
for the image you want to load inside the popup add the image url here
“imageurl”:”http://image.url.example”
that’s all, enjoy!