Images Sliding Thumbnails

Submitted by rinvizle on Wednesday, July 20, 2016 - 17:40.
In this tutorial we are going to create image sliding with a thumbnail area that scrolls automatically when moving the mouse to the right and left side. The scrolling functionality of the thumbnail bar is based on the Horizontal Scrolling Menu made with CSS and jQuery. In additional script to run the project is using PHP to get the images and thumbs automatically from the folder structure. See the example code below.

Sample Code

HTML and the PHP Script. We have a simple structure that will be dynamically filled by our PHP and JavaScript code. 
  1. <div class="albumbar">
  2. 	<span>Vincent Boiteau's photostream</span>
  3. 	<div id="albumSelect" class="albumSelect">
  4. 		<ul>
  5. 			<!-- We will dynamically generate the items -->
  6. 			<?php
  7. 				$firstAlbum = '';
  8. 				$i=0;
  9. 				if(file_exists('images')) {
  10. 					$files = array_slice(scandir('images'), 2);
  11. 					if(count($files)) {
  12. 						natcasesort($files);
  13. 						foreach($files as $file) {
  14. 							if($file != '.' && $file != '..') {
  15. 								if($i===0)
  16. 									$firstAlbum = $file;
  17. 								else
  18. 									echo "<li><a>$file</a></li>";
  19. 								++$i;
  20. 							}
  21. 						}
  22. 					}
  23. 				}
  24. 			?>
  25. 		</ul>
  26. 		<div class="title down">
  27. 			<?php echo $firstAlbum;?>
  28. 		</div>
  29. 	</div>
  30. </div>
  31. <div id="loading"></div>
  32. <div id="preview">
  33. 	<div id="imageWrapper">
  34. 	</div>
  35. </div>
  36. <div id="thumbsWrapper">
  37. </div>
  38. <div class="infobar">
  39. 	<span id="description"></span>
  40. </div>
And for the CSS Code that gives the display and design for the structure of content and images in the web. 
  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. h1{
  6. 	margin-top:20px;
  7. }
  8. body{
  9.     font-family:Verdana;
  10.     text-transform:uppercase;
  11.     color:#fff;
  12.     font-size:10px;
  13.     overflow:hidden;
  14.     background-color:#f9f9f9;
  15. }
  16. .albumbar{
  17.     height:50px;
  18.     line-height:24px;
  19.     text-align:center;
  20.     position:fixed;
  21.     background-color:#124a9d;
  22.     left:0px;
  23.     width:100%;
  24.     top:0px;
  25.     -moz-box-shadow:-2px 0px 4px #333;
  26.     -webkit-box-shadow:-2px 0px 4px #333;
  27.     box-shadow:-2px 0px 4px #333;
  28.     z-index:11;
  29. }
  30. .infobar{
  31.     height:22px;
  32.     line-height:22px;
  33.     text-align:center;
  34.     position:fixed;
  35.     background-color:#000;
  36.     left:0px;
  37.     width:100%;
  38.     bottom:0px;
  39.     -moz-box-shadow:0px -1px 2px #000;
  40.     -webkit-box-shadow:0px -1px 2px #000;
  41.     box-shadow:0px -1px 2px #000;
  42. }
  43. span#description, .albumbar span{
  44.     text-shadow:0px 0px 1px #fff;
  45.     color:#fff;
  46. }
  47. .albumbar span a{
  48.     color:#aaa;
  49.     text-decoration:none;
  50. }
  51. .albumbar span a:hover{
  52.     color:#ddd;
  53. }
  54. #loading{
  55.     display:none;
  56.     width:50px;
  57.     height:50px;
  58.     position:absolute;
  59.     top:40%;
  60.     left:50%;
  61.     margin-left:-24px;
  62.     background:transparent url(../icons/loading.gif) no-repeat top left;
  63. }
  64. #thumbsWrapper{
  65.     position: absolute;
  66.     width:100%;
  67.     height:102px;
  68.     overflow-y:hidden;
  69.     background-color:#000;
  70.     bottom:0px;
  71.     left:0px;
  72.     border-top:2px solid #124a9d;
  73. }
  74. #thumbsContainer{
  75.     height:79px;
  76.     display:block;
  77.     margin: 0;   
  78. }
  79. #thumbsWrapper img{
  80.     float:left;
  81.     margin:2px;
  82.     display:block;
  83.     cursor:pointer;
  84.     opacity:0.4;
  85. }
  86. #imageWrapper{
  87.     position:relative;
  88.     padding-top:110px;
  89.     text-align:center;
  90. }
  91. #imageWrapper img{
  92.     margin:0 auto;
  93.     -moz-box-shadow:2px 2px 10px #111;
  94.     -webkit-box-shadow:2px 2px 10px #111;
  95.     box-shadow:2px 2px 10px #111;
  96. }
  97. .cursorRight{
  98.    cursor:url("../icons/next.png"),url("icons/next.png"), default;
  99. }
  100. .cursorLeft{
  101.     cursor:url("../icons/previous.png"),url("icons/prev.png"), default;
  102. }
And if you already done or complete the project all you have to do is test it so you can know if their's an error. If you do have any problems or suggestions in your projects or programming then just visit this website www.sourcecodester.com for more updates and programming ideas. Hope that you learn in this project and enjoy coding. Don't forget to LIKE & SHARE this website.

Tags

Add new comment

About text formats
  • 74 views