Wordpress Plugin

jQuery Menu Effect Plugin

There are 6 effects contain in this small plugin that i created casually for the purpose for making the overall menu bar more interesting. The plugin itself is quite easy to use but it may contain many unnecessary code since you will only be using a single effect of the plugin, others will be just there to sum up the size of the file. Therefore, if you would like to only use one of the effect in this small plugin, just remove the other effect located in the plugin. Feel free to see how each effect work, you can also search this site for the how-to tutorial on each of the effect in jQuery.

Information

  • Current version: 1.0
  • Licensing: MIT

Browser Tested

  • Firefox 3.0.7
  • IE 7.0.5730.13
  • Opera 9.64
  • Google Chrome
  • Safari

Dependencies

  • jQuery 1.31

Documentation

I will keep the documentation simple, each method will have certain parameter that can be adjust such as speed of the effect and etc. by default, all these effect already have their own default values. Therefore, without any changes you can also call it out by stating its method.

There are 6 effects altogether.

  1. OthersFade()
  2. OthersJump()
  3. OthersBlink()
  4. OthersRollUp()
  5. OthersRollDown()
  6. OthersVibrate()

Each effect can be viewed on the demo page.  In order to call each effect, you will just have to do the following,


$("div#menu1 ul#main li").OthersFade();
$("div#menu2 ul#main li").OthersJump();
$("div#menu3 ul#main li").OthersBlink();
$("div#menu4 ul#main li").OthersRollUp();
$("div#menu5 ul#main li").OthersRollDown();
$("div#menu6 ul#main li").OthersVibrate();

bear in mind that the selection on jquery must be pointing at the element '

  • ' and the parameter of each effect is stated below,

    OthersFade()

    • startOpacity: 1, //the start visibility
    • hoverOpacity: 0, //the hover visbility
    • duration: 2000  //the effect duration to reach hover opacity

    OthersJump()

    • jumpHeight: 15, //how height it jump
    • jumpDirection: 0, //'0' jump upwards, '1' jump downwards
    • duration: 100  //duration of the effect

    OthersBlink()

    • brightness: 0.5 //the quickness of the effect
    • duration: 100 //duration of effect

    OthersRollUp()

    • duration: 1000 //speed of effect

    OthersRollDown()

    • duration: 1000 //speed of effect

    OthersVibrate()

    • interval: 30,  // the start interval of each vibration
    • duration: 1000, // the duration of the vibration
    • shake: 3 //the area that the vibration will be moving

    Support

    • Please post bug reports and other contributions (enhancements, features, etc.) to [email protected] and i will try to get back to you asap. You can comment below to seek help too.
    • Any additional effect you would like to have in this plugin, please comment below or email me so that i can add them up.
    • There are a lot of how-to effect in this particular site, feel free to search for it and learn up yourself to get this effect on your own plugin

    Donation

    [donate]

    Update

    • initial released

    File

    Example of usage

    interval: 30,
    duration: 1000,
    shake: 3

    • jQuery Plugin: RAWR! Image Effect Gallery (RIEG)

    RAWR image effect gallery(RIEG) is a flexible and fully customize image gallery which can be adjusted to fill your need. It is design so that it is simple to use without much complexity on the usage of the plugin. Currently, RIEG plugin provides 7 fixed and a custom effect with different combination of easing which can be configured within the plugin using George easing plugin. RIEG is currently released on alpha testing and i will try to update it in the future with more effect and feature.

    Information

    • Current version: 1.0 (Alpha)
    • Licensing: MIT

    Browser Tested

    • Firefox 3.0.7
    • IE 7.0.5730.13
    • Opera 9.64
    • Google Chrome
    • Safari

    Dependencies

    • lightbox by Warren Krewenki (optional),
    • Easing plugin by George McGinley Smith
    • jQuery 1.31

    Documentation

    Here listed the entire variable you can use to customize RIEG. There are some example which should be easy enough to understand how to use this plugin.

    1.0 Example

    All you need is a HTML tag which should be placed on the bottom of your HTML file.

    <div id="rawr">
<img id="gallery" src="images/start.jpg"/></div>
</div>

    import all the dependency library,plugin and stylesheet

    <script type="text/javascript" src="js/library.js"></script>
