This is text that will be in a
slide out drawer
from the left of the page
OPEN
JellyBox WordPress Plugin
The jellybox WordPress plugin gives the power of animated text and boxes with an easy to use short code.
All examples on this page are built using the jellybox short code
Note: All margins and minor alignments show in the source code presented on this page are based on the style settings of the current WordPress theme. If you copy the code from this page then expect to also make minor adjustments to the to margins and spacing in accordance with your own theme.
Wow, now that I’m using jellybox I can display text in line at any angle without the slightest effort. It’s so cool!
Show the code for the line above
...line at [jellybox width="70" height="20" angle="25" inline="yes"]any angle[/jellybox] without the slightest effort.
In line text animation is also a breeze.
Show the code for the line above
In line text [jellybox width="70" height="20" angle="25" deltaangle="-50" gospeed="500" returnspeed="500" interval="500" inline="yes"]animation[/jellybox] is also a breeze.
Show the code for the panel on the left side of the page
<div style="position:fixed; left:-20px; top:25%; height:30%;">
[jellybox height="400" width="60" gospeed="500" returnspeed="200" deltawidth="200" class="jellyboxPanel" gocontrol="onmouseover" returncontrol="onmouseout"]
<p style="margin-left:70px; margin-top:30px; white-space: nowrap;">This is text that will be in a<br />slide out drawer<br />from the left of the page</p>
<p style="margin-left:10px;">OPEN</p>
[/jellybox]
</div>
Show the code for the nerd on the right side of the page
<div style="position:fixed; right:-20px; top:30%; height:50%;">
[jellybox height="500" width="24" gospeed="2000" returnspeed="100" deltawidth="400" deltaleft="-200" deltaangle="15" gotimeout="5000" gocontrol="clock" returncontrol="onmouseover" target="nerd"]
<img style="background:transparent;" id="nerd" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/nerd.png" />
[/jellybox]
</div>
HOVER OVER THIS EXAMPLE
Show the code for this hover box
[jellybox1 height="32" width="600" gospeed="500" returnspeed="500" deltaheight="180" deltatop="-180" class="jellyboxRed" gocontrol="onmouseover" returncontrol="onmouseout"]
<p style="margin-top:-10px; text-align:center;">HOVER OVER THIS EXAMPLE</p>
...Here there is layout code for the four switches...
[/jellybox]
Show the code for one switch
<img src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/g11181.png" />
<div style="margin-top:-80px; margin-left:5px;">
[jellybox height="50" width="50" gospeed="250" returnspeed="250" deltatop="-90" ontoggle="switch1"]
<img src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/g11030.png" />
[/jellybox]
</div>
[raw]
<script type="text/javascript">
function switch1( toggle )
{
var obj = document.getElementById("showswitch1");
obj.jellyboxcontroller.setPosition(0,0,obj.jellydata.angle * -1);
obj.innerHTML = "Switch #1 is ";
if ( toggle )
obj.innerHTML = obj.innerHTML + "ON";
else
obj.innerHTML = obj.innerHTML + "OFF";
}
</script>
[/raw]
Note: The switches above make use of the Raw HTML plugin to make it easy to embed javascript code directly into the page.
Show the code for one of these tilted boxes
[jellybox height="60" width="100" class="jellyboxGreen" id="showswitch1" angle="3"]
[/jellybox]
This box is triggered by clicking the big circle to the left.
This is an example of the nesting ability of jellybox short codes. The most fantastic thing about jellybox is that controls like this even work in Internet Explorer 6, 7 and 8.
This box is triggered by pressing the button below. It will spin when the button is pressed.
Show the code for the box on the left
[jellybox height="110" width="300" gospeed="750" returnspeed="750" deltatop="-130" deltaheight="130" class="jellyboxLightBlue" target="trigger1" shadow="yes" returntimeout="3000"]
[jellybox1 height="120" width="120" gospeed="750" returnspeed="750" deltaangle="-90" target="trigger1"]
<img id="trigger1" style="float: left;" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/circle.png" />
[/jellybox1]
<p style="margin-top:-110px; margin-left:150px;">This box is triggered by clicking the big circle to the left.</p>
<div style="margin-top:40px;"></div>
<hr></hr>
<p>This is an example of the nesting ability of jellybox short codes. The most fantastic thing about jellybox is that controls like this even work in Internet Explorer 6, 7 and 8.</p>
[/jellybox]
Show the code for the box on the right
[jellybox height="110" width="250" gospeed="1000" returnspeed="1000" deltaangle="360" target="clickme" class="jellyboxLightBlue"]
This box is triggered by pressing the button below. It will spin when the button is pressed.<br />
<br />
<br />
<button id="clickme">CLICK ME</button>
[/jellybox]
The animation of this box is controlled by the passing the mouse cursor over the box to the right
The animation of this box is controlled by the passing the mouse cursor anywhere over this box.
Clicking the dial below is an example of the nesting ability of jellyboxes
The animation of this box is controlled by the passing the mouse cursor over the box to the left
Show the code for the box on the left
[jellybox height="150" width="200" gospeed="500" returnspeed="500" deltatop="-20" deltaheight="40" target="myownid" class="jellyboxLightBlue" gocontrol="onmouseover" returncontrol="onmouseout"]
The animation of this box is controlled by the passing the mouse cursor over the box to the right
[/jellybox]
Show the code for the box in the middle
[jellybox height="80" width="200" gospeed="500" returnspeed="500" deltatop="-270" deltaheight="270" id="myownid" class="jellyboxLightBlue" shadow="yes" gradient="none" gocontrol="onmouseover" returncontrol="onmouseout"]
The animation of this box is controlled by the passing the mouse cursor anywhere over this box.
<div style="margin-bottom:60px;"></div>
Clicking the dial below is an example of the nesting ability of jellyboxes
<div style="margin-bottom:20px;"></div>
[jellybox1 height="120" width="120" gospeed="750" returnspeed="750" deltaangle="-90" target="trigger2"]
<img id="trigger2" style="float: left;" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/circle.png" />
[/jellybox1]
<div style="margin-bottom:20px;"></div>
[/jellybox]
Show the code for the box on the right
[jellybox height="150" width="150" gospeed="500" returnspeed="500" deltaleft="-50" deltawidth="100" deltaangle="25" target="myownid" class="jellyboxLightBlue" gocontrol="onmouseover" returncontrol="onmouseout"]
The animation of this box is controlled by the passing the mouse cursor over the box to the left
[/jellybox]
Syntax
[jellybox class="jellyboxBlue" height="100" width="100"] This is the text inside the jellybox [/jellybox]
Nesting Example
[jellybox class="jellyboxRed"...]
[jellybox1 class="jellyboxGreen"...]
[jellybox2 class="jellyboxBlue"...]
[jellybox3 class="jellyboxYellow"...]
[jellybox4 class="jellyboxBlack"...]
[/jellybox4]
[/jellybox3]
[/jellybox2]
[/jellybox1]
[/jellybox]
[jellybox1 class="jellyboxGreen"...]
[/jellybox][jellybox2 class="jellyboxBlue"...]
[/jellybox1][jellybox3 class="jellyboxYellow"...]
[/jellybox2][jellybox4 class="jellyboxBlack"...]
[/jellybox4]
[/jellybox3][/jellybox4]
Up to 5 levels deep
Show the code for the nested spiral
[jellybox class="jellyboxRed" height="250" width="250" deltaangle="10" id="box0" gospeed="300" returnspeed="300" interval="1200"]
<div style="margin-top:10px; margin-left:16px;" align="left">
[jellybox1 class="jellyboxGreen" height="200" width="200" deltaangle="10" target="box0" gospeed="300" returnspeed="300"]
<div style="margin-top:10px; margin-left:16px;" align="left">
[jellybox2 class="jellyboxBlue" height="150" width="150" deltaangle="10" target="box0" gospeed="300" returnspeed="300"]
<div style="margin-top:10px; margin-left:16px;" align="left">
[jellybox3 class="jellyboxYellow" height="100" width="100" deltaangle="10" target="box0" gospeed="300" returnspeed="300"]
<div style="margin-top:10px; margin-left:16px;" align="left">
[jellybox4 class="jellyboxBlack" height="50" width="50" deltaangle="10" target="box0" gospeed="300" returnspeed="300"]
<div align="center" style="margin-top:-24px;">Up to 5 levels deep</div>
[/jellybox4]
</div>
[/jellybox3]
</div>
[/jellybox2]
</div>
[/jellybox1]
</div>
[/jellybox]
| Required | Parameter | Description |
|---|---|---|
| class=”aClassName” | A predefined jellybox class or custom class for the jellybox presentation style. The built-in styles are: jellyboxPanel, jellyboxRed, jellyboxGreen, jellyboxBlue, jellyboxLightBlue, jellyboxYellow, jellyboxBlack |
|
| Yes | height=”99″ | Pixel height of the jellybox. |
| Yes | width=”99″ | Pixel width of the jellybox. |
| angle=”90″ | Starting angle of the jellybox (in degrees). | |
| inline=”yes” | Display the jellybox inline with the current paragraph using SPAN tags (default is ‘NO’ which tells jellybox to use DIV tags). | |
| deltatop=”-20″ | Pixel change to the jellybox “top” to animate. | |
| deltaleft=”-20″ | Pixel change to the jellybox “left” to animate. | |
| deltaheight=”40″ | Pixel change to the jellybox “height” to animate. | |
| deltawidth=”40″ | Pixel change to the jellybox “width” to animate. | |
| deltaangle=”360″ | Pixel change to the jellybox “angle” to animate. | |
| gospeed=”1000″ | Number of milliseconds to run Go animation. | |
| returnspeed=”1000″ | Number of milliseconds to run Return animation. | |
| gocontrol=”onclick” | Event that will trigger Go animation start.Available options are: onclick, onmouseover, onmouseout or clock. If no control is specified the default will be onclick. | |
| returncontrol=”onclick” | Event that will trigger Return animation start.Available options are: onclick, onmouseover, onmouseout or clock. If no control is specified the default will be onclick. | |
| control=”onclick” | Optional short cut to define both gocontrol and returncontrol using a single parameter. | |
| id=”elementID” | Optionally provide your own ID for the jellybox wrapper. | |
| target=”elementID” | Element ID to watch for the control event. If no target is specified the jellybox itself will be the default target. | |
| autostartdelay=”5000″ | Number of milliseconds to wait for the control event before running the Go animation automatically. Unlike the ‘gotimeout’ parameter, this auto start will only occur once after the page loads. | |
| interval=”10000″ | Number of milliseconds to automatically cycle both the ‘Go and Return animations. | |
| gotimeout=”1000″ | Number of milliseconds to wait for the control event before running the Go animation automatically. | |
| returntimeout=”1000″ | Number of milliseconds to wait for the control event before running the Return animation automatically. | |
| ontoggle=”myCallbackFunction” | Javascript callback function to call every time the control event triggers a change in state from Go or Return. | |
| style=”background-color:#ff0000;” | Optional in-line style commands for the jellybox. | |
| cstyle=”background-color:#ff0000;” | Optional in-line style commands for the jellybox container object. |
Get the plugin here
download from here –> JellyBox Shortcode Plugin for WordPress
Hi, Thank you so much for this plug-in! I had two static PNG images I wanted to animate for my homepage and was given an estimate of 4-6 hours of work – $100-$120 – to have the code written (I know some code but can’t write from scratch). Once I installed the plugin it only took me 20 minutes or so to modify it the way I wanted. Thanks so much! These days every penny helps, so you saved me big!! :)
Thanks again!
Best, Jeff
That’s fantastic. I’m glad it worked for you. Thanks.
it doesn’t work on Chinese wordpress/UTF8 sad
Warning: include(shortcodes.php) [function.include]: failed to open stream: No such file or directory in /home/domain/public_html/name/wp-content/plugins/jellybox/jellybox.php on line 2
Warning: include(shortcodes.php) [function.include]: failed to open stream: No such file or directory in /home/domain/public_html/name/wp-content/plugins/jellybox/jellybox.php on line 2
Warning: include() [function.include]: Failed opening ‘shortcodes.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/domain/public_html/name/wp-content/plugins/jellybox/jellybox.php on line 2
I just made a modification to use require_once( ABSPATH . WPINC . ‘/shortcodes.php’ ) instead. That should fix it. Thank you and thanks to Marcel Vigier for the input on this issue.
Hey, Rob
great work! But one thing: It didn’t find “shortcodes.php”. Changed the include in your php to ‘include “/wp-includes/shortcodes.php’;” No “warnings” any more. ;)
Maybe you should define a constant for the default “/wp-include” path…
Best regards, Marcel
I just made a modification to use require_once( ABSPATH . WPINC . ‘/shortcodes.php’ ) instead. That should fix it. Thank you.
Marvelous! Thank you! :D
very jelly super!great plugin
Great PlugIn!!!
i miss animatable colors and transparency though
Hi,
Just a quick follow-up to my last comment. Thanks again for the awesome plug-in! I’m having an issue though with one of my images. I want it coded to pop up from the bottom of the user’s browser when clicked on (it should be partially visible then pop up to full view). I can’t seem to get the placement right though. I want it fixed at the bottom of the browser so it always stays at the bottom – regardless of scrolling or window size. This doesn’t seem to be an issue with my second image – which is fixed to the right/center of the browser. Here is the code for the image in question -
[jellybox height="500" width="424" gospeed="2000" returnspeed="1500" deltaheight="0" deltatop="280" deltaleft="0" deltaangle="0" gotimeout="0" gocontrol="clock" returncontrol="onmouseover" target="nerd2"]
[/jellybox]
Any ideas? I’m sure it’s ridiculously simple but I can’t seem to code a solution.
Any help you can offer would be much appreciated!! :)
Thanks!!
Best, Jeff
Sorry – the code didn’t post properly…
——[jellybox height="500" width="424" gospeed="2000" returnspeed="1500" deltaheight="0" deltatop="280" deltaleft="0" deltaangle="0" gotimeout="0" gocontrol="clock" returncontrol="onmouseover" target="nerd2"]
[/jellybox]——–
Frame the [jellybox...] in a DIV. Something like this:
<div style="position:fixed; bottom:-220px; left:50%;"> -- your [jellybox shortcode] </div>Hi, thanks for your quick response…and sorry for my slow reply. I do have the code framed in a div tag (position; fixed; bottom: 0px) but the problem persists. It’s difficult to judge because I can adjust the numbers/ percentages so it looks fine on my 13inch Macbook Pro…but when I test it on larger screens the image appears absolute and not fixed at the bottom of the web browser. Any ideas? Again, I’m sure it’s something simple I’m missing but I just can’t get the fixed bottom div to function properly with all screen sizes. You can see the image in question on my website – http://www.jeff-hudgins.com (it is the image of me in Ninja Turtles garb with a sewer lid over my head! Hey, I work in animation;)
Any further help would be much appreciated! :)
I want to have an image appear (like the nerd in your example), but then disappear on it’s own after a period of time..and not return. I tried:
[jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" gotimeout="1000" returntimeout=”800" control="clock" target="nerd"] [/jellybox]
But the image does not disappear on its own and always comes back.
Try this:
[jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" autostartdelay="1000" returntimeout="800" returncontrol="clock" target="nerd"]This should work like you want. The only problem remaining is that it will also disappear when ‘clicked.’ I have an update that changes the code to not allow click events when the control is set to ‘clock.’ In the meantime, I hope this gets what you need.
Tried the code – now nothing happens :-( The image does not appear at all.
Here is exactly what I just tested and it’s working for me:
<div style="position:fixed; right:-20px; bottom:30%; height:50%;">[jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" autostartdelay="1000" returntimeout="800" returncontrol="clock" target="nerd2"]
<img style="background:transparent;" id="nerd2" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/nerd.png" />
[/jellybox]
</div>
Ok – I’ll try that … thanks
Used: [jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" autostartdelay="1000" returntimeout=”1000" returncontrol="clock" target="nerd"]
Image appears but does not disappear.
Success! Using your last code. Thank you, Roland
One other question. How to make the image a link? So, when someone clicks on it it goes to the desired page? I tried adding within the [jellybox] code but the image the had a white box around it (the size of the jekkybox.