Автор

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

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

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


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

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


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

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.


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

Фон является неотъемлемой частью любого сайта, красивое оформление позволяет задать тон всему ресурсу. Здесь, перед веб-мастером, стоит не простая задача, ведь необходимо подобрать правильно цвета, чтобы пользователь не терялся на сайте и информация была хорошо видна. В данном уроке мы рассмотрим пример создания замечательного анимированного фона, который будет жить своей жизнь и менять цветовую палитру, смотрится весьма удивительно, и позволяет привлечь внимание посетителей.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close