Вітаю. У сьогоднішній статті ми з Вами розглянемо приклад створення фотогалереї для сайту. Ми будемо робити просту галерею але в той же час, дуже красиву, стильну і сучасну, з невеликими ефектами анімації при наведенні на мініатюру.
Галереї зображень дуже часто використовують на своїх сайтах веб-майстри, і ми не виняток, при розробці сайтів або створенні інтернет магазину галерея зображень застосовується для зручного відображення інформації про компанію або для показу фотографій товарів.
Також її можна використовувати і в інших цілях, адже фотогалерея призначена не тільки на сайт фотографа, але і для будь-якого іншого інтернет ресурсу. Галерея зображень на вашому сайті є відмінним способом показати вашим користувачам свої фото або роботи.
Після прочитання цієї статті Ви без зусиль зможете створити просту фотогалерею самостійно, використовуючи покрокову інструкцію яку ми зараз з Вами розглянемо. Також Ви можете завантажити скрипт галереї який ми зараз створимо і який ми опублікуємо нижче під статтею.
І так, як створити просту галерею зображень?
Першим пунктом є підключення всіх необхідних JS скриптів на ваш сайт, давайте зробимо це!
Додайте на сайт десь над тегом <head> рядок підключення скрипту:
|
1 |
<script type="text/javascript" src="js/jquery-latest.js"></script> |
Сам файл Ви можете скачати під цією статтею.
Далі Вам потрібно додати скрипт на сторінку:
|
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 |
<script type="text/javascript"> $(document).ready(function(){ //Збільшення при наведенні $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Зміна зображення при кліці $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script> |
Додати даний скрипт Ви можете безпосередньо в тіло сторінки на якій у Вас буде працювати дана галерея. Ну або ж Ви можете винести його в окремий файл і підключити його так само:
|
1 |
<script type="text/javascript" src="js/main.js"></script> |
Хочемо зазначити відразу ж що в скачанній нижче галереї він як раз винесений в окремий файл, тобто на сторінці його ми просто підключили але не додавали. Добре, скрипти ми підключили, тепер давайте додамо основні 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 |
body { font: Arial, Helvetica, sans-serif normal 10px; margin: 0; padding: 0; } * {margin: 0; padding: 0;} img {border: none;} .container { height: 360px; width: 910px; margin: -180px 0 0 -450px; top: 50%; left: 50%; position: absolute; } ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } ul.thumb li img.hover { background:url(thumb_bg.png) no-repeat center center; border: none; } #main_view { float: left; padding: 9px 0; margin-left: -10px; } |
Дані стилі так само як і сріпти JS про які ми говорили вище, можна додати в тіло сторінки або ж вивести окремим файлом і просто підключити на сторінку, що ми і зробили.
Ну і тепер давайте додамо саму розмітку HTML в якій і буде знаходиться наша фотогалерея:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div> <ul> <li><a href="images/main_image1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li> <li><a href="images/main_image2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li> <li><a href="images/main_image3.jpg"><img src="images/thumb3.jpg" alt="" /></a></li> <li><a href="images/main_image4.jpg"><img src="images/thumb4.jpg" alt="" /></a></li> <li><a href="images/main_image5.jpg"><img src="images/thumb5.jpg" alt="" /></a></li> <li><a href="images/main_image6.jpg"><img src="images/thumb6.jpg" alt="" /></a></li> <li><a href="images/main_image7.jpg"><img src="images/thumb7.jpg" alt="" /></a></li> <li><a href="images/main_image8.jpg"><img src="images/thumb8.jpg" alt="" /></a></li> <li><a href="images/main_image9.jpg"><img src="images/thumb9.jpg" alt="" /></a></li> </ul> <div id="main_view"> <img src="images/main_image1.jpg" alt="" /></a> </div> </div> |
Ну ось власне і все, галерея створена. Як Ви бачите при створенні галереї нічого складного і незвичайного ми не застосовували, і при цьому у нас вийшло зробити неймовірно стильну фотогалерею. Сподіваюся у Вас все також вийде, удачі Вам.
Приклад того як буде виглядати Фотогалерея на сайті:
Або подивитися живий приклад, ви можете у нас на сайті:
Немає коментарів
Ви можете залишити коментар першим.