Раньше я писал об увеличение картинки при наведении при помощи css. Но она была не доработана.
Совсем недавно, мне требовалось сделать что-то похожее, только на jQuery. И я доделал тот пример и добавил эффекты при помощи jQuery. Вообщем у меня получилось два варианта:
- С использованием CSS, без jQuery.
- С использованием CSS и jQuery.
Сейчас я покажу вам два варианта.
1. С использованием CSS, без jQuery
Html код:
<a class="st" href="javascript:">
<div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>
</a>
Css стили:
a.st .img{width:100px;height:124px;overflow:hidden;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}
По сравнению с вариантом в прошлой статье, этот не раздвигает другой html вокруг. То есть картинка сама по себе, но в то же время, за ней закреплено место для маленькой картинки.
2. С использованием CSS и jQuery
Здесь мы оставим html код таким же, как и в предыдущем примере:
<a class="st" href="javascript:">
<div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>
</a>
Вот теперь, css изменится:
a.st .img{width:100px;height:124px;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}
Принципы css одинаковы в двух вариантах, только во втором, ширину и высоту мы будем трансформировать при помощи jQuery.
JQuery скрипт:
$(function(){
$('.img').hover(function(){
$(this).children('img').stop().animate({width:"250px",height:"274px"}, 400);
}, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); });
});
При наведении курсора, мы плавно трансформируем ширину и высоту объекта, а затем, когда курсор будет убран, возвращаем css в исходное положение, опять же плавно.
Вот мы и разобрали два примера реализации. Плюсы и минусы я приводить не буду, но скажу так, существенных проблем нет у обоих примеров.
Работает: Mozilla Firefox 3.5.2, Opera 10.00, Chromium 4.0.204.0, Konqueror 4.3.1.
Если вы нашли ошибку в коде, сообщите пожалуйста в комментариях.
спасибо, первый вариант очень подходит!
а IE ведь тоже отображает без проблем...или это как само собой разумеющееся )
Станислав, сейчас я не имею данной возможности тестировать в этом браузере. Скажите какой версии вы тестировали и я добавлю в статью.
Ошибка в коде
див внутри а
это не есть гуд
валидацию на validator.w3.org не пройдете
помогите пожалуйста сделать так же как на сайте dedrkoi.ru
ответ на zaiemil@ya.ru
А как сделать чтоб открывлось не вниз вправо, а вверх и влево к примеру!
Влад, я бы делал так же, только поднимать вверх и делать отрицательный отступ слева. Примерно так:
* Стандартные: 100×100.
* animate (width:"150px", height:"150px", left:"-50px", top:"-50px");
Вот и все...
* animate (width:"150px", height:"150px", left:"-50px", top:"-50px");
В таком случае картинка прыгает резко в левый верхний угол.
Блин, забыл о времени... Нужно время задать:
animate ({width:"150px", height:"150px", left:"-50px", top:"-50px"}, 400);
Где 400 — это время в мс.
А можно выложить весь код, а то так не совсем понятно куда вставлять «animate ({width:»150px", height:"150px", left:"-50px", top:"-50px"}, 400);"
Примерно вот так:
$(function (){
$('.img').hover (function (){
$(this).children ('img').stop ().animate ({{width:»150px", height:"150px", left:"-50px", top:"-50px"}}, 400);
}, function (){ $(this).children ('img').stop ().animate ({width:"100px",height:"100px",left:"0",top:"0"}, 400); });
});
Всё равно фигня по этому коду выходит
.
Почему в первом варианте картинка увеличивается вниз и вправо? И зафиксирован левый верхний угол картинки. Какими параметрами это определяется?
Как сделать что бы зафиксирован был правый верхний край картинки и увеличивалась она влево и вниз?
Можно сделать так, что бы зафиксирован был центр картинки, а увеличивалась она от центра одинаково во все стороны?
Вот смотри: bitby.net/wp-demo/web/img...or-jquery/3.html
Насчет твоих вопросов, отвечаю на все по порядку:
1. Картинка закреплена на странице сверху и слева. Значит ей болше некуда изменять свои размеры, кроме как вниз вправо. Так ведут себя все стандартные браузеры. Чтобы изменить это, нужно ковыряться с отрицательными отступами...
2. Здесь нужно делать как всегда, только делать отрицательный оступ слева.
3. Можно... В каждую сторону по отрицательному отступу.
Промучился целый день... неужели нельзя готовый ( не сырой) материал делать... Вроде работает, а в Internet Explorer всё равно картинки прыгают... Где я ошибся ? применил здесь и можно как то получить нормальный скрипт типа такого : очень красиво там работает , но совершенно не понятно как...
Берешь эффект с highslide.com и делаешь свой, полностью анологичным образом.
Спасибо , я уже разобрался, сделал по принцыпу highslide.com ... там всё чётко работает... (только они там грозятся , что она лицензионная...) Надеюсь сильно ругаца не будут ... Так, что, если кто чего не понял — спрашивайте...
Здравствуйте, мне очень подходит вариант реализации с css но они все со следующей строки начинаются, как их выставить в ряд. Я пооолный профан в этом деле, сильно не ругайтесь:)
Нужно грамотно прописать стили для этой картинки... Все зависит от внешних объектов на странице.
а можно ли что бы картинка которая увеличеваеться была не прозрачной? а бьюсь, ни как не выходит. Подскажите варианты, использовал первый вариант
Александр, у меня во всех примерах используются «не прозрачные» картинки.
а можно сделать так чтоб область срабатывания равнялась только маленькой картинке, а не большой? Типа если нужно несколько маленьких превьюх в ряд и чтоб на каждую срабатывал.
Можно... Все зависит от вашего кода. Если можно задать ссылкам определенный идентификатор, то сделать намного проще. Иначе нужны другие варианты.
а можно сюда как-то гиперссылку добавить, чтобы при увеличении на ней можно было кликнуть?
Можно, замените href у ссылки, на свой путь к сайту:
<a class="st" href="javascript:" rel="nofollow">у меня возникла проблема с выходом в интернет и вот что я понял:
src="http://bitby.net/wp-demo/files/jquery.js не работает без доступа к интернет. а как это можно обойти? Спасибо!
AlexM, откройте в своем браузере страницу: bitby.net/wp-demo/files/jquery.js. Затем нажмите сохранить как и выберите путь для сохранения. Фреймворк остался на вашем компьютере и вам стоит лишь прописать правильный путь к нему.
А не могли бы Вы мне подсказать, как именно прикрепить файл сценария jScript? С CSS все понятно, а jScript что то не хочет.
Смотрите, сохраняете файл. Далее на своей странице прописываете в исходном коде, между
<head>и</head>такую строчку:<script src="путь к файлу (например js/jquery.js)" type="text/javascript"></script>Спасибо большое, теперь все ОК!
куда этот долбанный jquery вставлять,ни фига не понятно,в джумле вообще ни фига не работает.
артём, можно подробнее? Что именно не работает?
не увеличивается фотка,куда jquery скрипт надо засунуть в джумле????и вообще в джумле работает этот скрипт???Css понятно в редактирование css а jquery куда в редактирование html? если да то не получается,надо может какие-то пути ещё прописать в джумле,уже 2 часа долблюсь,все варианты перепробовал,навожу на картинку на локалке,подпись внизу javascript и ни фига не увеличивается,попробовал первый вариант,всё получилось,но мне не понравилось,хочу плавное увеличение поскажите,как можно поподробней пожалуйста!!!!!!
Добрый вечер, у меня есть такой вопрос: помоги разобраться с .Hta и если можно посоветуйте литературу. Базовые знания у меня имеются, но все же хочется знать больше! Спасибо!
ничего не получается ну подскажите!!
Привет, Артем.
Если я правильно понял, то для Html выглядит все это дело вот так:
страница 1
после первого Head и после meta
артём, я не знаю как редактируется в жумле, но нужно найти где-то редактирование шапки. Далее ищи строчку
</head>. И вместо нее вставляй:<script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>Далее ищи строку
<body>, и вместо нее вставляй:<body> <script> $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); }); }); </script>Далее в нужное место в коде вставь html:
<a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>AlexM, возможно в сообщении «Февраль 23rd, 2010 20:03» ты хотел вставить код? Для вставки кода используй тег code.
А вот здесь какой у меня путь примерно до jquery.js,где у меня должен jquery лежать в джумле в какой папке.
При включенном интернете можете использовать наш путь (bitby.net/wp-demo/files/jquery.js), если хотите использовать локально. то:
Заливаете фреймворк (jquery) например в корневую папку сайта (там где index.php), далее редактируете index.php. Ищите
</head>и вместо него вставляете:<script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>а где в джумле корневая папка сайта?
ваше изображение получилось через джумлу поместить а какк своё -то поставить,какой путь-то надо прописать?????????????
артём, напиши мне по icq, пожалуйста.
не блина получилось,только моё изо как-то сжато,гденужные минуса прописать?
а ещё скажите пожалуйста,если после того,как перенесу свой сайт с локального на удаленный сервер,будут работать изображения,если я заливал фреймворк,то есть делал всё что для локального требуется?
Меняешь в css ширину и высоту:
a.st .img{width:100px;height:124px;} a.st .img img{width:100px;height:124px;} a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;} a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}Все значения width — меняешь на начальную ширину своей картинки.
Все значения height — меняешь на начальную высоту своей картинки.
Далее скрипт:
$(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); // Значения ширины и высоту, когда навели курсор. }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); // Начальные значения ширины и высоты. }); });да здесь я понял спасибо,а вот у вас на примере изображение при увеличении всё равно красиво смотрится,а у меня как-то смазываться начинает??и ещё все картинки которые рядом,начинают отадвигаться от этой картинки,а у вас допусти текст3 (на примере)перекрывает и текст1 и 2 не двигаются по сторонам?и ещё у меня картинка встала слева,но при наведении курсора в правом углу шаблона,она подлавливается слева и начинает увеличиваться,то есть на всю строку растянута,но сама находится слева?? вот такие три проблемы мне не решить!!
Реально ли это вместе с mootools использовать?
У меня на сайте шаблон с mootools — его не выкинешь...
Или может можно как-то использовать библиотеку mootools вместо jQuery?
Не могу нарыть такого на mootools (((
артём:
1. Насчет смазывания, скорее всего это зависит от качество картинки.
2. Задай родительскому блоку, например в нашем примере это .img, свойство position со значением absolute.
3. Пример можно посмотреть?
Женя, конечно реально. Я с mootools не знаком, но даже если на нем нельзя, то использовать два фреймворка можно. Одна лишь проблема при этом, и jQuery и mootools используют для селекторов знак «$». Для того, чтобы изменить во всех кодах jQuery знак «$» на свой, используйте .noconflict ():
var $j = jQuery.noConflict();В дальнейшем вам нужно будет пользоваться в jQuery скриптах не «$», а «$j». Например
$j('#id').css({display:'none'});.что за родительский блок,где он именно в джумле??? в css может просто прописать это значение для img например или как нибудь так можно??
Родительский блок — это блок, внутри которого расположена картинка. В жумле, в прочем как и везде, ты вставляешь код:
<a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>Как видно, что перед img есть блок с классом img. Этот блок и является родительским. Попробуй ему задать абсолютное позиционирование (position:absolute).
задать в css?
не непомогает всё равно все изо которым я задал эту анимацию катаются по сторонам,а которым не задал класс стоят нормально!!!
артём, хотелось бы посмотреть. Есть возможность увидеть в интернете? Кстати, напиши мне по icq: 407{9}{9}4950.
Доброго дня суток. Мне не дает покоя один недочет, возникающий при использовании jQuery: если делать так, как Вы описывали, то получается, что если картинка находится слева, то по все длине будет показана в браузерах ссылка, при нажатии на которую переходим по ссылке. как сделать, чтобы ссылки высвечивались и были функциональны только при наведении на картинку?
AlexM, вам нужна реализация:
1. Показывается маленькая картинка на странице.
2. При наведении курсора на эту картинку, она увеличивалась и поверх картинки появлялась ссылка.
Если да, то лучше пользоваться совсем другим кодом.
помогите плиз.
Все работало ок. После вставки в шаблон джумлы возникла следующая проблема: в Опере по прежнему все ок, а вот в IE8, картинки увеличиваются, но назад не уменьшаются... что делать?
(Вариант1,без jQuery)
Во, первых, огромное спасибо! Но есть вопрос.
Я хочу сделать плавное увеличение с JQuery. То, как картинка увеличивается, меня полностью устраивает. Но уменьшается она резко: при отведении мышки от картинки, обрамляющие элементы становятся видны мгновенно. У вас на примере то же самое: только отводишь мышку, Текст 3 проявляется тотчас же. Можно ли этого избежать?
ear-trap, как я понимаю, все дело в том, что браузер не воспринимает нашу анимацию, а только лишь конечное значение. Хотя это не правильно. Ведь если взглянуть под капот jQuery, то мы каждый раз меняем ширину на заданную, следовательно такого быть не может и это баг!
Вот теперь я полностью разобрался. Смотрите. Когда мы наводим курсор, картинке задается z-index, этим мы перекрываем собой текст. Когда убираем курсор, z-index становится прежним и текст залазит наверх. Чтобы избавиться от этого, измените:
a.st2 .img2 img{width:100px;height:124px;} на:
a.st2 .img2 img{width:100px;height:124px;position:absolute;z-index:150;}
И все работает как надо
.
Спасибо за быстрый ответ! Я понял ваше решение (раньше не знал что такое z-index — новичек я). Но результат после отвода мыши у меня тот же
Причем что в вашем примере (скачивал и изменял код), что у меня в блоге, и в разных браузерах. Продолжаю экспериментировать...
А, всё, разобрался — я недооценил свойство position:absolute; в вашей подсказке. Без него не работало) Еще раз огромное спасибо!
Кстати, если кому-то интересно, вот полный код со всеми блоками и т.д. для картинки, увеличивающейся по наведению, красиво убирающейся и еще и со ссылкой. Прямо в таком виде его можно вставлять в html файл (а я пихал в html/js виджет блоггера)
a.st2 .img2{width:150px;height:150px;} a.st2 .img2 img{width:150px;height:150px;position:absolute;z-index:150;} a.st2:hover .img2{width:150px;height:150px;overflow:visible;} a.st2:hover .img2 img{visibility:visible;position:absolute;z-index:150;} $(function(){ $('.img2').hover(function(){ $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); }); }); <a href="http://ear-trap.blogspot.com" rel="nofollow"></a>Черт, здесь вставка режет код. Не смотрите код из предыдущего поста.
Вот нормальная ссылка:
ear-trap, надо было сразу показать вам пример:
bitby.net/wp-demo/web/img...or-jquery/4.html
Привет, а не подскажешь ли как сделать чтобы в варианте с jQuery, размер картинки оставался тот же, а «камера» как бы надвигалась на заданную область картинки, например на человека в желтом в данном случае. То есть сначала видна картинка целиком, а при наведении курсора — увеличенная область с человеком в желтом и при этом размеры картинки остаются неизменными, а то что не влезает уходит «за края»?
arjuna, создаете блок (width:x;height:y;overflow:hidden;). В него помещаете картинку. Задаете ей параметры начального изображения (width:x;height:y;). При наведении курсора, увеличиваете изображение.
Спасибо большое за ответ, чуть попозже попробую
а в css что-нибудь надо поправить? а то скрипт не срабатывает, сейчас структура такая:
a
div img
div ovevfl
img
/div
/div
/a
все, я разобрался, спасибо за скрипт
Тут набросал маленький PHP script который в зависимости от картинки сам генерирует CSS и HTML код. Может кому и пригодится (мне уже пригодился
<?php
//checks if the form has been submitted
if (isset ($_POST['Submit']))
{
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
$scale = $_POST['scale'];
if ($image) {
$info = getimagesize ( $image);
$t = time ();
$w = $info[0];
$ww = (int) $w/$scale;
$h = $info[1];
$hh = (int)$h/$scale;
echo «Insert in the CSS:»;
echo «a.st_».$t." .img_".$t."{width:".$ww."px;height:".$hh."px;overflow:hidden;border:0 none;}"."«;
echo „a.st_“.$t.» .img_".$t." img{width:".$ww."px;height:".$hh."px;border:0 none;}"."«;
echo „a.st_“.$t.»:hover .img_".$t."{width:".$ww."px;height:".$hh."px;overflow:visible;visibility:hidden;border:0 none;}"."«;
echo „a.st_“.$t.»:hover .img_".$t." img{width:".$w."px;height:".$h."px;visibility:visible;position:absolute;z-index:150;border:0 none;}"."";
echo «Insert in the HTML:»;
echo htmlspecialchars ("");
echo htmlspecialchars (" ");
echo htmlspecialchars (" ");
echo htmlspecialchars (" ");
echo htmlspecialchars ("");
}
}
?>
Image to analyse:
Scale:
Дмитрий, нужна ваша помощь, вы говорили, что разобрались с highslide.com/ref/hs.Expa...otype.onMouseOut.
WebMast, не могли бы вы скинуть его e-mail мне на мыло? Боюсь, здесь он не увидит моё сообщение.
Хороший скрипт, все получилось, но вот ужасно получается
когда картинка в абзаце, внутри текста ((((( у меня сама картинка прыгает на новую стоку и после нее тоже новая строка начинается, и еще после картинки почему то текст без стиля, стиль применяется к абзацу в css... я так поняла что div на нее так действует... подскажите пожалуйста как исправить??? может этот скрипт не подходит к абзацу???
помогите мне пожалуйста уменья проблема с этим скриптом.
я закинул на свой сайт
и он не совсем корректно работает помогите мне
Наталья, скрипт предназначен именно для картинок.
Не совсем понятна ваша идея задачи. Опишите или покажите пример.
Может поможет: bitby.net/web/plavnoe-izm...vysoty-u-obekta/
artistoo7, посмотрите: bitby.net/wp-demo/web/img...or-jquery/4.html