iGallery
JavaScript libraries such as MooTools, jQuery, Ext and others can save a lot of time when developing a site. In a recent client project I needed to setup a little image gallery based on a given folder content. iGallery uses MooTools - image resizing done dynamically using phpThumb - resized images are cached. phpThumb offers endless possibilities to process your image incl.:
- Alpha channel mask from mask file
- Auto Contrast / Levels
- Bevel edge
- Blur
- Brightness
- Colorize to target color by amount
- Contrast
- Drop shadow
- Edge Detect
- Flip Horizontal / Vertical
- Gamma
- Grayscale
- Mean Removal
- Negative color
- Reduce Color Depth
- Rounded Corners
- Saturation
- Sepia
- Smooth
- Threshold
- White Balance
Click here to view a demo of iGallery - click here to download the latest version.
Setup your page (HTML, CSS, Javascript)
Put the following code into the head section of your document
Create the layout
Put the following code into your body tags:
The layout of the page can easily be adjusted to match your website by changing the css file.
iGallery
Pictures
Thumbnails
Add pictures
Add all your pictures to your picture folder - no resizing required - this is automagically done using phpThumb.
Initiate the gallery
The gallery is initiated with the following code - see the header section:
window.addEvent('domready', function() {
var ig = new IGallery('gallery');
});
iGallery can be initiated with following options:
options: {
// onLoad: $empty,
// onShow: $empty,
// onNext: $empty,
// onPrev: $empty,
start: false, // false to start with thumbnails OR index to start with image
fadeTime: 300,
stayTime: 2000,
counter: true,
path: '/projects/iGallery/pictures/', // path to your pictures,
pthumb: {
'path': './scripts/pthumb/phpThumb.php/',
'small': 'zc=1;q=95;wp=90;hp=67;wl=90;hl=67;90x67;',
'large': 'far=1;bg=ffffff;q=95;wp=228;hp=228;wl=304;hl=228;304x228;'
},
request: false // either uses AJAX or images already on the page
}, ....
iGallery is provided under MIT License as is and can be downloaded from here.
Donations
If you use iGallery, I'd really like you to donate some little money with paypal to keep the development going.
Note: after donating, you will receive an automatic e-mail notification by PayPal. So if you donate as a company, you should be able to use that notification for your tax records.
