Показ изображений в стиле «дверь-купе»

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Здравствуйте, дорогой друг, начинающий web-мастер. В этот раз я приготовил для Вас небольшой простенький урок по показу изображений. У меня на сайте в разделе Работа с изображениями представлены многие варианты. Этот, очередной вариант я нашел на сайте Миралинкс, «отработал» его и представляю для своих читателей. Посмотрите демо-пример:

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

1.  Как обычно, начнём со скачивания архива с учебным материалом (1,6 мб).

2. После скачивания, распакуйте архив в отдельную папку на компьютере и ознакомьтесь с её содержимым. В папке door_a_compartment должна быть папка i и файл demo.html. В папке i должны находиться четыре файла изображений, два файла ява скриптов и файл стилей style.css. Откройте файл demo.html в вашем браузере и проверьте работу скрипта.

Установка на страницу сайта

1. Начните с подбора двух основных изображений, которые должны находиться в папке i. Картинки должны быть с одинаковыми размерами, а размеры подобраны с таким расчётом, чтобы не выходили за рамки размеров страницы. Например, у меня на сайте в демо-примере размеры 700x519px, а у вас в учебном материале 1024x759px.

2. Откройте файл style.css в текстовом редакторе (например, блокнот или Notepad++) и впишите ваши размеры в третью строку сверху:

.compare{position:relative;width:1024px;height:759px;/*ширина и высота блока*/

Эти же размеры внесите в пятую строку:

.compare-after{position:absolute;left:0;top:0px;width:1024px;height:759px;/*ширина и высота изображений*/

Больше в файле style.css никаких дополнительных изменений можно не делать, разве что изменить названия двух ваших изображений в первой и второй строке файла стилей.

3. Папку i со всем её содержимым загрузите на сервер вашего сайта.

4. В раздел head страницы вашего сайта вставьте участок кода из файла demo.html:

<link rel="stylesheet" href="i/style.css">
<script type="text/javascript" src="i/jquery.min.js"></script>
<script type="text/javascript" src="i/main.js"></script>

Пояснения:

          Путь к файлу стилей.

          Пути к файлам скриптов.

5. В раздел body страницы вашего сайта вставьте нижеприведенный участок кода из файла demo.html. Изменений в коде делать не нужно.

<div class="version-compare-block interface-changes">
<div class="compare">
<div class="compare-before">
<div class="slider"></div>
</div>
<div class="compare-after"></div>
</div>
</div>

Если Вы всё сделали правильно, в итоге получите такой же эффект, как в моём демо-примере. Удачи Вам в создании сайта и приличных доходов от рекламы. Ваш L.M.