Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Le-Vamp в Вс 3 Июн - 18:02

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

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

Le-Vamp
 

Женщина

Сообщения : 162
Возраст : 19
Регистрация : 2012-05-02
Благодарности : 28

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Vadim в Вс 3 Июн - 23:52

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

Код:
<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

Vadim
 

Мужчина

Сообщения : 539
Возраст : 28
Место обитания : Дом, семья, работа...
Регистрация : 2012-03-01
Благодарности : 55

Без предупреждений

http://anamnez.sosbb.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Le-Vamp в Пн 4 Июн - 5:26

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

Le-Vamp
 

Женщина

Сообщения : 162
Возраст : 19
Регистрация : 2012-05-02
Благодарности : 28

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Пн 4 Июн - 14:25

Это только 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;
}


Последний раз редактировалось: Dana Domirani (Пн 4 Июн - 14:45), всего редактировалось 1 раз(а)



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22078
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-18
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Le-Vamp в Пн 4 Июн - 15:12

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

Le-Vamp
 

Женщина

Сообщения : 162
Возраст : 19
Регистрация : 2012-05-02
Благодарности : 28

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Пн 4 Июн - 16:58

Добавьте:
Код:
.imgblock a:hover span {
top: -10px;
left: -10px;
}



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22078
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-18
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Le-Vamp в Пн 4 Июн - 17:11

Спасибо!

Le-Vamp
 

Женщина

Сообщения : 162
Возраст : 19
Регистрация : 2012-05-02
Благодарности : 28

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Le-Vamp в Пн 4 Июн - 17:46

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

Le-Vamp
 

Женщина

Сообщения : 162
Возраст : 19
Регистрация : 2012-05-02
Благодарности : 28

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Пн 4 Июн - 18:45

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

Хром


IE9


Опера


FF



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22078
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-18
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор MakcMay в Пн 4 Июн - 18:51

и у меня тоже

MakcMay
 

Мужчина

Сообщения : 584
Возраст : 25
Место обитания : Украина
Настроение : Атмосферное smile
Регистрация : 2011-12-12
Благодарности : 102

Без предупреждений

http://pawno.wikiforum.net

Вернуться к началу Перейти вниз

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

Сообщение автор Le-Vamp в Вт 5 Июн - 8:33

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

Le-Vamp
 

Женщина

Сообщения : 162
Возраст : 19
Регистрация : 2012-05-02
Благодарности : 28

Без предупреждений

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения