Увеличение иображения при наведении

Опять я, со своими вопросами))

Не могли бы вы подсказать мне скрипт для увеличения (желательно плавного) изображений при наведении?
я уже перерыла гугл, и ничего подходящего не нашла =(

Вспомнил еще вариант! Скрипт с этими фотографиями:

Код:

<center>
<a href="http://www.snapsnap.ru/i/12817987001254214561.jpg" title="Гламур"> <img src="http://www.snapsnap.ru/i/12817987001254214561.jpg" height="80" width="121" title="Гламур" /></a>

<a href="http://www.snapsnap.ru/i/pep.png"  title="Розы"><img src="http://www.snapsnap.ru/i/pep.png" height="80" width="77" title="Розы" /></a>

<a href="http://savepic.org/445226.jpg" title="Водопад"><img src="http://savepic.org/445226.jpg" height="80" width="110" title="Водопад" /></a>

<a href="http://www.snapsnap.ru/i/3rir.jpg" title="Тигр в прыжке"><img src="http://www.snapsnap.ru/i/3rir.jpg" height="80" width="97" title="Тигр в прыжке" /></a>

<a href="http://savepic.org/418602.jpg" title="Друзья"><img src="http://savepic.org/418602.jpg" height="80" width="110" title="Друзья" /></a>

<a href="http://www.snapsnap.ru/i/wallpapersbyrokodtd.jpg" title="Девушка 1"><img src="http://www.snapsnap.ru/i/wallpapersbyrokodtd.jpg" height="80" width="108" title="Девушка 1"></a>

<a href="http://savepic.org/411434.jpg" title="Ушастый"><img src="http://savepic.org/411434.jpg" height="80" width="110" title="Ушастый"></a>

<a href="http://www.snapsnap.ru/i/wallpapersbyrokoplp.jpg" title="Девушка 2"><img src="http://www.snapsnap.ru/i/wallpapersbyrokoplp.jpg" height="80" width="129" title="Девушка 2"></a>

<a href="http://savepic.org/406314.jpg" title="В полёте"><img src="http://savepic.org/406314.jpg" height="80" width="110" title="В полёте"></a>

<a href="http://www.snapsnap.ru/i/ovo.jpg" title="Хвостатая"><img src="http://www.snapsnap.ru/i/ovo.jpg" height="80" width="65" title="Хвостатая"></a>

<a href="http://www.snapsnap.ru/i/7525599200001ror.png" title="Девушка 3"><img src="http://www.snapsnap.ru/i/7525599200001ror.png" height="80" width="54" title="Девушка 3"></a>

<a href="http://savepic.org/447277.jpg" title="Язык мой враг мой"><img src="http://savepic.org/447277.jpg" height="80" width="110" title="Язык мой враг мой"></a>

<a href="http://www.snapsnap.ru/i/ngn.png" title="На цветке"><img src="http://www.snapsnap.ru/i/ngn.png" height="80" width="110" title="На цветке"></a>

<a href="http://www.snapsnap.ru/i/mzmmzm.jpg" title="Любовь"><img src="http://www.snapsnap.ru/i/mzmmzm.jpg" height="80" width="124" title="Любовь"></a>
</center>

<script type='text/javascript' src='http://www.patmax.eu/J1/120227182752.js'></script>

Думаю не сложно разобраться какие строки в скрипте изменить; после

Код:

<img src=

адрес фотографии, после:

Код:

title=

ее название

Ставьте в шаблоны, по своей необходимости, например;

Наверху форума под шапкой:

index_body я вставлял в самый верх, добавив вначале кода отступ (пробел) чтобы картинки не шли впритык к шапке форума:

Код:


<div style="height:2px"></div>

Цифра обозначает размер отступа.


viewtopic_body вставлять после:

Код:

<!-- END promot_trafic -->

Я пробовал только на ВВ2

это только при нажатии, а мне нужно как на этом сайте:http://mockingjay.rusff.ru

Это только html-код, без CSS. Но, судя по структуре, именно то, что я Вам предложила на тестовике.
Да, это можно прикрутить к любому форуму.

1) Ставите блок с изображениями:

Код:

<div class="imgblock">
<a href="#">
<img src="http://i44.servimg.com/u/f44/16/54/26/99/graphi10.png" alt="миниатюра" class="resize_thumb" />
<span><img src="http://i44.servimg.com/u/f44/16/54/26/99/graphi10.png"
alt="полноразмерное изображение" /></span></a>
</div>

Картинка одна и та же, первая используется для создания миниатюры, вторая (внутри span'а) — показывается 1:1.
Соответственно, гигантских изображений лучше не ставить.
В ряд можно поставить сколько угодно таких блоков. Кроме картинки, в span можно добавить текст (комментарий).

2) В CSS добавляются общие настройки:

Код:

.imgblock {
  float: left;
  clear: none;
  padding: 0 5px 5px 0;
}

.imgblock a {
  display:block;
  text-decoration: none;
}

.imgblock a:hover{
  position:relative;
}

/* оформление всплывающей картинки с увеличением */
.imgblock span img {
  border: 1px solid #FFFFFF;
}

/* оформление блока со всплывающей картинкой */
.imgblock a span {
  position: absolute;
  display: none;
  background-color: #fff;
  font-weight: bold;
  padding: 0;
  -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.52);
  -moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.52);
  box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.52);
}

.imgblock img {
  border-width: 0;
}

 /* Большое изображение */
.imgblock a:hover span {
  display:block;
  top: 0;
  left: 0;
  z-index: 100;
}

 /* размер миниатюры - укажите ширину или высоту */
.resize_thumb {
  width: 150px;
  height : auto;
}

а можно ли как-то сделать чтобы изображение увеличивалось поверх всего, и как бы по центру, а не уползало в край.?

Добавьте:

Код:

.imgblock a:hover span {
top: -10px;
left: -10px;
}

Спасибо!

А можно вопрос - как выровнять изображения с этим классом по центру? у меня они слева и никуда =(((

Проверила на четырех браузерах — они по центру:

Хром


IE9


Опера


FF

и у меня тоже

пасибо, получилось)