Автор

18 05.2013
Создание отличной галереи на jQuery

Создание отличной галереи на jQuery


 

Я уже не раз рассказывал о эффектах jQuery и что можно создать при помощи их. Но сегодня я хочу рассказать как можно создать отличную галерею просмотра миниатюр при помощи данного эффекта, галерея достаточно простая но в тоже время будет отлично смотреться на Вашем сайте, особенностью данной галереи является анимированное  превью интересующих изображений и вывод картинки в правом сайтбаре, и так, смотрим что у нас получилось.

 

И так, по традиции наших уроков предлагаю, для ленивых:)  просмотреть уже готовый результат нашей галереи или скачать исходники:

 

ДЕМО
ИСХОДНИКИ

 

А теперь рассмотрим что нам надо сделать для создания такой галереи:

1. jQuery Вставляем следующий код между тегами <head></head>. Не забываем про правильный путь к фреймворку.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 <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>

Данная функция сделает анимацию при наведении курсора мыши на миниатюры изображения.

2. CSS, Вторым этапом идут стили оформления. Стили можно вставить как в сам документ, так и вынести в отдельный файл.

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;
}

HTML, И завершающим этапом будет добавление изображений, Все картинки необходимо оформить списком вот таким образом:

<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>

Что бы все получилось, не забываем указать правильный путь к изображениям, на этом наша галерея закончена, надеюсь у Вас все получиться.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

19 04.2013
Создание отличной галереи на jQuery

Создавая сайт вручную с нуля можно столкнуться с множеством мелких нюансов, без которых сайт с множеством информации, пожалуй, не сможет обойтись, речь идет о нумерации страниц на сайте. И в сегодняшнем уроке мы расскажем как это можно сделать с помощью небольшого плагина jQuery. В данной нумерации доступны кнопки перехода к первой, последней, следующей и предыдущей страницам и возвратная функция, которая запускается после перехода к введеному номеру, что весьма удобно для навигации по сайту.


11 04.2013
Создание отличной галереи на jQuery

С личного опыта могу сказать, что связь между управляющими сайтом и пользователями очень важна, ведь посетителей необходимо информировать о выполненных действиях, тем самым держа в курсе последних событий. На помощь нам придут временные уведомления, которые будут появляться при выполнении определенного действия пользователем, и исчезать через указанный промежуток времени. В данном уроке мы рассмотрим как создать стильные временные уведомления с помощью анимации css3.


23 04.2013
Создание отличной галереи на jQuery

Как вы возможно заметили, мы достаточно много уделяем внимания по созданию различных галерей для сайта, и это совсем не странно, ведь галерей достаточно много, и они весьма специфические. В данном уроке мы рассмотрим как создать адаптированную галерею с каруселью миниатюр для сайта, с помощью плагина jquery. Галерея будет подстраиваться под размер окна браузера, также можно будет отключить или включить карусель миниатюр. Достаточно удобно можно осуществлять навигацию с помощью клавиатуры.


23 04.2013
Создание отличной галереи на jQuery

На просторах интернета можно не раз увидеть подобную версию галереи, но сегодня мы, все таки, решили уделить урок по созданию этой полноэкранной  галереи для сайта с помощью jQuery.  Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз. Вот как все это выглядит..


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close