Tuesday, 10 September 2013

speed-popup-jquery-plugin

Demo Speedo Popup WordPress Plugin | Agapa Studio

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

default theme

Preview this skin
blueglass theme

blueglass theme

Preview this skin
clouds theme

clouds theme

Preview this skin
dark theme

dark theme

Preview this skin
darkglass theme

darkglass theme

Preview this skin
ignito theme

ignito theme

Preview this skin
light theme

light theme

Preview this skin
lightbox theme

lightbox theme

Preview this skin
metro theme

metro theme

Preview this skin
notify-glass theme

notify-glass theme

Preview this skin
trap theme

trap theme

Preview this skin
snow theme

snow theme

Preview this skin
rain theme

rain theme

Preview this skin
winter theme

winter theme

Preview this skin
1
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 css3 effect image

zoomIn

Show effect
zoomOut css3 effect image

zoomOut

Show effect
flipInHor css3 effect image

flipInHor

Show effect
flipInVer css3 effect image

flipInVer

Show effect
bounceIn css3 effect image

bounceIn

Show effect
pageTop css3 effect image

pageTop

Show effect
flyIn css3 effect image

flyIn

Show effect
fadeInScale css3 effect image

fadeInScale

Show effect
scaleDown css3 effect image

scaleDown

Show effect
fadeSpin css3 effect image

fadeSpin

Show effect
pulse css3 effect image

pulse

Show effect
leftSpeedIn css3 effect image

leftSpeedIn

Show effect
rollIn css3 effect image

rollIn

Show effect
rollOut css3 effect image

rollOut

Show effect
1
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

Example 2

incerto

Show effect
Example 2

slideLeft

Show effect
Example 2

slideRight

Show effect
Example 2

slideTop

Show effect
Example 2

slideBottom

Show effect
Example 2

slideZoom

Show effect
1
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,
            href: 'http://www.codecanyon.net/'
        });
    });
</script>
Open an swf:
1
2
3
4
Open an image:
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