Плавное увеличение картинки при наведении на неё курсором мыши

Плавное увеличение картинки при наведении на неё курсором мыши


Это, достаточно, полезная функция, по-сути, для любого информационного сайта на котором размещены, какие-либо, картинки.

Опишу применение данного скрипта на примере коротких новостей DLE
Всё очень просто:
1. Заливаем содержимое архива.
2. Подключаем JS:
открываем main.tpl и перед тегом добаляем
<script type="text/javascript" src="/templates/Red/js/imagesize.js"></script>

3. Подключаем CSS:
открываем main.tpl и перед тегом добаляем
<link rel="stylesheet" href="/templates/Red/style/imagesize.css" type="text/css" />

4. Открываем shortstory.tpl Находим
<img src="{image-1}" alt="{title}" />

заменяем на
<img class="expando" src="{image-1}" width="150px" alt="{title}" />

Внимание!
Размер картинки, width="150px", надо указывать не реальный а тот каким, Вы, хотите видеть его в миниатюре.

Наслаждаемся!

Адаптация: ToNik

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0