|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
10.11.2015, 22:05 | #1 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
Эффект увеличения фото
Код HTML:
<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 картинок также везде появляется изображение лупы, а мне нужно что бы при наведении на одну картинку она и только она увеличевалась и затемнялась и выводилось изображение лупы, сейчас с тремя такое, как мне сделать что бы только с одной картинкой такой эффект был????? но есть одно условие что вот этот код я не могу править Код HTML:
<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> |
10.11.2015, 22:59 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
ну если ты ниче не можешь, значит ты ниче не можешь.
Соболезную.
Alar, верни репу!
|
10.11.2015, 23:08 | #3 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,568
|
Вам здесь не нужен скрипт. Это всё делается на уровне CSS.
Для тегов IMG внутри ссылок пропишите атрибут ID и задайте им уникальном значение для каждой картинки. Далее для увеличения и появления лупы пишите такой код CSS: Код:
|
11.11.2015, 11:20 | #4 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
спасибо, за цсс - но похоже не то!
в моем случае, я не могу прописать уникальный ид для каждой картинки есть только вот такая конструкция с фото в которой ничего менять нельзя Код:
привязаться можно только к class="zoom" и таких ссылок на странице 10, у меня нет возможности добавить к каждой уникальный ид из вашего примера (#pic1) Последний раз редактировалось Вадим Мошев; 11.11.2015 в 12:23. |
11.11.2015, 12:30 | #5 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
сделал вот так, но сейчас у меня работает зумирование картинки, но
как мне привязать лупу? что бы при наведении на картинку она не только зумировалась но и проявлялась иконка лупы! вот код Код 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); |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Эффект плавного увеличения Элементов как Highslide | eagleoriginal | Компоненты Delphi | 11 | 29.06.2012 20:26 |
Сбой увеличения изображения | MetisKot | HTML и CSS | 1 | 25.12.2011 17:55 |
Эффект увеличения изображения | dacorp | JavaScript, Ajax | 2 | 30.06.2011 15:00 |
операции увеличения в с++ | JOFRIF | Помощь студентам | 8 | 26.04.2008 20:25 |