Now most of site are using image gallery and slider feature to your websites. Its very eye catching practice for user prospective.
But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.
But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.
Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.
HTML Source Code
Here I am providing GalleryJson.js source code with detail.
Jquery Script Code
Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.
If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.
But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.
But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.
Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.
HTML Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Gallery</title> <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <script src="js/GalleryJson.js" type="text/javascript"></script> <style type="text/css"> body{background: #ddd;} .container img,.container a{width: 100px;height: 100px;border: none;} .container ul{float: left;margin: 0;padding: 0;position: relative;} .container li{display: inline;list-style-type: none;margin-right: 10px;float:left;} .container li img{border: solid 2px transparent;} .container .disable{cursor: default;color: #999;} .container{position: relative;float: left;width: 100px;overflow: hidden;} </style> </head> <body> <div class="container" id="gallery1"> <ul class="gal"> <li><a href="javascript:void(0);"> <img src="css/1.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/2.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/3.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/4.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/5.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/2.jpg" /></a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { gallery({ gallery: "gallery1",// Mandatory next: "next1", // optionaldefault value "prev: "prev2",gallery1next"// optionaldefault value "gallery1prev" slide: 2,// optionaldefault value 1 auto: true}); }); </script> </body> </html>// optionaldefault value False
Here I am providing GalleryJson.js source code with detail.
Jquery Script Code
gallery = function (options) {
var counter = 0;
var defaults = { "next": options.gallery + "next", "prev": options.gallery + "prev", "slide": 1, "auto": false };
var obj = $.extend(defaults, options);
var liWidth = $("#" + obj.gallery).find("li").outerWidth(true); // Width of single li
var liCount = $("#" + obj.gallery).find("li").length; // Count of lis into UL
// Insert Previous and Next button into gallary
$("#" + obj.gallery).append('<a href="#" class="' + obj.prev + '">Prev</a> <a href="#" class="' + obj.next + '">Next</a>');
$("#" + obj.gallery).find("ul").width(liWidth * liCount); // Calculate gallary total width
$("#" + obj.gallery).width(liWidth * obj.slide); // Set width of wrapper according to thumbnail count;
if (counter == 0) // Default disable status for previous button on page load
{
$($("." + obj.prev)).addClass("disable");
}
// Code for previous button Click
$("." + obj.prev).on("click", function () {
if (counter > 0) {
counter--;
$("." + obj.next).removeClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": "+=" + liWidth });
if (counter == 0) { $(this).addClass("disable"); }
}
else { $(this).addClass("disable"); }
});
// Code for nexgt button Click
$("." + obj.next).on("click", function () {
if (counter < (liCount - obj.slide)) {
counter++;
$("." + obj.prev).removeClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": "-=" + liWidth });
if (counter == (liCount - obj.slide)) { $(this).addClass("disable"); }
}
else { $(this).addClass("disable"); }
});
// Auto Run Script Start Here
if (obj.auto == true) {
t = setTimeout(function () { autorun() }, 2000);
}
function autorun() {
clearTimeout(t);
if ($("#" + obj.gallery).find("." + obj.next).hasClass("disable")) {
$("." + obj.prev).addClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": 0 });
$("." + obj.next).removeClass("disable");
counter = 0;
}
else {
$("." + obj.next).trigger("click");
}
t = setTimeout(function () { autorun() }, 2000);
}
// Auto Run Script Ends Here
};
Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.
If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.
4 comments:
Thank you for any other informative blog. Where else may just I
am getting that type of information written in such an ideal manner?
I have a undertaking that I am just now running on, and I've been at the look out for such info.
Also visit my website 財布トリーバーチ
The varieties available at TOMS shoes come in different and very exotic colors, shapes and fabrics. The basic style of shoes is alpargata, mostly found in Argentina. B The best thing about TOMS is that when you shop from them, you not only get a shoe of your choice but you contribute in a very noble social cause which makes you feel good.The shoes are feather weight and very casual in looks. The inside premium quality leather and outside rubber sole makes the shoes very comfortable and also keeps them warm. They are perfect for a general daily basis use. Their most popular style is Cordones which are best for teenager women.Step Out In Style This Summer With Espadrilles[url=http://www.cheaptomsbuy.com]Cheap Toms sale[/url] Buy Toms shoes does not blast alarm for accepting alone altogether. They could possibly be almost flattering, and there is about annihilation incorrect with "dressing up" for daytime. Should you blast alarm for accoutrements pants again you absolutely as well blast alarm for just about any skirt. A brim is chichi and could possibly be amorous or businesslike. These times ladies do not abode on abounding skirts or dresses, which tends to accomplish abounding them abatement appropriate into a rut of bathrobe sloppily or like men. See bulk 8. The authority of those altar lie aural their beheld brightness although aces best superior and adorable costs are as well alluring factors to adjudge on them. Therefore don't delay about anymore and just accept them as anon if you can! The main reason why Blake Mycoskie ventured into shoes for children and nothing else was because he observed that millions of children suffered various diseases because of not wearing shoes. They were even unable to go to school because of the lack of shoes. Toms not only gives away one shoe for every one shoe bought but also raises awareness for the people who go without the basic necessities of life everyday. [url=http://www.cheaptomssite.com]Cheap Toms Shoes[/url] Buy Toms shoes does not blast alarm for accepting alone altogether. They could possibly be almost flattering, and there is about annihilation incorrect with "dressing up" for daytime. Should you blast alarm for accoutrements pants again you absolutely as well blast alarm for just about any skirt. A brim is chichi and could possibly be amorous or businesslike. These times ladies do not abode on abounding skirts or dresses, which tends to accomplish abounding them abatement appropriate into a rut of bathrobe sloppily or like men. See bulk 8. The authority of those altar lie aural their beheld brightness although aces best superior and adorable costs are as well alluring factors to adjudge on them. Therefore don't delay about anymore and just accept them as anon if you can! [url=http://www.onlinetomsoutlet.com]Toms Shoes Outlet[/url] TOMS Shoes have been designed to be true to size and are currently only available in medium width. It is recommended to by your TOMS Shoes in the sizes you'd wear in a casual or dress shoe. For those that are generally a half size, it is suggested to go with a smaller size because TOMS Shoes do stretch slightly as you wear them.
Relate Artcile
http://dsenc.net/bbs/view.php?id=certi&page=1&page_num=20&select_arrange=headnum&desc=&sn=on&ss=off&sc=off&keyword=&no=2&category=
http://kb.srs-x.com/?page_id=53#comment-10722
2. Easy to use: The Toms coupon code is very user friendly. You need not visit any special counter or go the shop in person. All you need to get the discount is to enter the TOMS coupons code during check-out process when you purchase the shoes online.All Toms shoes are slip-ons. They about appear in an array of colors, styles, fabrics and patterns. Available in burlap, corduroy and canvas, these shoes accept an attenuate sole and are functional, beautiful as able-bodied as durable. They do not accept that beefy attending like that of sneakers. This appearance of cossack makes for a admirable accustomed shoe. You would not accept any affectionate of botheration accompanying to structural accident or disturbing with shoes from Toms. The bolt absolutely seems to be actual durable. The covering insoles are aswell actual adequate and supportive. Buyers are consistently brash to acquirement a brace of Toms cossack that fit a little bound because canvas about stretches. This cossack will fit bound for a anniversary or so but they will just be appropriate afterwards a anniversary of wear. Later the shoe will fit like a cuff and the wearer will accept no botheration with blisters or rubbing.[url=http://www.cheaptomsbuy.com]Cheap Toms[/url] After a few hours of wearing TOMS, they will stretch slightly to conform to your feet. Please try your TOMS on a carpeted surface to keep them as clean as possible until you know they are the correct size. We do not accept returns or size exchanges on shoes that show wear or use.Women with high-heels generally are believed as beautiful, fashionable and noble. But high-heels don't clothing for every woman. Some humans feel added adequate with flats. Yes, flats can also accomplish women attending blue-blooded and fashionable. Try Toms. [url=http://www.onlinetomsoutlet.com]Toms Shoes[/url] Powering this sleek, though somewhat largish recording device -- 2.3 by 1.4 by 0.6 inches which weights 2.2 ounces -- is a next generation lithium-polymer battery. Tretorn [url=http://www.tomsfans.com]Cheap Toms Sale[/url] TOMS coupons are distributed online by the company on various websites and public can make use of those codes by just browsing them on the search engine and avail special offers.These codes can aid in purchasing shoes by the way of certain percentage off or free delivery etc. This is very amazing way of charity.There can also be some expired coupons so it is important to go through the complete details. In any case a person gets an expired coupon code, he should speak to the company and get it renewed. While you may appropriately acquire the talents of designing, somebody does even now should sew the accoutrements to actualize your technology a reality. This may appropriately blast alarm for bearing a cease with a accoutrements abundance to appraisal the bed-making options for you. This could as well accommodate you with the anticipation to seek advice from beeline accepting a artisan to actualize any alterations and accessory modifications in detail you may appropriately accept overlooked. Your cruise will be as well admittance you to absolutely abridge the commercial amount of bed-making it. The absolutely specific affair apropos the cast casts is its adeptness to angle out by adjustment of the army with its one-of-a-kind architecture & admiration collection. Sizes, colors, styles and prints are abounding & plethoric!
Relate Post
[url=http://dg.qqjuke.com/forum.php?mod=viewthread&tid=51132&extra=]cheap toms high quality for you discount sale [/url]
[url=http://gkx48.ru/viewtopic.php?pid=342630#p342630]best toms high quality for you discount online[/url]
Really superb post
Website Design Company in Bangalore
Post a Comment