Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery

Post Views: 1,675

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.

Don’t forget to check out:- Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery Click Here For More Information

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.

Final Output

Other related post that would you like to learn in LWC

Download Supported jQuery Library for Custom Banner Rotating Image with Text Slider.

Step 1:- Create HTML File : imageGallerySlider.html

imageGallerySlider.html [HTML File]

  <!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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

</div>

</ul>

</div>

</body>

</html>

Step 2:- Create JavaScript File : imageGalleryFunction.js

imageGalleryFunction.js [JavaScript File]

  $(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

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]

  .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;}

.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

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

Author of w3web.net

Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time.

3 thoughts on “Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery | Create multiple image slider in jquery”

pavan

December 23, 2020 at 4:39 am

I really appreciate your post, and you explain each and every point very well. Thanks for sharing this information.
Joganireinforcement

February 3, 2021 at 5:19 am

I really Appreciate Your Post
5 Internet Approval Site (Do Follow Backlinks)
Fiona Xu

August 9, 2021 at 6:55 am

this is a really nice post

Files we used in this post example:-

Download Supported jQuery Library for Custom Banner Rotating Image with Text Slider.

imageGallerySlider.html [HTML File]

imageGalleryFunction.js [JavaScript File]

imageGalleryStyle.css [Style CSS File]

Related Topics | You May Also Like

Author of w3web.net

3 thoughts on “Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery | Create multiple image slider in jquery”

Leave a Comment Cancel reply