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!
Darko’s blog 