Установка:
1. CSS : Ниже приведенный код стилей, нужно добавить в таблицу стилей CSS вашего сайта :
Код
/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo">
Иначе увеличительне будет работать в IE6 */
.ienlarger {
float: left;
clear: none; /* Можно установить left или right по необходимости */
padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}
.ienlarger a {
display:block;
text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}
.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}
.ienlarger a span { /* Для большого изображения и названия */
position: absolute;
display:none;
color: #FFCC00; /* Текст названия */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* Размер шрифта названия */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */
z-index: 100;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}
.resize_thumb {
width: 150px; /* Вводим нужный размер миниатюры здесь */
height : auto;
}
/* Код увеличителя закончен */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo">
Иначе увеличительне будет работать в IE6 */
.ienlarger {
float: left;
clear: none; /* Можно установить left или right по необходимости */
padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}
.ienlarger a {
display:block;
text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}
.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}
.ienlarger a span { /* Для большого изображения и названия */
position: absolute;
display:none;
color: #FFCC00; /* Текст названия */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* Размер шрифта названия */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */
z-index: 100;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}
.resize_thumb {
width: 150px; /* Вводим нужный размер миниатюры здесь */
height : auto;
}
/* Код увеличителя закончен */
2. HTML : Ниже приведенный код нужно добавить в желаемое место, где будут выводиться картинки. Ссылки, картинки, описание и название замените на свои. :
Код
<div class="ienlarger"><a
href="Ваша ссылка перехода при нажатие на картинку 1"><img
src="Ссылка на вашу картинку 1 мини" alt="thumb"
class="resize_thumb" /><span>
<img src="Ссылка на вашу картинку 1 в полный размер"
alt="large" /><br />
Текст можно написать здесь.</span></a></div>
<div class="ienlarger"><a
href="Ваша ссылка перехода при нажатие на картинку 2"><img
src="Ссылка на вашу картинку 2 мини" alt="thumb"
class="resize_thumb" /><span>
<img src="Ссылка на вашу картинку 2 в полный размер"
alt="large" /><br />
Текст можно написать здесь.</span></a></div>
href="Ваша ссылка перехода при нажатие на картинку 1"><img
src="Ссылка на вашу картинку 1 мини" alt="thumb"
class="resize_thumb" /><span>
<img src="Ссылка на вашу картинку 1 в полный размер"
alt="large" /><br />
Текст можно написать здесь.</span></a></div>
<div class="ienlarger"><a
href="Ваша ссылка перехода при нажатие на картинку 2"><img
src="Ссылка на вашу картинку 2 мини" alt="thumb"
class="resize_thumb" /><span>
<img src="Ссылка на вашу картинку 2 в полный размер"
alt="large" /><br />
Текст можно написать здесь.</span></a></div>