все о веб-программировании и веб-дизайне
Галерея на jQuery
Часто, создавая сайты, приходится сталкиваться с всевозможными галереями, некоторые из них все еще представляют собой обычную таблицу с картинками. Но этим уже никого не удивить, я расскажу вам как внедрить на свой сайт именно галерею: сверху будет находиться картинка, чуть ниже ее описание и кнопки «Следующая» и «Предыдущая», завершать все будет миниатюрные копии остальных изображений, при наведении на которые, будут становиться менее прозрачными.
Это рабочий пример, который находится на сайте, посвященному Датским елкам и сопутствующим товарам, а именно фейерверкам. Здесь кнопок, отвечающих за перелистывание изображений нет, тут они ни к чему.
Для начала встраиваем в <head> файл jquery.js, который можно скачать с официального сайта .
1 | <script src="/js/jquery.min.js" type="text/javascript"></script> |
Дальше нужно скачать с официального сайта галереи 2 файла: плагин для jQuery и файл стилей для этой галереи. Их можно скачать . Затем прикрепляем их к проекту.
1 | <script src="/js/jquery.galleria.js" type="text/javascript"></script> |
1 |
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 | <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $('.gallery_demo_unstyled').addClass('gallery_demo'); $('ul.gallery_demo').galleria({ history : true, // для того, чтобы работала кнопка в браузере "назад" clickNext : true, // делаем картинку кликабельной insert : '#main_image', onImage : function(image,caption,thumb) { // добавляем эффекты смены изображения // появляется изображение и описание к нему image.css('display','none').fadeIn(1000); caption.css('display','none').fadeIn(1000); var _li = thumb.parents('li'); _li.siblings().children('img.selected').fadeTo(500,0.7); thumb.fadeTo('fast',1).addClass('selected'); // добавляем title к активному изображению image.attr('title','Next image >>'); }, onThumb : function(thumb) { // эффекты для миниатюр var _li = thumb.parents('li'); // задаем прозрачность миниатюр var _fadeTo = _li.is('.active') ? '1' : '0.7'; thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); // эффекты при наведении thumb.hover( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.7); } // don't fade out if the parent is active ) } }); }); // ]]></script> |
И немного измененный код css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .caption{font-style:italic;color:#887;} .demo{position:relative;margin-top:2em;} .gallery_demo{width:400px;margin:0 auto;} .gallery_demo li{width:68px;height:70px;border:none;margin: 15px; float: left;} .gallery_demo li div{left:40px} .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;} #main_image{margin:0 auto 60px auto;height:400px;width:400px;} #main_image img{margin-bottom:10px;} .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;} .info p{margin-top:1.6em;} |
Вот почти и все, осталось только подготовить изображения и написать небольшой html-код.
1 2 3 4 5 6 7 8 9 10 11 | <div class="demo"> <p style="text-align: center; display: none"><a onclick="$.galleria.prev(); return false;" href="#">Предыдущий</a> | <a onclick="$.galleria.next(); return false;" href="#">Следующий</a></p> <ul class="gallery_demo_unstyled"> <li class="active"><img title="100 пудов ." src="images/stories/boomz/100%20pudov.jpg" border="0" alt="100 пудов" /></li> <li><img title="Фейерверки" src="images/boomz/bolshoykush.jpg" border="0" alt="Фейерверки" /></li> <li><img title="Фейерверки" src="images/boomz/boss.jpg" border="0" alt="Фейерверки" /></li> <li><img title="Фейерверки" src="images/boomz/bylina.jpg" border="0" alt="Фейерверки" /></li> <li><img title="Фейерверки" src="images/boomz/discoteka.jpg" border="0" alt="Фейерверки" /></li> </ul> </div> |
Вот и все. Если кому понадобятся кнопки «листания» то для этого достаточно, убрать в
1 | <p style="text-align: center; display: none"> |
display:none.
display:none.
| Print article | This entry was posted by Вредный on 23.11.2009 at 13:02, and is filed under CSS & HTML, jQuery, программирование. Follow any responses to this post through RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
2 месяца назад
Все замечательно работало до момента установки библиотек последней версии. После чего галерея работать перестала
Подскажите, где ошибка!
2 месяца назад
сейчас в этой галереи потребности нет, поэтому не пользуюсь ей
пришлите исходники на почту dnd.pliz@gmail.com и мы с вами попробуем разобраться в чем проблема