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

Makusia · 03-10-2010, 12:32:27

Можно ли как-то с помощью Java Script сделать так, чтобы картинка на сайте увеличивалась при наведении на нее мышкой? Например, стоит маленькая иконка, а когда пользователь наводит мышкой, она увеличивается до каких-то размеров?
Есть ли такой скрипт? Или это делается не в Java?

Saint · 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 · 03-10-2010, 13:30:24

Вот самый простой вариант, наводите и убирайте мышку на рисунок ниже:

А вот код:

Код Выделить


<img src="http://www.otkazniki.ru/images/banner/banner_otkazniki468x60.gif" mce_src="http://www.otkazniki.ru/images/banner/banner_otkazniki468x60.gif" alt="Волонтеры в помощь детям сиротам. Отказники.ру" width="234" border="1" height="30" 
onmouseover="this.width=468;this.height=60" onmouseout="this.width=234;this.height=30">

drummer · 02-06-2011, 08:20:28

Или через jQuery:
картинка:

Код Выделить

<img src="http://www.otkazniki.ru/images/banner/banner_otkazniki468x60.gif" alt="Волонтеры в помощь детям сиротам. Отказники.ру" width="234" border="1" height="30" 
id="imgresize">

И сам скрипт:

Код Выделить


$(function(){
$("#imgresize").hover(function() {
$("#imgresize").animate({"width":"468","height":"60"},300);
},function() {
$("#imgresize").animate({"width":"234","height":"30"},300);
});
});

Или вы можете использовать галерейку pulse.

Lena-Miha · 02-06-2011, 12:19:42

Посмотрите на моем сайте http://altai-guide.narod.ru/index.html.
Если такой эффект подойдет - напишу код. (это более простой вариант, через Java Script увеличение будет более плавное, но этого у меня нет)

drummer · 02-06-2011, 17:33:30

Цитата: Lena-Miha от 02-06-2011, 12:19:42
Посмотрите на моем сайте http://altai-guide.narod.ru/index.html.
Если такой эффект подойдет - напишу код. (это более простой вариант, через Java Script увеличение будет более плавное, но этого у меня нет)

Я бы радил вам на сайт поставить галерейку Lightbox так будет красивее чем то что есть сейчас. Вот пример моего сайта с етой галереей. Урок по установке можете прочитать здесь.

Lena-Miha · 02-06-2011, 17:44:41

Lightbox - фoто увеличивается по клику, эффект классный, я хочу его использовать в фoтоальбоме. А здесь вопрос был об увеличении картинки при наведении мышки. Мне, кстати, нравится так просматривать небольшие картинки, например, в интернет-магазинах, просмотреть сначала быстро при небольшом увеличении, что понравилось - открыть, это намного быстрее, чем открывать каждую

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

Вот один из способов увеличения при наведении (без Java Script), только при помощи css, при клике картинка большого размера открывается в новом окне, пример писала выше
Код:

Код Выделить


<ul class="hoverbox">
  <li>
<a href="...  .jpg" target="_blank"><img src=".. .jpg" alt="..."/><img src=".. .jpg" alt="..." class="preview" /></a>
</li>
</ul>

css:

Код Выделить


.hoverbox
{
	cursor: default;
	list-style: none;
}
.hoverbox a
{
	cursor: default;
}
.hoverbox a .preview
{
	display: none;
}
.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -280px;
	left: -200px;
	z-index: 1100;
}
.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 120px;
	height: 90px;
}
.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin:3px 13px 3px 3px;
	padding: 5px;
	position: relative;
}
.hoverbox .preview
{
	border-color: #000;
	width: 440px;
	height: 330px;
	z-index: 1111;
}

drummer · 02-06-2011, 18:02:10

Lena-Miha, ну в принципе да вы правы, можно еще сделать как я сделал для одного сайта тут (почти в самом низу). обьеденить две галерейки и вобще класно получится при наведении увеличивается, а при клике lightbox. Но это для любителя

cyclop · 02-06-2011, 18:52:31

Тоже есть похожая проблема, подскажите можно ли сделать так:
картинки уменьшаются через css по max-width, но как сделать так, чтобы при клике картинка увеличивалась до оригинального размера на той же странице без всяких всплывающих окон при еще одном клике уменьшалась обратно?
При этом желательно, чтобы курсор при наведении на картинку был лупой с плюсик, а при уменьшении соответственно лупа с минусом.

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

drummer · 08-06-2011, 07:42:28

cyclop, вы можете использовать jQuery для етого:

Код Выделить


$(function(){
$("img").toggle(function() {
$("img").animate({"width":"ширина при клике","height":"высотапри клике"},300); // увеличение
},function() {
$("img").animate({"width":"ширина","height":"высота"},300);  // уменьшение
});
});

Итак при первом клике картинка увеличивается а при втором уменьшается.
Если совсем не знаете jQuery вот простые уроки.
А вот с лупой пока не пробовал.....