ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / zoom для нескольких фото
5 сообщений из 5, страница 1 из 1
zoom для нескольких фото
    #35829071
versani
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
versani
Участник
Есть ли скрипт готовый, чтобы сделать как на http://www.usc.co.uk/Nike+Capri+Mono/00073049400010,default,pd.html?cgid=1100

Нужно чтобы, при нажатии на маленькое фото, появилось большое, и мы могли его бы зумить.
...
Рейтинг: 0 / 0
20.02.2009, 10:38
| Ответить | Цитировать | Написать  
zoom для нескольких фото
    #35829141
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
В том примерчике програмистской работы - минимум. Ну пара строчек. Основная работа, вобщем-то, дизайнерская, т.е. фотография, полупрозрачная картинка и т.д. А отображать большую картинку в относительно позиционированном диве с owerflow:hidden - штука элементарная.
...
Рейтинг: 0 / 0
20.02.2009, 11:00
| Ответить | Цитировать | Написать  
zoom для нескольких фото
    #35829159
versani
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
versani
Участник
там скрипт jquery.zoom. Вот с ним не получается. Там слишком сложно на мудренно, может кто-то видел простенький пример?
...
Рейтинг: 0 / 0
20.02.2009, 11:04
| Ответить | Цитировать | Написать  
zoom для нескольких фото
    #35829947
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Я вот не поленился и написал специально для тебя. Можешь полюбоваться своим ботинком.
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<html>
<script>
var coeff= 7 ; //коэффициент увеличения - подобрать
var leftPos =  0 ;
var topPos =  0 ;
window.onload=function(){
var obj=document.getElementById("im");
document.getElementById("mdiv").style.width=parseInt(obj.width)/coeff+"px";
document.getElementById("mdiv").style.height=parseInt(obj.height)/coeff+"px";
document.getElementById("d").style.width= 200 +document.getElementById("im").width+"px"; // 200  - подобрать на сколько вторая - шире
document.getElementById("d").style.height=document.getElementById("im").height+"px"; //по высоте тоже можно подобрать
document.getElementById("zoom").style.width=parseInt(document.getElementById("im").width)*coeff;

while(obj!=null)
{
      leftPos += obj.offsetLeft;
      topPos += obj.offsetTop;
      obj = obj.offsetParent;
}
}
function mv(ev){
document.getElementById("zoom").style.visibility="visible";
var wPos=parseInt(document.getElementById("mdiv").style.width)/ 2 ;
var hPos=parseInt(document.getElementById("mdiv").style.height)/ 2 ;
var lPos=parseInt(ev.clientX)-leftPos-wPos;
var tPos=parseInt(ev.clientY)-topPos-hPos
if((lPos>= 0 )&&(lPos<=parseInt(document.getElementById("im").width)-wPos* 2 ))
	document.getElementById("mdiv").style.left=lPos+"px";
if((tPos>= 0 )&&(tPos<=parseInt(document.getElementById("im").height)-hPos* 2 ))
	document.getElementById("mdiv").style.top=tPos+"px";
document.getElementById("zoom").style.left=-parseInt(document.getElementById("mdiv").style.left)*coeff+"px";
document.getElementById("zoom").style.top=-parseInt(document.getElementById("mdiv").style.top)*coeff+"px";
}

function out(){
document.getElementById("zoom").style.visibility="hidden";
}
</script>
<body>
<table border="0"><tr>
<td><div style="position:relative" onmousemove="mv(event)" onmouseout="out()"><img id="im" width="271" height="320" src="http://usc.scene7.com/is/image/usc/9104-1069-2600-10_1?wid=1256&hei=1480&resmode=sharp&op_usm=1.1,0.5,0,0&scl=1.35" />
<div id="mdiv" style="position:absolute;top:0px;height:10px;width:10px;left:0px;z-index:1;border-style:solid;border-width:1px">
</div>
</td>
<td><div id="d" style="position:relative;overflow:hidden">
<img id="zoom" src="http://usc.scene7.com/is/image/usc/9104-1069-2600-10_1?wid=1256&hei=1480&resmode=sharp&op_usm=1.1,0.5,0,0&scl=1.35" style="position:absolute;top:0px;left:0px" /></div></td>
</tr></table>
</body>
</html>
...
Рейтинг: 0 / 0
20.02.2009, 15:01
| Ответить | Цитировать | Написать  
zoom для нескольких фото
    #35830049
versani
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
versani
Участник
Спасибо!
...
Рейтинг: 0 / 0
20.02.2009, 15:40
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / zoom для нескольких фото
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35829159&tid=1455161]:
 0ms
get settings:
 8ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 200ms
get topic data:
 9ms
get forum data:
 3ms
get page messages:
 39ms
get tp. blocked users:
 1ms
others: 206ms
total:  493ms
созд. / загр.: 493ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]