JQuery Custom Plugin : Image Gallery With Slide Show :
I was creating an image gallery with slide show for my self and then thought to create a JQuery pluging for this so that this code can be reused : ) .This plugin is very easy to use...most simple form of a Image Gallery. If you are new to JQuery , don't want to go for lot of coding and want to put a picture gallery (slide show also)...go for this plugin it's really designed for you :) . Moreover there is lot more possibility to enhance the UI for this and you can give it much better look and feel than I have given .
Plugin Parameters :
| Parameter Name | Description | Default Value | Is Mandatory |
|---|---|---|---|
| FileNames | Takes the pictures/images names separated by "|". If your images are in your application folder just provide the images name which you want to display in slide show. If you have images from web(internet urls) set the ImagesFromWeb parameter as "1" and pass the static urls Ex: 1. 'Blue hills.jpg|Sunset.jpg|Water lilies.jpg|Winter.jpg' (when images are in application folder) 2.'https://img1.blogblog.com/img/promos/picasa.jpg| https://img1.blogblog.com/img/promos/gadgets.png| https://www.plus2net.com/images/top2.jpg'(when images are from web) | "" | Yes |
| FolderName | Specift the folder name in which your pictures are kept . If you don’t want to specify this keep your pictures in ""Slide Show Pics"" folder under the root folder.If your folder is not in root folder specify the folder with path EX: "Pics","Pics\InnerPics" " | "SlideShowPics" | No |
| Width | width for your image gallary/slide show | "500" | No |
| Height | Height for your image gallary/slide show | "400" | No |
| SlideShowInterval | When you start slide show at how much interval the pics should change , specify the time in miliseconds | "1000" | No |
| ImagesFromWeb | set "1" if your images are from web(static urls) | "0" | No |
How To Use This Plugin : Download the plugin from here. Keep jquery.SlideShow.js in your project directly or inside any folder (if you want , you need to refer it on your page not more than that), keep Jquery latest version also in the same folder. If you dont have it download it from here.In my case i have put my plugin and jquery files in Jquery folder . Reference these two JS file in your page with following script tag :
<script src="JQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="JQuery/jquery.SlideShow.js" type="text/javascript"></script>
Now just put a simple div inside a table provide id to it
<table align="center"> <tr> <td ><div id="MyGalary" ></div></td> </tr> </table>
Now in your head add following script :
<script type="text/javascript"> $().ready(function() { $('#MyGalary').SlideShow({
FileNames:'https://research.microsoft.com/en- us/um/people/sumitg/Pictures/Lake-Tahoe/Inside-Emerald-Bay.JPG
|https://research.microsoft.com/en-us/um/people/sumitg/Pictures/Lake-Tahoe/Lake-Tahoe.JPG
|https://research.microsoft.com/en-us/um/people/sumitg/Pictures/Lake-Tahoe/Lake-Tahoe-3.JPG
|https://research.microsoft.com/en-us/um/people/sumitg/Pictures/Lake-Tahoe/Scenary.JPG
|https://research.microsoft.com/en-us/um/people/sumitg/Pictures/Lake-Tahoe/Sand-beach.JPG'
, Width:"600", Height:"600" , ImagesFromWeb:"1", SlideShowInterval:"1000"
});
});
</script>
Don't panic with long File names its because i am taking images from web and urls are long .The plugin also supports to get images from any folder of your application we will discuss it later . Now you are done and your picture gallery is ready . run your html page and see the image gallery :)
I have created a sample for this plugin, If you want to see a working example download it .
Comments
- Anonymous
March 15, 2012
Just getting started with JQuery... this was a useful simple example to learn from - thanks.