Эффект увеличения фото
<html>
<head>
<link rel="stylesheet" href="http://thefinishedbox.com/files/freebies/hoverzoom/css/style.css?v=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://thefinishedbox.com/files/freebies/hoverzoom/js/hover.zoom.js"></script>
<script>
$(function() {
$('.zoom').hoverZoom(); // Default
});
</script>
</head>
<body>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom" id="blue"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" alt="thumbnail" /></a>
</body>
</html>
Привет! если выполнить этот код что выше, то выведет 3 картинки и при наведении мыши на картину она плавно увеличеваеться и идет затемнение всех 3 картинок также везде появляется изображение лупы, а мне нужно что бы при наведении на одну картинку она и только она увеличевалась и затемнялась и выводилось изображение лупы, сейчас с тремя такое, как мне сделать что бы только с одной картинкой такой эффект был????? но есть одно условие что вот этот код я не могу править <a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" alt="thumbnail" /></a> <a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" alt="thumbnail" /></a> <a href="#" class="zoom" id="blue"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" alt="thumbnail" /></a> |
помогите решить эту задачу
|
hoverZoom и защита фото (типа)
sergofedor06,
всё это можно сделать на css ... используйте актуальное, а не старое с ошибками
<html>
<head>
<link rel="stylesheet" href="http://thefinishedbox.com/files/freebies/hoverzoom/css/style.css?v=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$.fn.extend({
hoverZoom: function(settings) {
var defaults = {
overlay: true,
overlayColor: "#2e9dbd",
overlayOpacity: .7,
zoom: 25,
speed: 300
};
var settings = $.extend(defaults, settings);
return this.each(function() {
var s = settings;
var hz = $(this);
var image = $("img", hz);
var overley = $('<div class="zoomOverlay" />');
image.load(function() {
if (s.overlay === true) {
hz.append(overley);
overley.css({
opacity: 0,
display: "block",
backgroundColor: s.overlayColor
})
}
var height = image.height();
image.fadeIn(2000);
hz.hover(function() {
image.stop(true,true).animate({
height: height + s.zoom,
marginLeft: -s.zoom,
marginTop: -s.zoom
}, s.speed);
if (s.overlay === true) overley.stop().animate({
opacity: s.overlayOpacity
}, s.speed)
}, function() {
image.stop(true,true).animate({
height: height,
marginLeft: 0,
marginTop: 0
}, s.speed);
if (s.overlay === true) overley.stop().animate({
opacity: 0
}, s.speed)
})
});
image[0].complete && image.load()
})
}
})
})(jQuery);
</script>
<script>
$(function() {
$('.zoom').hoverZoom()
});
</script>
</head>
<body>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom" id="blue"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" alt="thumbnail" /></a>
</body>
</html>
|
Спасибо вы меня выручили!
|
сделан зумирование картинки на ЦСС
сделал вот так, но сейчас у меня работает зумирование картинки, но как мне привязать лупу? что бы при наведении на картинку она не только зумировалась но и проявлялась иконка лупы! вот код
<style>
.zoom {
margin: auto;
overflow:hidden;
width: 180px;
height:120px;
}
.zoom img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.zoom img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
</style>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" /></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" /></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" /></a></div>
подскажите где мне в стилях нужно вставить ссылку на иконку лупы background-image:url(images/watching_videos.png); |
sergofedor06,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style>.zoom{
margin:auto;
overflow:hidden;
width:180px;
height:120px;
position:relative;
}
.zoom img{
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.zoom:hover img{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
-o-transform:scale(1.2);
}
.zoom:hover .zoomOverlay{
display:block;
opacity:0.7;
background-color:rgb(46,157,189);
}
.zoomOverlay{
background-image:url("http://thefinishedbox.com/files/freebies/hoverzoom/images/zoom.png");
background-position:center center;
background-repeat:no-repeat;
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
-webkit-transition:all 0.7s ease-in-out;
-moz-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out;
transition:all 0.7s ease-in-out;
opacity:0;
}
</style>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" /><div class="zoomOverlay" ></div></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" /><div class="zoomOverlay" ></div></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" /><div class="zoomOverlay" ></div></a></div>
</body>
</html>
|
В
<link rel="stylesheet" href="http://thefinishedbox.com/files/freebies/hoverzoom/css/style.css?v=1"> Строка : background-image:url(../images/zoom.png); |
Цитата:
я не про то спрашиваю! вы если не заметили то я все переделал на css уже работает без скрипта! и мне нужно только вывести background-image:url(images/watching_videos.png); мой пост над вашим, вы немного не в тему ответили! |
РОНИ да вы гуру великий маестро!
просто огромнейшое спасибо, работает даже в ие! |
| Часовой пояс GMT +3, время: 23:33. |