Superfast lightweight javascript gallery library

Nowadays, there are a lot of jQuery plugins for everything which causes slow down your website. Also, there are a lot of jQuery gallery libraries for image slideshows.

Which are very slow in processing your images and converting them into fancy and user-friendly galleries. For this purpose, I made a super fast and lightweight ( ~ 5kb ) javascript library for image sliding, without jQuery required.

GalleryJS is a useful javascript library for fast-creating image slideshows. There is no need to configure CSS and image paths, only load the library, and that’s it.

Images for the slideshow, you can load with HTML or pass an array of image URLs.

HTML

<div id="galleryjs">
	<img src="http://www.magic4walls.com/wp-content/uploads/2013/12/wet-lady-bug-nature-animal-small-cute-1920x1080.jpg" alt=""/>
	<img src="http://www.wallpaper1080hd.com/Picture/allimg/c110430/130411U50F110-23G0.jpg" alt=""/>
	<img src="http://www.wallpaper1080hd.com/Picture/allimg/130110/co130110202037-0.jpg" alt=""/>
	<img src="http://static.wallpedes.com/wallpaper/nature/nature-animals-hd-tera-wallpaper-nature-animal-wallpaper-hd-download-for-mobile-1024x768-desktop-pc-full-size-3d-images.jpg" alt=""/>
	<img src="http://static2.wallpedes.com/wallpaper/wallpapersu/wallpapersu-cute-turtle-reptile-photography-nature-animal-rocks-nature-animal-wallpaper-hd-download-for-mobile-1024x768-desktop-pc-full-size-3d-images.jpg" alt=""/>
</div>

or init empty container and pass images from an array

<div id="galleryjs">
</div>

There are a few config parameters.

• images – an array of images URLs
• autoplay – true or false. If this parameter is set to true, the images will automatically change. The default value is true
• autoplay_delay – if the previous parameter is true, you can set this parameter in milliseconds. The default value is 4000 or 4 seconds.
• show_thumbs – true or false. If this parameter is set to true, GalleryJS will generate small clickable thumbnails
• thumbs_type – you can choose between hover and fixed. Default is hover, which means the thumbnail bar will be shown when the user’s pointer is over the big image. The default value is hover
• container – CSS selector for the container. Default value is #galleryjs

Basic usage

galleryjs.show();

pass images from parameter

galleryjs.show({
    'images' : [’path/to/image1.jpg’, ’path/to/image2.jpg’] });

GalleryJS with more config parameters

galleryjs.show({
    'autoplay': true, //true or false
    'autoplay_delay': 4000, 
    'show_thumbs' : true, //true or false to hide thumbanils
    'thumbs_type':'hover' //hover or fixed
});

Also, for navigation, you can use keyboard arrows to change images

galleryjs.show({
'images':['http://www.magic4walls.com/wp-content/uploads/2013/12/wet-lady-bug-nature-animal-small-cute-1920x1080.jpg','http://www.wallpaper1080hd.com/Picture/allimg/c110430/130411U50F110-23G0.jpg','http://www.wallpaper1080hd.com/Picture/allimg/130110/co130110202037-0.jpg','http://static.wallpedes.com/wallpaper/nature/nature-animals-hd-tera-wallpaper-nature-animal-wallpaper-hd-download-for-mobile-1024x768-desktop-pc-full-size-3d-images.jpg','http://static2.wallpedes.com/wallpaper/wallpapersu/wallpapersu-cute-turtle-reptile-photography-nature-animal-rocks-nature-animal-wallpaper-hd-download-for-mobile-1024x768-desktop-pc-full-size-3d-images.jpg'],
'container':'div#galleryjs'
});

Source code for this library you

can find it at my github, and example at my jsfiddle

Hope this article will be useful to you!

Advertisement