Hey guys, today in this post we are going to learn about Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery.
Files we used in this post example:-
imageGallerySlider.html | HTML File | It is used for Create a Custom Image Gallery With a Horizontal Thumbnail Carousel. |
imageGalleryFunction.js |
JavaScript File | It is holding JavaScript click functionality for Show/Hide and Rotate the Image Gallery Slider. |
imageGalleryStyle.css |
Style CSS File | It is used for Image Gallery Slider Alignment. |
jquery-1.7.1.min.js |
JQuery Library Min File | It is a JQuey Library that is provided by JQuery. |
Other post that would you like to learn
Final Output
Download Supported jQuery Library for Custom Banner Rotating Image with Text Slider.
Step 1:- Create HTML File : imageGallerySlider.html
imageGallerySlider.html [HTML File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="http://w3web.net/wp-includes/js/jquery-1.7.1.min.js"></script> <link href="include/imageGalleryStyle.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="include/imageGalleryFunction.js"></script> </head> <body> <div class="galeryMain"> <div class="glrlyImgZoom"> <div class="zoomItem" id="0"><img src="https://www.w3web.net/wp-content/uploads/2020/10/lwc-lookupContactFiture.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="1"><img src="https://www.w3web.net/wp-content/uploads/2020/10/bannerRotateSlideFeature.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="2"><img src="https://www.w3web.net/wp-content/uploads/2020/09/lwcSearchAccount.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="3"><img src="https://www.w3web.net/wp-content/uploads/2020/09/lwcModalPopupFeature.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="4"><img src="https://www.w3web.net/wp-content/uploads/2020/09/insertContactFeatute-lwc.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="5"><img src="https://www.w3web.net/wp-content/uploads/2020/09/insertAccountLwc.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="6"><img src="https://www.w3web.net/wp-content/uploads/2020/09/avoidDuplicateWithApex.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="7"><img src="https://www.w3web.net/wp-content/uploads/2020/09/lastModifiedDate.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="8"><img src="https://www.w3web.net/wp-content/uploads/2020/09/pillFeatureImg.png" width="500" height="335" alt="" /></div> <div class="zoomItem" id="9"><img src="https://www.w3web.net/wp-content/uploads/2020/09/eventApplicationLightning.png" width="500" height="335" alt="" /></div> </div> <div class="thumbImgMain"> <div class="autoHide"> <span class="pre"><a href="#"><img src="images/lft-arrow.gif" width="10" height="35" alt="" /></a></span> <ul class="thumbList"> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/10/lwc-lookupContactFiture.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/10/bannerRotateSlideFeature.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/lwcSearchAccount.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/lwcModalPopupFeature.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/insertContactFeatute-lwc.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/insertAccountLwc.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/avoidDuplicateWithApex.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/lastModifiedDate.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/pillFeatureImg.png" width="75" height="50" alt="" /></a></li> <li><a href="#"><img src="https://www.w3web.net/wp-content/uploads/2020/09/eventApplicationLightning.png" width="75" height="50" alt="" /></a></li> </ul> <span class="nxt"><a href="#"><img src="images/rt-arrow.gif" width="10" height="35" alt="" /></a></span> </div> </div> </div> </body> </html> |
Step 2:- Create JavaScript File : imageGalleryFunction.js
imageGalleryFunction.js [JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
$(document).ready(function(){ $('.galeryMain').glerySlide(); }) $.fn.glerySlide = function() { var thisObj = $(this); var ul = thisObj.find('ul:first'); var size = thisObj.find('li').size(); var liwidth = thisObj.find('li').outerWidth(true); ul.width(size*liwidth); thisObj.find('li:first').find('a:first').addClass('active'); var animation = true; var backSize = '-' + liwidth*6 + 'px'; $('.nxt a').click(function(){ var x1 = $("ul.thumbList li a:eq("+i+")") if(!$(this).is('.active')) { if(animation) { $('ul.thumbList').animate({left:'-=' + liwidth+'px'}, 100, function(){ autoPlay(); }); } } return false; }) $('.pre a').click(function(){ if(!$(this).is('.active')) { if(animation) { $('ul.thumbList').animate({left:'+=' + liwidth+'px'}, 100, function(){ autoPlay(); }) } } return false; }) function autoPlay() { animation = true; if($(ul).css('left')=='0px') { $('.nxt a').removeClass('active'); $('.pre a').addClass('active'); } else if($(ul).css('left')==('-' + liwidth*(size-6) + 'px')) { $('.pre a').removeClass('active'); $('.nxt a').addClass('active'); } else { $('.nxt a').removeClass('active'); $('.pre a').removeClass('active'); } } $('ul.thumbList li a').each(function(i){ $(this).attr('rel', i); }) $('.pre a').addClass('active'); $('.zoomItem').not(':first').hide(); $('ul.thumbList li a').click(function(){ $('.zoomItem').hide(); $('#' + this.rel).show(); $('ul.thumbList li a').removeClass('active'); $(this).addClass('active'); }) var i=0; function autoPlaySlide() { i++; if($('zoomItem:last').css('display')=='block') { i=0; } else if(i > 5) { $('ul.thumbList').animate({left:backSize}, 100); } if($('.zoomItem:last').css('display')=='block') { $('ul.thumbList').animate({left: '0'}, 100); i=0; } $('.pre a').removeClass('active'); $("ul.thumbList li a").removeClass('active'); $("ul.thumbList li a:eq("+i+")").addClass('active'); $('.zoomItem').fadeOut(); $('#' + i).fadeIn(); } var setTimespan = setInterval(function(){autoPlaySlide()}, 3000); $('.pre a, .nxt a, ul.thumbList li a img').hover(function(){ clearInterval(setTimespan); }, function(){ setTimespan = setInterval(function(){autoPlaySlide()}, 3000); }) } // JavaScript Document |
Step 3:- Create Style CSS : imageGalleryStyle.css
imageGalleryStyle.css [Style CSS File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.galeryMain{ width:500px; margin:auto;} .glrlyImgZoom{ width:500px; height:335px; border:2px #666 solid; margin-bottom:10px; position:relative;} .zoomItem{ position:absolute; left:0; top:0;} .thumbImgMain{ position:relative;} .autoHide{ width:500px; overflow:hidden;} ul.thumbList{ margin:0; padding:0; list-style:none; position:relative;} ul.thumbList li{ width:75px; float:left; margin-right:9px;} ul.thumbList li a img{ border:2px #666 solid;} ul.thumbList li a:hover img, ul.thumbList li a.active img{ border:2px #ff0000 solid;} .pre{ width:10px; position:absolute; left:-20px; top:10px;} .pre a.active img{opacity:0.5;} .nxt{ width:10px; position:absolute; right:-20px; top:10px;} .nxt a.active img{opacity:0.5;} |
Further post that would you like to learn
I really appreciate your post, and you explain each and every point very well. Thanks for sharing this information.
I really Appreciate Your Post
5 Internet Approval Site (Do Follow Backlinks)