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

Post Views: 242

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 forCreate a Custom Image Gallery With a Horizontal Thumbnail Carousel.
imageGalleryFunction.js	JavaScript File	It is holding JavaScript click functioality 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

How to Create a Modal Popup With a Form Inside as Shaw/Hide on Click Button Using ‘@track’ Const Variables in Lightning Web Component – LWC
Creating Record in Contact Object and Redirecting to Detail Page Simply Using With ‘@salesforce/schema/Contact’ in Salesforce Lightning Web Component – LWC
How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript
How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component
Dynamic custom dependent picklist in lightning component
Adding a Custom Style CSS for Specific Role & Profile in Salesforce
How to fetch picklist values from apex controller in lightning component

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]

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

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

Leave a Comment Cancel reply

Contribute to Support If Some Value Added in Your Project or Website