<script type="text/javascript" src="js/jquery.RIEG.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

    Finally, initialize RIEG. (click on plain text for better view)

    $("#gallery").RIEG({
url: [
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/hanging-laundry-1203294-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/madidi-trees-646088-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/j/jellyfish-swarm-palau-131157-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/s/shark-kingman-reef-1166392-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/havasu-creek-waterall-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/polar-bears-svalbard-1205962-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/pictured-rocks-lakeshore-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/hibiscus-petals-758680-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/swirling-aurora-754878-sw.jpg",
"http://gallery.photo.net/photo/6922516-md.jpg",
"http://gallery.photo.net/photo/6823111-md.jpg",
"http://gallery.photo.net/photo/7360351-md.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/v/volcano-winter-521567-sw.jpg",
"http://www.studio7designs.com/_media/images/photography_portfolio_01.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/mangroves-bali-1047803-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/arctic-rainbow-nicklen-673279-sw.jpg",
"http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/sedimentary-slope-a2wd32-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/green-landscape-haas-1093772-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/suruga-bay-doubilet-101053-sw.jpg",
"http://photo.net/photo/pcd0787/san-galgano-19.4.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/cherry-blossom-tree-monument-720322-sw.jpg",
]
});

    This is the simplest way to initialize RIEG without adjusting the default setting. You can adjust the setting according such as this one which change the screen size and effect. (click on plain text for better view)

    $("#gallery").RIEG({
url: [
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/hanging-laundry-1203294-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/madidi-trees-646088-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/j/jellyfish-swarm-palau-131157-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/s/shark-kingman-reef-1166392-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/havasu-creek-waterall-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/polar-bears-svalbard-1205962-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/pictured-rocks-lakeshore-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/hibiscus-petals-758680-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/swirling-aurora-754878-sw.jpg",
"http://gallery.photo.net/photo/6922516-md.jpg",
"http://gallery.photo.net/photo/6823111-md.jpg",
"http://gallery.photo.net/photo/7360351-md.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/v/volcano-winter-521567-sw.jpg",
"http://www.studio7designs.com/_media/images/photography_portfolio_01.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/mangroves-bali-1047803-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/arctic-rainbow-nicklen-673279-sw.jpg",
"http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/sedimentary-slope-a2wd32-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/green-landscape-haas-1093772-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/suruga-bay-doubilet-101053-sw.jpg",
"http://photo.net/photo/pcd0787/san-galgano-19.4.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/cherry-blossom-tree-monument-720322-sw.jpg",
],
effect: "zoom",
inEasing:"linear",
outEasing: "linear",
duration: 500,
screenW: screen.width/2,
screenH: screen.height/2.2

});

    2.0 Section Description

    description file on each section

    3.0 RIEG API

    api in Excel SpreadSheet

    Variable name Type Default Value Limitation Description
    url array string none IMAGE PATH ONLY array of string used in RIEG
    loadingURL string http://www.sofa-framework.org/design/loading_wh.gif IMAGE PATH ONLY loading image used in RIEG
    flipWidth int 0 SCREEN WIDTH width length of flip effect
    fadeIn decimal 1 1 fade in opacity amount
    fadeOut decimal 0 1 fade out opacity amount
    zoomW int 10 SCREEN WIDTH zoom width
    zoomH int 10 SCREEN HEIGHT zoom height
    effect string slideRight slideRight
    slideLeft
    slideUp
    slideDown
    custom
    flip
    zoomfade    		 This is case sensitive, only the following limitation are allow
    inEasing string easeInBounce SECTION 3.0 This is case sensitive, only the following limitation are allow
    outEasing string easeOutBounce SECTION 3.0 This is case sensitive, only the following limitation are allow
    customLeft int 0 INTEGER ONLY css left
    customTop int 0 INTEGER ONLY css left
    customWidth int 0 INTEGER ONLY css width
    customHeight int 0 INTEGER ONLY css height
    duration int 1000 INTEGER ONLY duration of animation effect
    screenH int 400 INTEGER ONLY image screen height, can use mathematical calculation
    screenW int 600 INTEGER ONLY image screen width, can use mathematical calculation
    thumbnailH int 30 INTEGER ONLY thumbnail height, can use mathematical calculation
    thumbnailW int 30 INTEGER ONLY thumbnail width, can use mathematical calculation
    rawrgallery string #rawr STRING ONLY css id value
    galleryContainer string #rawr-gallery-container STRING ONLY css id value
    navigation string #rawr-images STRING ONLY css id value
    navRight string #rawr-right STRING ONLY css id value
    navLeft string #rawr-left STRING ONLY css id value
    mainNav string #rawr-nav STRING ONLY css id value
    mainControl string #rawr-control STRING ONLY css id value
    controlPrev string #rawr-prev STRING ONLY css id value
    controlNext string #rawr-next STRING ONLY css id value
    controlNav string #rawr-nav-visibility STRING ONLY css id value
    controlSlideShow string #rawr-slideshow STRING ONLY css id value
    controlPrevDesc string Previous STRING ONLY description fo previous icon
    controlNextDesc string Next STRING ONLY description for next icon
    controlNavDesc string Disable Navigation Bar STRING ONLY description for navigation icon
    controlSlideShowDesc string Start/Stop Slideshow STRING ONLY description for slideshow icon
    navEasing string linear SECTION 3.0 easing functionality of navigation bar
    navSpeed int 1500 INTEGER ONLY speed of animation of the navigation bar
    nav_border string #787878 solid 1px STRING ONLY CSS declaration for border
    gborderSize int 10 INTEGER ONLY the frame size of the gallery
    gborderColor string #F0F0F0 STRING ONLY the color of the gallery border, white in default
    navLeftButton string images/left.png IMAGE PATH ONLY The navigation left arrow button
    navRightButon string images/right.png IMAGE PATH ONLY The navigation right arrow button
    nav_screenH int 50 INTEGER ONLY the navigation screen height, can use mathatical calculation
    nav_screenW int 500 INTEGER ONLY the navigation screen width, can use mathatical calculation
    elementHeight int 20 INTEGER ONLY controller icon height on the top right hand corner
    elementWidth int 20 INTEGER ONLY controller icon width on the top right hand corner
    controlWidth int 60 INTEGER ONLY controller container width
    controlHeight int 20 INTEGER ONLY controller container height
    controlSlideShowInPath string images/play.png IMAGE PATH ONLY controller icon play
    controlSlideShowOutPath string images/stop.png IMAGE PATH ONLY controller icon stop
    controlPrevPath string images/prev.png IMAGE PATH ONLY controller icon previous
    controlNextPath string images/next.png IMAGE PATH ONLY controller icon next
    navigationShow string visible visible/hidden to enable visibility of the navigation bar located on the bottom of RIEG
    autoSlideShow boolean FALSE TRUE/FALSE the slideshow will not be on in default
    slideShowSpeed int 4000 INTEGER ONLY the speed of the slide show
    popOut boolean TRUE TRUE/FALSE whether to add on click function on the image to display the original size image
    imageNext boolean FALSE TRUE/FALSE whether to add in the event on the image so that when clicked it will go to the next image

    4.0 Easing capability

    This is taken from George McGinley Smith easing plugin. It is case sensitive.

    • swing
    • linear
    • easeInQuad
    • easeOutQuad
    • easeInOutQuad
    • easeInCubic
    • easeOutCubic
    • easeInOutCubic
    • easeInQuart
    • easeOutQuart
    • easeInOutQuart
    • easeInQuint
    • easeOutQuint
    • easeInOutQuint
    • easeInSine
    • easeOutSine
    • easeInOutSine
    • easeInExpo
    • easeOutExpo
    • easeInOutExpo
    • easeInCirc
    • easeOutCirc
    • easeInOutCirc
    • easeInElastic
    • easeOutElastic
    • easeInOutElastic
    • easeInBack
    • easeOutBack
    • easeInOutBack
    • easeInBounce
    • easeOutBounce
    • easeInOutBounce

    Support

    • Please post questions to the jQuery discussion list, putting [validate] into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a test page makes it much more likely that you get an useful answer in no time. Alternatively, you can also post your question on the update post or email me at [email protected].
    • Please post bug reports and other contributions (enhancements, features, etc.) to [email protected] and i will try to get back to you asap. You can also try post it on jQuery plugin page.

    Donation

    [donate]

    Update

    • Updated test site to include fade effect.

    File