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

Download (Uncompressed)
Changelog
Demo