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 nameTypeDefault ValueLimitationDescription
urlarray stringnoneIMAGE PATH ONLYarray of string used in RIEG
loadingURLstringhttp://www.sofa-framework.org/design/loading_wh.gifIMAGE PATH ONLYloading image used in RIEG
flipWidthint0SCREEN WIDTHwidth length of flip effect
fadeIndecimal11fade in opacity amount
fadeOutdecimal01fade out opacity amount
zoomWint10SCREEN WIDTHzoom width
zoomHint10SCREEN HEIGHTzoom height
effectstringslideRightslideRight
slideLeft
slideUp
slideDown
custom
flip
zoomfade
This is case sensitive, only the following limitation are allow
inEasingstringeaseInBounceSECTION 3.0This is case sensitive, only the following limitation are allow
outEasingstringeaseOutBounceSECTION 3.0This is case sensitive, only the following limitation are allow
customLeftint0INTEGER ONLYcss left
customTopint0INTEGER ONLYcss left
customWidthint0INTEGER ONLYcss width
customHeightint0INTEGER ONLYcss height
durationint1000INTEGER ONLYduration of animation effect
screenHint400INTEGER ONLYimage screen height, can use mathematical calculation
screenWint600INTEGER ONLYimage screen width, can use mathematical calculation
thumbnailHint30INTEGER ONLYthumbnail height, can use mathematical calculation
thumbnailWint30INTEGER ONLYthumbnail width, can use mathematical calculation
rawrgallerystring#rawrSTRING ONLYcss id value
galleryContainerstring#rawr-gallery-containerSTRING ONLYcss id value
navigationstring#rawr-imagesSTRING ONLYcss id value
navRightstring#rawr-rightSTRING ONLYcss id value
navLeftstring#rawr-leftSTRING ONLYcss id value
mainNavstring#rawr-navSTRING ONLYcss id value
mainControlstring#rawr-controlSTRING ONLYcss id value
controlPrevstring#rawr-prevSTRING ONLYcss id value
controlNextstring#rawr-nextSTRING ONLYcss id value
controlNavstring#rawr-nav-visibilitySTRING ONLYcss id value
controlSlideShowstring#rawr-slideshowSTRING ONLYcss id value
controlPrevDescstringPreviousSTRING ONLYdescription fo previous icon
controlNextDescstringNextSTRING ONLYdescription for next icon
controlNavDescstringDisable Navigation BarSTRING ONLYdescription for navigation icon
controlSlideShowDescstringStart/Stop SlideshowSTRING ONLYdescription for slideshow icon
navEasingstringlinearSECTION 3.0easing functionality of navigation bar
navSpeedint1500INTEGER ONLYspeed of animation of the navigation bar
nav_borderstring#787878 solid 1pxSTRING ONLYCSS declaration for border
gborderSizeint10INTEGER ONLYthe frame size of the gallery
gborderColorstring#F0F0F0STRING ONLYthe color of the gallery border, white in default
navLeftButtonstringimages/left.pngIMAGE PATH ONLYThe navigation left arrow button
navRightButonstringimages/right.pngIMAGE PATH ONLYThe navigation right arrow button
nav_screenHint50INTEGER ONLYthe navigation screen height, can use mathatical calculation
nav_screenWint500INTEGER ONLYthe navigation screen width, can use mathatical calculation
elementHeightint20INTEGER ONLYcontroller icon height on the top right hand corner
elementWidthint20INTEGER ONLYcontroller icon width on the top right hand corner
controlWidthint60INTEGER ONLYcontroller container width
controlHeightint20INTEGER ONLYcontroller container height
controlSlideShowInPathstringimages/play.pngIMAGE PATH ONLYcontroller icon play
controlSlideShowOutPathstringimages/stop.pngIMAGE PATH ONLYcontroller icon stop
controlPrevPathstringimages/prev.pngIMAGE PATH ONLYcontroller icon previous
controlNextPathstringimages/next.pngIMAGE PATH ONLYcontroller icon next
navigationShowstringvisiblevisible/hiddento enable visibility of the navigation bar located on the bottom of RIEG
autoSlideShowbooleanFALSETRUE/FALSEthe slideshow will not be on in default
slideShowSpeedint4000INTEGER ONLYthe speed of the slide show
popOutbooleanTRUETRUE/FALSEwhether to add on click function on the image to display the original size image
imageNextbooleanFALSETRUE/FALSEwhether 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

One thought on “jQuery Plugin: RAWR! Image Effect Gallery (RIEG)

Comments are closed.