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,225

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.

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