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.