Superfast lightweight javascript gallery library

Nowadays, there is a lot of jQuery plugins for everything which causes slowdown your website. Also, there is a lot of jQuery gallery libraries for image slideshow.

Which are very slow in processing your images and converting them into fancy and user friendly galleries. For this purpose, i made a superfast 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 array of image urls.

galleryjs

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=""/>
</idv>

or init emty container and pass images from array


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

There is few config parameters.

  • images – a array of images urls
  • autoplay – true or false. If this parameter is set to true, the images will automatically change. Default value is true
  • autoplay_delay – if previous parameter is true, you can set this parameter in milliseconds. 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, that means the thumbnails bar will be show when user’s poiner is over big image. Default value is hover
  • container – css selector for 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 user 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 at my github, and example at my jsfiddle

Hope this article will be useful to you!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s