Speedo Popup for Wordpress
It comes with more than 14 predefined skins, 15 predefined CSS3 transitions and 7 predefined jQuery transitions ready to use in your wordpress site.
The backend gives you almost unending possibilities of making changes and customizing the popup for your needs.
You can create modal windows and use them in a page, widget, or short code. You can further customize the popup in the place you are using by setting advanced options.
14 predefined SKINS
default theme
Preview this skin
blueglass theme
Preview this skin
clouds theme
Preview this skin
dark theme
Preview this skin
darkglass theme
Preview this skin
ignito theme
Preview this skin
light theme
Preview this skin
lightbox theme
Preview this skin
metro theme
Preview this skin
notify-glass theme
Preview this skin
trap theme
Preview this skin
snow theme
Preview this skin
rain theme
Preview this skin
winter theme
Preview this skin1 2 3 4 5 6 7 8 | <script type="text/javascript"> $(document).ready(function(){ $("body").speedoPopup({ theme: "metro" // You can change theme name from here }); });</script> |
You have the posiblity to show a popup using the HTML only.
Don`t forget to include all plugin files! Please read our article about how you can set up jQuery Speedo Popup.
15 predefined CSS3 transitions
zoomIn
Show effect
zoomOut
Show effect
flip
Show effect
flipInHor
Show effect
flipInVer
Show effect
bounceIn
Show effect
pageTop
Show effect
flyIn
Show effect
fadeInScale
Show effect
scaleDown
Show effect
fadeSpin
Show effect
pulse
Show effect
leftSpeedIn
Show effect
rollIn
Show effect
rollOut
Show effect1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> $(document).ready(function(){ $("body").speedoPopup( { css3Effects: "pulse" }); });</script> |
1 | <a href="<ion:theme_url />assets/images/example-1.jpg?css3Effects=pulse"></a> |
The css3Effects will override the effectIn or effectOut in modern browser that supports CSS3 animations.
7 predefined transitions
fade
Show effect
incerto
Show effect
slideLeft
Show effect
slideRight
Show effect
slideTop
Show effect
slideBottom
Show effect
slideZoom
Show effect1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"> // $(document).ready(function(){ $("body").speedoPopup({ effectIn: "metro", effectOut: "metro" }); });</script> |
The css3Effects will override the effectIn or effectOut in modern browser that supports CSS3 animations.
Other features in examples
Open iframe
Open an image
Open google maps
Open swf
Ajax enabled
Iframe example:
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> $(document).ready(function(){ $("body").speedoPopup( { width:850, height:565, useFrame: true, }); });</script> |
Open an swf:
Open an image:
1 2 3 4 | <a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=640&height=360&theme=dark" class="speedo-popup"> Click me to open swf</a> |
1 2 3 4 | <a href="<ion:theme_url />assets/images/example-1.jpg" class="speedo-popup"> Click me to open swf</a> |
No comments:
Post a Comment