Skip to main content

Images Sliding Thumbnails


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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.