The Thumbnail Photo Slider Implementation( Codes )
If you have understood the layout of Pagination Controls in our previous tutorials, it’s quite easy to understand how we convert the same pagination with Thumbnail view of the Images.
Instead of creating the Pagination dynamically in ‘thumbnailSliderScript.js’ file, we’ll add a list of image items in our HTML code and from JS file, we’ll assign a ‘data’ attribute named ‘pgno’ to each such image item, dynamically.
Also in our ‘thumbnailSliderScript.js’ file, we’re using two methods named removeClass(), and toggleClass(), for dynamically changing the CSS property of the current pagination image and rest other thumbnails.
The ThumbnailSlider.html file has structural elements along with scripts related to creation of the object for our slider. Observe how each of the slide content is enlisted as the unordered list elements. Two files thumbnailStyle.css and thumbnailSliderScript.js contain styles and methods for controlling the slider motion, direction and also for styling the Pagination thumbnail. You would also need reference to JQuery Library i.e. https://code.jquery.com/jquery-2.1.0.js which you can download and save in the folder ‘scripts’.
Codes for all these files are as shown below.
ThumbnailSlider.html
|
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 |
<!Doctype html> <html> <head> <title>Thumbnail Slider</title> <link rel="stylesheet" href="https://www.journaldev.com/4850/styles/thumbnailStyle.css"> </head> <body> <!-- Container for Slider, Navigation and Pagination Controls --> <div class="gallery-container"> <div class="gallery"> <h2>Thumbnail Slider</h2> <!-- The actual moving Slider --> <div class="slider"> <ul> <li> <img src="images/bigimg/bigimg1.jpg" class="slides" alt="Image1"> </li> <li> <img src="images/bigimg/bigimg2.jpg" class="slides" alt="Image2"> </li> <li> <img src="images/bigimg/bigimg3.jpg" class="slides" alt="Image3"> </li> <li> <img src="images/bigimg/bigimg4.jpg" class="slides" alt="Image4"> </li> <li> <img src="images/bigimg/bigimg5.jpg" class="slides" alt="Image5"> </li> <li> <img src="images/bigimg/bigimg6.jpg" class="slides" alt="Image6"> </li> <li> <img src="images/bigimg/bigimg7.jpg" class="slides" alt="Image7"> </li> <li> <img src="images/bigimg/bigimg8.jpg" class="slides" alt="Image8"> </li> <li> <img src="images/bigimg/bigimg9.jpg" class="slides" alt="Image9"> </li> <li> <img src="images/bigimg/bigimg10.jpg" class="slides" alt="Image10"> </li> </ul> </div> <!-- Navigation Button Controls --> <div class="slider-nav"> <button class="backbtn" data-dir="prev">Previous</button> <button class="nextbtn" data-dir="next" style="float:right;">Next</button> </div> </div> <!-- Pagination Controls --> <div class="slider-pagi"> <div class="pagi-container"> <!-- Here Thumbnail Paginations will be dynamically assigned a Page ID(i.e. "pgno'Starting with 0) --> <ul> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg1.jpg" alt="Image1"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg2.jpg" alt="Image2"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg3.jpg" alt="Image3"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg4.jpg" alt="Image4"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg5.jpg" alt="Image5"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg6.jpg" alt="Image6"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg7.jpg" alt="Image7"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg8.jpg" alt="Image8"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg9.jpg" alt="Image9"/></a></li> <li><a href="https://www.journaldev.com/4850/#"><img src="images/thumbimg/thumbimg10.jpg" alt="Image10"/></a></li> </ul> </div> </div> </div> <!-- Loading JavaScript Codes. --> <script src="scripts/jquery-2.1.0.js"></script> <script src="scripts/thumbnailSliderScript.js"></script> <script> // jQuery(document).ready(function ($) { // creating a container variable to hold the 'UL' element. It uses method chaining. var container=$('div.slider') .css('overflow','hidden') .children('ul'); // creating pagination variable which holds the 'UL' element. var pagicontainer=$('div.pagi-container').children('ul'); /* On the event of mouse-hover, i) Change the visibility of Button Controls. ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode. */ $('.gallery').hover(function( e ){ $('.slider-nav').toggle(); return e.type=='mouseenter'?clearInterval(intv):autoSlider(); }); // Creating the 'slider' instance which will set initial parameters for the Slider. var sliderobj= new slider(container,pagicontainer,$('.slider-nav')); /* This will trigger the 'setCurrentPos' and 'transition' methods on click of any button "data-dir" attribute associated with the button will determine the direction of sliding. */ sliderobj.nav.find('button').on('click', function(){ sliderobj.setCurrentPos($(this).data('dir')); sliderobj.transition(); }); /* This will trigger the 'setCurrentPos' and 'transition' methods on click of any Pagination Thumbnail icon. "data-pgno" attribute associated with the Thumbnail icons will determine the value of 'current' variable. */ sliderobj.pagicontainer.find('li a').on('click', function(){ sliderobj.setCurrentPos($(this).data('pgno')); sliderobj.transition(); }); autoSlider(); // Calling autoSlider() method on Page Load. /* This function will initialize the interval variable which will cause execution of the inner function after every 3 seconds automatically. */ function autoSlider() { return intv = setInterval(function(){ sliderobj.setCurrentPos('next'); sliderobj.transition(); }, 3000); } }); </script> </body> </html> |
thumbnailStyle.css
|
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 132 133 |
* { margin:0; padding:0; } /* ============================== This is for Overall Styling of the Content Gallery. */ .gallery-container { border:2px solid rgb(6, 61, 92); /*border-radius*/ -webkit-border-radius:5px 5px 10px 10px; -moz-border-radius:5px 5px 10px 10px; border-radius:5px 5px 10px 10px; margin:10px auto; padding:0px; display:table; } .gallery { width:640px; height:370px; background:#999; /*border:2px solid green;*/ } .gallery h2 { font-size: 20px; background: #C5BBBB; } .slider { overflow:scroll; } .slider ul { width:100000px; list-style:none; margin-left:0px; } .slider li { float:left; } /* ============================== This is for Navigation Buttons Styling. */ .slider-nav { display:none; /* This is important to hide the buttons if jQuery is Not supported. */ margin-top: -10em; cursor: pointer; } .backbtn { position:relative; opacity:0.5; } .nextbtn { position:relative; opacity:0.5; } /* ============================== This is for Pagination Styling. */ .slider-pagi { /*border:2px solid red;*/ text-align:center; /* Important : Keeps the Pagination in the center. */ width:640px; } .pagi-container { /*border: 2px solid cyan;*/ padding: 5px; display: inline-block; /* This is a good alternative for inline-flex and supports most of the browsers. */ /* display: inline-flex; */ /* This is important to remove the extra vertical spaces between 'UL' and 'pagi-container' */ } .pagi-container > ul { padding:2px; /*border:1px solid black;*/ display: inline-block; } .pagi-container > ul li { /* float:left; */ /* Instead write "display:inline-block" Property to set the pagi-elements in center. */ list-style:none; padding:0px; /* Setting padding as zero will increase clickable region of child('a' Anchor Element) of LI element */ border:1px solid #aaa; margin: 0px auto; margin-bottom:5px; display:inline-block; background: radial-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(180,180,180,0.8)); } .pagi-container > ul li:hover { background: radial-gradient(rgba(220, 220, 220, 0.3), rgba(180,180,180,0.8) 95%); } .pagi-container > ul li a { display:inline-block; padding:5px; /* This is important to Increase the Clickable Region of the anchor Elements */ text-decoration:none; color:rgb(100,100,100); /* display:inline-flex; */ } .pagi-container > ul li a img:hover { opacity:1.0; } .img-normal { opacity:0.5; vertical-align:bottom; /* Very Important to Vertically Centre the Thumbnail and removing the bottom space between and Image and the container Anchor Tag. */ } .img-selected { opacity:1.0; } .pagi-selected { /*box-shadow*/ -webkit-box-shadow:0 0 15px #000; -moz-box-shadow:0 0 15px #000; box-shadow:0 0 15px #000; opacity:1.0; } /* ============================== This is for Styling Each of the Content Slides */ .slides { width:640px; /* This width is reduced to compensate the padding on left and right */ height:345px; /* This height is reduced to compensate the padding on top and bottom */ background-color:rgb(198,185,221); } |
thumbnailSliderScript.js
|
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 |
/* This method will initialize each slider instance. Parameter are: - ------------------ 1) container -> div.slider ul 2) pagicontainer -> div.pagi-container ul 3) nav -> #slider-nav */ function slider(container, pagicontainer, nav){ this.container=container; this.pagicontainer=pagicontainer; this.nav=nav.hide(); // This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining. this.imgs=this.container.find('.slides'); // Returns jQuery object containing all matched elements. this.width=this.imgs[0].width; // Each image is Identical in Dimension. console.log('Value of width is : '+this.width); this.imgLen=this.imgs.length; // Returns the total number of sliding elements. console.log("Total no. of Items in the list are : "+this.imgLen); // Here we will add the "data-pgno" attribute to the Thumbnail Pagination. cnt=0; this.liArr = $(pagicontainer).find('li');// Returns jQuery object containing all matched LI elements of Pagination Thumbnails. this.liArr.each(function() { $anchor=$(this).find('a'); $anchor.data('pgno',cnt); cnt++; }); this.current=0; // Initialize the "current" counter. // Apply initial Styling to all Pagination Thumbnail Image Elements. this.pagicontainer.find('li a img').toggleClass('img-normal'); // Apply CSS to "First" pagination element in the list. this.pagicontainer.find('li:nth-child(1) a').toggleClass("pagi-selected"); this.pagicontainer.find('li:nth-child(1) a img').toggleClass("img-selected"); } // This method will apply the needed animation and displacement. slider.prototype.transition=function(coords){ this.container.animate({ 'margin-left': coords || -(this.current*this.width) // First element is multiplied by Zero. },500); // Remove CSS from Rest other pagination element in the list. this.pagicontainer.find('li a').removeClass("pagi-selected"); this.pagicontainer.find('li a img').removeClass("img-selected"); // Apply CSS to current pagination element in the list. this.pagicontainer.find("li:nth-child("+(this.current+1)+") a").toggleClass("pagi-selected"); this.pagicontainer.find("li:nth-child("+(this.current+1)+") a img").toggleClass("img-selected"); }; // This method will set the "current" counter to next position. /* Parameters are:- --------------- 1) dir -> It can be either 'prev' or 'next' or else a number denoting slides. */ slider.prototype.setCurrentPos=function(dir){ var pos=this.current; console.log('Value of this.value is : '+dir); if(isNaN(dir)) { pos+= ~~(dir=='next') || -1; // You can use alternate "Math.floor()" method instead of double tilde (~~) operator. this.current=(pos<0)?this.imgLen-1: pos%(this.imgLen); } else this.current=Number(dir); console.log(this.current); }; |
The source codes have comments wherever it is needed. In case of specific doubt you can ask me directly by commenting.