Увеличение картинки?

Автор Тема: Увеличение картинки?  (Прочитано 13365 раз)

Оффлайн MakusiaАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 1
  • Сообщений: 22
  • Карма: 2

Оффлайн MakusiaАвтор темы

  • Рекрут
  • *
Увеличение картинки?
« : 03-10-2010, 12:32:27 »
Можно ли как-то с помощью Java Script сделать так, чтобы картинка на сайте увеличивалась при наведении на нее мышкой? Например, стоит маленькая иконка, а когда пользователь наводит мышкой, она увеличивается до каких-то размеров?
Есть ли такой скрипт? Или это делается не в Java?  :)


Оффлайн Saint

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 3
  • Сообщений: 131
  • Карма: 14

Оффлайн Saint

  • Постоялец
  • ***
Re: Увеличение картинки?
« Ответ #1 : 03-10-2010, 13:17:47 »
При клике точно можно сделать через LightBox... во всплывающем окне... качаете дистр тут...распаковываате...

В <head> страницы прописываете
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


Вместо тега <img src=****> пишите

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>


НУ естественно содержимое архива должно лежать в корне папки)) Думаю разберётесь)
Вот ссыль на сайт разработчика >>>тык<<<

Оффлайн Sevab

  • Администратор
  • Бизнес оценка: (6, 100%)
  • *****
  • СПАСИБО: 9909
  • Сообщений: 14523
  • Карма: 665
  • Пол: Мужской
    • Trust Directory Project

Оффлайн Sevab

  • Администратор
  • *****
Re: Увеличение картинки?
« Ответ #2 : 03-10-2010, 13:30:24 »
Вот самый простой вариант, наводите и убирайте мышку на рисунок ниже:
Волонтеры в помощь детям сиротам. Отказники.ру
А вот код:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Оффлайн drummer

  • Бизнес оценка: (1, 100%)
  • Старожил
  • ****
  • СПАСИБО: 224
  • Сообщений: 433
  • Карма: 42
  • Пол: Мужской
    • Веб-студия "MKSITE"

Оффлайн drummer

  • Старожил
  • ****
Re: Увеличение картинки?
« Ответ #3 : 02-06-2011, 08:20:28 »
Или через jQuery:
картинка:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.И сам скрипт:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Или вы можете использовать галерейку pulse.

Оффлайн Lena-Miha

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 572
  • Сообщений: 964
  • Карма: 57
  • Пол: Женский
  • Награды КМС поисковой оптимизации Более 100 спасибо
    • Оймонская долина

Оффлайн Lena-Miha

  • Ветеран
  • *****
Re: Увеличение картинки?
« Ответ #4 : 02-06-2011, 12:19:42 »
Посмотрите на моем  сайте http://altai-guide.narod.ru/index.html.
Если такой эффект подойдет - напишу код. (это более простой вариант, через Java Script увеличение будет более плавное, но этого у меня нет)


Оффлайн drummer

  • Бизнес оценка: (1, 100%)
  • Старожил
  • ****
  • СПАСИБО: 224
  • Сообщений: 433
  • Карма: 42
  • Пол: Мужской
    • Веб-студия "MKSITE"

Оффлайн drummer

  • Старожил
  • ****
Re: Увеличение картинки?
« Ответ #5 : 02-06-2011, 17:33:30 »
Посмотрите на моем  сайте http://altai-guide.narod.ru/index.html.
Если такой эффект подойдет - напишу код. (это более простой вариант, через Java Script увеличение будет более плавное, но этого у меня нет)
Я бы радил вам на сайт поставить галерейку Lightbox так будет красивее чем то что есть сейчас. Вот пример моего сайта с етой галереей. Урок по установке можете прочитать здесь.

Оффлайн Lena-Miha

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 572
  • Сообщений: 964
  • Карма: 57
  • Пол: Женский
  • Награды КМС поисковой оптимизации Более 100 спасибо
    • Оймонская долина

Оффлайн Lena-Miha

  • Ветеран
  • *****
Re: Увеличение картинки?
« Ответ #6 : 02-06-2011, 17:44:41 »
Lightbox  - фото увеличивается по клику, эффект классный, я хочу его использовать в фотоальбоме. А здесь вопрос был об увеличении картинки при наведении мышки. Мне, кстати, нравится так просматривать небольшие картинки, например, в интернет-магазинах, просмотреть сначала быстро при небольшом увеличении, что понравилось - открыть, это намного быстрее, чем открывать каждую


Добавлено: 02-06-2011, 18:01:02

Вот один из способов увеличения при наведении (без  Java Script), только при помощи css, при клике картинка большого размера открывается в новом окне, пример писала выше
Код:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.css:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
« Последнее редактирование: 02-06-2011, 18:01:02 от Lena-Miha »

Оффлайн drummer

  • Бизнес оценка: (1, 100%)
  • Старожил
  • ****
  • СПАСИБО: 224
  • Сообщений: 433
  • Карма: 42
  • Пол: Мужской
    • Веб-студия "MKSITE"

Оффлайн drummer

  • Старожил
  • ****
Re: Увеличение картинки?
« Ответ #7 : 02-06-2011, 18:02:10 »
Lena-Miha, ну в принципе да вы правы, можно еще сделать как я сделал для одного сайта тут (почти в самом низу). обьеденить две галерейки и вобще класно получится при наведении увеличивается, а при клике lightbox. Но это для любителя  ;D

Оффлайн cyclop

  • Бизнес оценка: (2, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 234
  • Сообщений: 697
  • Карма: 50
  • Пол: Мужской
  • Возвращаюсь

Оффлайн cyclop

  • Ветеран
  • *****
Re: Увеличение картинки?
« Ответ #8 : 02-06-2011, 18:52:31 »
Тоже есть похожая проблема, подскажите можно ли сделать так:
картинки уменьшаются через css по max-width, но как сделать так, чтобы при клике картинка увеличивалась до оригинального размера на той же странице без всяких всплывающих окон при еще одном клике уменьшалась обратно?
При этом желательно, чтобы курсор при наведении на картинку был лупой с плюсик, а при уменьшении соответственно лупа с минусом.

Надеюсь ясно обрисовал. ::)


Оффлайн drummer

  • Бизнес оценка: (1, 100%)
  • Старожил
  • ****
  • СПАСИБО: 224
  • Сообщений: 433
  • Карма: 42
  • Пол: Мужской
    • Веб-студия "MKSITE"

Оффлайн drummer

  • Старожил
  • ****
Re: Увеличение картинки?
« Ответ #9 : 08-06-2011, 07:42:28 »
cyclop, вы можете использовать jQuery для етого:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Итак при первом клике картинка увеличивается а при втором уменьшается.
Если совсем не знаете jQuery вот простые уроки.
А вот с лупой пока не пробовал.....


 

Похожие темы

  Тема / Автор Ответов Последний ответ
18 Ответов
6261 Просмотров
Последний ответ 23-06-2013, 18:02:03
от AMGH
10 Ответов
3287 Просмотров
Последний ответ 30-08-2013, 12:41:57
от Hannah
10 Ответов
8548 Просмотров
Последний ответ 09-10-2013, 22:29:55
от ewdokimow
17 Ответов
5635 Просмотров
Последний ответ 17-01-2014, 22:28:21
от Гарик+
3 Ответов
1476 Просмотров
Последний ответ 27-02-2014, 12:29:33
от Donovan