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

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

Comments are closed.