Красивое Apple-галерея в стиле слайд-шоу с помощью CSS & Jquery

27 января 2010 года, Размещено в категории: jQuery / MooTools

Apple-галерея

Сегодня мы будем делать слайд-шоу галерею, аналогичную той, что использует компания Apple на своем сайте для демонстрации своей продукции.
Дизайн галереи сделан мего компанией Apple, как всегда все на высоте, это можно проверить посмотрев демо, кстати источником урока является tutorialzine, а перевод сделан Блогом вебмастера.
И так начинаем делать галерею

demoскачать

Шаг1:  XHTML
Apple галерею очень легко прикрутить к уже работающим сайтам, вам просто нужно изменить несколько строк HTML-кода в коде.

Давайте внимательнее посмотрим на XHTML код:
demo.html

Идея проста - вся галерея состоит из двух основных тегов <DIV>  один id="menu" в нем наше меню (мини слайды), а во втором  id="slides" включает в себя наши картинки (слайды).

Чтобы добавить новый слайд, вам только нужно добавить новые элементы в обоих контейнерах (<div>). Слайды картинок в контейнер "slides" формата JPG, и миниатюры в меню в "menu", они являются прозрачными PNG, но вы можете использовать любой тип изображения который вы хотите.

Также каждому слайду можно прикрепить нужную вам ссылку.
Не забывайте указывать высоту (height) и ширину (width) изображений, это является очень важным атрибуты для Jquery.

Шаг2:  CSS
В нашей галерее мы использовали целый ряд специфических свойств CSS3:

box-shadow - делает легкие тени вокруг краев галереи. Чтобы его использовать, нам придется сделает маленькое смещения по X и Y (0 0 здесь), размывания в 3px в данном примере и цвет тени;
border-radius - задаем радиус закругления нижних углов галереи.

К сожалению, эти свойства поддерживаются сейчас только в Safari, Chrome и Firefox.  Но и без этих свойств наша галерея в других браузерах будет выглядеть прекрасно

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Page reset */
margin:0px;
padding:0px;
}

body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;

-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;

/* The width of the gallery */
width:920px;
overflow:hidden;
}

#slides{
/* This is the slide area */
height:400px;

/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:920px;
overflow:hidden;
}

.slide{
float:left;
}

#menu{
/* This is the container for the thumbnails */
height:45px;
}

ul{
margin:0px;
padding:0px;
}

li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}

li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}

li.act a{
cursor:default;
}

.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}

li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}

a img{
border:none;
}

Шаг3: jQuery
Теперь настало время для Jquery магии 🙂
Основной идеей jQuery сценария является цикл по всем слайдам, суммировать их ширины и передать их сумму в контейнер слайдов - DIV с id = "slides". Поскольку слайды прикреплены по левому краю и имеют достаточно места, они соединяются один друг с другом.

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

var totWidth=0;
var positions = new Array();

$('#slides .slide').each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();

/* The positions array contains each slide's commulutative offset from the left part of the container */

if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});

$('#slides').width(totWidth);

/* Change the cotnainer div's width to the exact width of all the slides combined */

$('#menu ul li a').click(function(e){

/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');

var pos = $(this).parent().prevAll('.menuItem').length;

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */

e.preventDefault();
/* Prevent the default action of the link */
});

$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
});

С трех простых шагов, которые мы создали красивую Apple-галерею в стиле слайд-шоу. Она может быть легко включена в любой сайт простым добавлением нескольких строк кода.

Мой блог находят по следующим фразам
как научить internet explorer понимать css3
lifemeet net
3d фотогалерея для сайта
Скачать htc-файл для ie
dicim.net
bildunterschrift






11 комментариев

  • 8 лет назад Ответить

    Извините, Вы немогли бы подробней объяснить, 1)какую именно часть кода из шага3 нужно использовать 2) напишите 1 пример с прикреплённой к слайду ссылкой (чтоб при нажатии переходило на неё)

    • 8 лет назад Ответить

      Артём:
      1) Это содержимое файла script.js его редактирувать не нужно. Просто переместите его в корневую папку сайта, или в специальную папку со скриптами (если есть такая).

      Вот слайд без ссылки:
      img src=»img/sample_slides/macbook.jpg» width=»920″ height=»400″/>
      А вот так выглядит со ссылкой:
      a href=»ссылка»>
      img src=»img/sample_slides/macbook.jpg» width=»920″ height=»400″ />

  • 8 лет назад Ответить

    Спасибо, но всё равно не пойму что не так: добавил HTML-код в код страницы в нужном мне месте, загрузил script.js в корневую папку, шаг2 пропустил из-за того, что у меня опера 🙂 ,в результате получилось сразу 3 слайда идущие один под другим, а ниже мини слайды; без оформления и собственно самой функции переключения слайдов, т.к. все слайды сразу видны:( Может скрипт не сработал?
    P.S. я только недавно начал познавать все эти азы, так что не судите строго:)

    • 8 лет назад Ответить

      Да это не подключился скрипт и CSS стили. Нужно чтобы файлы script.js demo.css и demo.html были вместе в одной папке, тогда все заработает.

  • 8 лет назад Ответить

    Большое спасибо, помогло!

  • 8 лет назад Ответить

    а возможно сделать автоматичесоке переключение слайда на другой, через определёный промедуток времени, и так покругу все слайды?

  • 8 лет назад Ответить

    А в IE7 и IE6 тестировалось! Поставил себе на сайт но с IE6 и 7 не дружить! кто знает как решить? Help!!!

  • 8 лет назад Ответить

    Начал пилить галерею, чтобы слайд-шоу было на самом деле шоу 🙂 Хочется сделать, чтобы изображения менялись и по клику на thumbnail’е и самостоятельно через заданный промежуток времени…

    Пока получается йухня 🙁
    Может быть, знатоки дадут пару дельных советов?

  • 6 лет назад Ответить

    ребят а как её на джумле запустить? вроде все подключил проверил, а скрипты походу не работают

    • 6 лет назад Ответить

      Что-то с кодом не то, запускаеться на всех движках одинаково.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: