Найти для Jimdo скрипт слайдшоу не так сложно, но чтобы работа выполнялась только при помощи CSS - это уже решение не из легких. Я знаю, что пользователи наслаждаются стандартной галереей, которая встроена в саму CMS. По мне, так она приелась. Хочется чего-то нового, не такого как у всех. Почему выбор пал только на CSS? В Jimdo дела с *.js для меня вообще темный лес. Не знаю почему так, но загрузка скриптов на сам Jimdo лично на моем опыте заканчивалась либо ничем, либо печально :( Не скажу что все так плохо, но дорабатывать есть что.
Но хватит о мелочах, давайте перейдем непосредственно к самому уроку и выясним, что и как работает. Чтобы приступить к уроку, оговорюсь заранее. Не забывайте пользоваться современными браузерами, так как CSS3 - это более новая технология и требует она индивидуального подхода.
Шаг 1. CSS слайдшоу кидаем в хедер
Предлагаю внести в хедер следующий код, предварительно заключив его в
<style type="text/css">...
</style>.
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#box {
text-align: left;
width: 700px; /* Длина блока слайдшоу */
margin: 30px auto 0 auto;
background: #000;
overflow: hidden;
border: 10px solid #000;
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
}
ul#slider{
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px; /* Длина блока слайдшоу */
height: 438px; /* Высота блока слайдшоу */
overflow: hidden;
}
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px; /* Длина блока слайдшоу */
}
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 35px;
height: 35px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
ul#thumb a:hover {
opacity: 1;
}
ul#slider li {
width: 700px; /* Длина блока слайдшоу */
height: 438px; /* Высота блока слайдшоу */
position: absolute;
}
ul#slider li p {
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
ul#slider li p span {
line-height: 1.2em;
padding: 10px;
display: block;
}
@-webkit-keyframes moveTarget {
0% {
left:-700px; /* Длина блока слайдшоу */
}
100% {
left:0px;
}
}
ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
@-webkit-keyframes moveIt {
0% {
left:0px;
}
50% {
left:700px; /* Длина блока слайдшоу */
}
100% {
left:-700px; /* Длина блока слайдшоу */
z-index: 5;
}
}
ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}
Все комментарии в коде сводятся к двум фразам:
/* длина и высота блока слайдшоу */. Эти параметры нужны для того, чтобы вы всегда смогли подогнать под размер вашего сайта данное слайдшоу. Над этим участком кода вам сильно думать не нужно. Оно и понятно, поменяли размер и дальше в бой.
Шаг 2. Ставим HTML код
Перед установкой слайшоу рекомендую закачать на любой файловый хостинг ваши изображения, либо просто на специально созданную заранее страницу на Jimdo, скрытую от посторонних глаз. Все ссылки на изображения скопируйте в блокнот и переходите далее к правке html кода. Смотрим пример:
<div id="box">
<ul id="slider">
<li id="1">
<!-- Определяем url картинки, а также длину и высоту блока -->
<img src="image1.jpg" alt="альтернативное имя 1" height="438" width="700" />
<p>
<span>Текстовый блок 1</span>
</p>
</li>
<li id="2">
<!-- Определяем url картинки, а также длину и высоту блока -->
<img src="image2.jpg" alt="альтернативное имя 2" height="438" width="700" />
<p>
<span>Текстовый блок 2</span>
</p>
</li>
<li id="3">
<!-- Определяем url картинки, а также длину и высоту блока -->
<img src="image3.jpg" alt="альтернативное имя 3" height="438" width="700" />
<p>
<span>Текстовый блок 3</span>
</p>
</li>
<li id="4">
<!-- Определяем url картинки, а также длину и высоту блока -->
<img src="image4.jpg" alt="альтернативное имя 4" height="438" width="700" />
<p>
<span>Текстовый блок 4</span>
</p>
</li>
</ul>
<!-- Здесь задаем размер миниатюр, размеры в px лучше не менять -->
<ul id="thumb">
<li>
<a href="#1">
<img src="image1.jpg" alt="альтернативное имя 1" height="50" width="50" />
</a>
</li>
<li>
<a href="#2">
<img src="image2.jpg" alt="альтернативное имя 2" height="50" width="50" />
</a>
</li>
<li>
<a href="#3">
<img src="image3.jpg" alt="альтернативное имя 3" height="50" width="50" />
</a>
</li>
<li>
<a href="#4">
<img src="image4.jpg" alt="альтернативное имя 4" height="50" width="50" />
</a>
</li>
</ul>
</div>
Каждое новое изображение слайдшоу формирует новый id и список
<li id="1">. Поэтому при добавлении новой картинки присваевайте ей новый идентификатор и формируйте список правильно, как показано на примере выше. Я думаю, не так сложно догадаться, что нужно добавлять блок самой картинки, а так же следом блок миниатюры. Причем ссылка на миниатюру может быть такой же, как и на основное изображение, так как в коде задаются размеры, которые меняют изображение автоматически.
Если у вас остались вопросы после прочтения урока, задавайте их.