Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
Когда речь заходит о дизайне нельзя не вспомнить такую каомпанию как Apple. Так вот речь пойдет как раз о очень симпотичном слайдере , примерно такой же установлен на сайте Apple. С некоторыми лишь отличиями ,например мы не будем использовать базу данных и php.
Идея проста 2 контейнера DIV - один с id=”menu” содержит миниатюры, второй с id=“slides” содержит слайды.
Для добавления нового слайда понадобится всего лишь просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но можете использовать и любые другие другие форматы.
Также можете вставлять любой HTML код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке. Крайний правый слайд в нашей демо так и сделан, так что для вас не составит особого труда это сделать.
Важно, прописать у слайдов высоту и ширину - они используется jQuery для определения зоны прокрутки.
body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; }
#main{ /* The main container */ margin:15px auto; text-align:center; width:920px; position:relative; }
a, a:visited { color:#0196e3; text-decoration:none; outline:none; }
a:hover{ text-decoration:underline; }
p{ padding:10px; text-align:center; }
В этой таблице стилей мы использовали несколько CSS3 sсвойств:
* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени; * border-radius, круглые границы снизу галереи.
К сожалению, эти свойства работают не во всех браузерах.
Шаг 3 – jQuery
Code
$(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 */
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 */
});
Главная идея в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места комфортно расположиться друг за другом.
Всего 40 строк кода и наша слайдшоу - галерея готова!
Заключение
Всего три шага нам понадобилось для создания красивой галереи в стиле Apple.
Когда речь заходит о дизайне нельзя не вспомнить такую каомпанию как Apple. Так вот речь пойдет как раз о очень симпотичном слайдере , примерно такой же установлен на сайте Apple. С некоторыми лишь отличиями ,например мы не будем использовать базу данных и php.
Идея проста 2 контейнера DIV - один с id=”menu” содержит миниатюры, второй с id=“slides” содержит слайды.
Для добавления нового слайда понадобится всего лишь просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но можете использовать и любые другие другие форматы.
Также можете вставлять любой HTML код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке. Крайний правый слайд в нашей демо так и сделан, так что для вас не составит особого труда это сделать.
Важно, прописать у слайдов высоту и ширину - они используется jQuery для определения зоны прокрутки.
body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; }
#main{ /* The main container */ margin:15px auto; text-align:center; width:920px; position:relative; }
a, a:visited { color:#0196e3; text-decoration:none; outline:none; }
a:hover{ text-decoration:underline; }
p{ padding:10px; text-align:center; }
В этой таблице стилей мы использовали несколько CSS3 sсвойств:
* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени; * border-radius, круглые границы снизу галереи.
К сожалению, эти свойства работают не во всех браузерах.
Шаг 3 – jQuery
Code
$(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 */
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 */
});
Главная идея в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места комфортно расположиться друг за другом.
Всего 40 строк кода и наша слайдшоу - галерея готова!
Заключение
Всего три шага нам понадобилось для создания красивой галереи в стиле Apple.