Увеличение картинки при наведении курсора (вариант-1)

Главная | Регистрация | Вход | Приветствую Вас Бродяга | RSS

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

NordHeRn

Дата: Воскресенье, 23.01.2011, 21:48 | Сообщение # 1

Группа: Проверенные

Сообщений: 9

Статус: Offline

DEMO

1. Качаем архив

http://dfiles.ru/files/xr95fibd6

2. С помощью Файлового менеджера, в корне сайта, создаём папку cloud-zoom, внутри которой,
создаём папку img.

3. В созданые папки, заливаем содержимое аналогичных папок из архива.

4.Перед тегом </head> вставляем это:

Код

5. Идём в Управление дизайном --> Таблица стилей (CSS) и в самый низ вставляем это:

Код

@charset "utf-8";
/*1. base style ---*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, form, label, table, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
html {
font-size: 100.01%;
height: 100%;
}

:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}
a {
color: #287fc3;
text-decoration: underline;
}
input[type="text"], input [type="password"]{
font-size: 100%;
padding: 0;
}
textarea {
font: 100% Arial, sans-serif;
padding: 0;
}
li {
list-style-type: none;
list-style-position: inside;
}

/*2. main wrap ---*/
.mainWrap {
                      min-height: 100%;
                      margin: 0 auto;
}

.mainWrap h2 {
                      margin: 10px 0;
}

.miniGallery a {
                      width: 320px;
                      height: 190px;
                      border:0px solid #ccc;
}

.miniGallery {
                      padding-bottom: 20px;
                      padding-left: 20px;
}

.miniGallery ul {
                      width: 100%;
                      padding: 20px 0 0 0;
                      overflow: hidden;
                      clear: both;
}

.miniGallery ul li {
                      float: left;
                      margin-right: 20px;
                      overflow: hidden;
}

.miniGallery ul li a {
                      display: block;
                      width: auto;
                      height: auto;
}

.miniGallery ul li a img {
                      display: block;
}

.inside {
                      position: relative;
                      padding-bottom: 20px;
                      padding-left: 20px;
                      overflow: hidden;
                      //zoom:1;
}

.inside a {
                      position: relative;
                      border:0px solid #ccc;
                      width: 320px;
                      height: 200px;
}

.softFocus {
                      overflow: hidden;
                      position: relative;
                      padding-bottom: 20px;
                      padding-left: 20px;
                      //zoom:1;
}

.softFocus a {
                      border:0px solid #ccc;
                      width: 300px;
                      height: 190px;
}

.tint {
                      overflow: hidden;
                      position: relative;
                      padding-bottom: 20px;
                      padding-left: 20px;
                      //zoom:1;
}

.xBlock a,
.tint a {
                      border:0px solid #ccc;
                      width: 320px;
                      height: 190px;
}

.xBlock {
                      padding-left: 20px;
                      margin-bottom: 20px;
                      position: relative;
                      //zoom:1;
}

#xBlock {
                      width: 320px;
                      height: 190px;
                      overflow: hidden;
                      position: absolute;
                      top: 30;
                      left: 40%;
                      border: 1px solid #000;
                      text-align: center;

}

.mainBlock:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

6. Туда, где хотим видеть картинку, вставляем один из этих кодов:

Галлерея

Код

Zoom внутри картинки

Код

Zoom размытие

Код

Zoom цвет

Код

Расположение zoom-окна, с информацией

Код

<div class="xBlock">
<a class="cloud-zoom" href="/cloud-zoom/img/r1-blue-3.jpg" rel="position: 'xBlock', adjustX: 0, adjustY:0">
<img src="/cloud-zoom/img/r1-blue-2.jpg" alt="" width="320" height="190" />
</a>

<div id="xBlock"><p align="center">
<br>
В первой же поездке на Yamaha вы поймете, что этот мотоцикл рожден на гоночной трассе.
<br><br>
Его технология, рожденная на гонках MotoGP, настроена так, чтобы обеспечить вам выдающиеся характеристики двигателя и шасси, обычно доступные только профессиональным гонщикам.
<br><br>
Его сверхвысокооборотный короткоходный двигатель обладает великолепной мощностью.
<br>
</p></div>
</div>