Эффект увеличения фото
<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, время: 11:39. |