alpotemkin
-
Posts
9 -
Joined
-
Last visited
alpotemkin's Achievements
Explorer (1/14)
0
Reputation
-
Хммм... хороший вариант, и кода меньше.
-
Да просто не получилось прикрутить твое окошко к моим пунктам. То ли тупой такой, то ли руки кривые... В общем у меня такой вариант: 1. Главная страница <html> <head> <title>Test</title> <script type="text/javascript" language="JavaScript" src="./pics.js"></script> <script language='javascript'> function show(path) { if (obj = document.getElementById('pic')) { obj.src = path; } } </script> </head> <body onLoad="handset()"> <center> <!-- Вывод большой картинки --> <img id="pic" src = "01S.jpg" onClick="openw(this)"> <!-- Превьюшки --> <a href="#vf" onClick="show('01S.jpg'); return false;"><IMG src="001.jpg"></a> <a href="#vf" onClick="show('02S.jpg'); return false;"><IMG src="002.jpg"></a> </center> </body> </html> Где: 001.jpg - картинка цвета, 01S.jpg - превьюшка, 01.jpg - большая картинка 2. Окно с большой картинкой <html> <head> <script type="text/javascript" language="JavaScript" src="./pics.js"></script> </head> <body onload="showp()"> <center> <img border=1 OnLoad="resizep()" scr=""> <div OnClick="window.close()" style="cursor: hand"><img src="./close.gif" border="0" /></div> </center> </body> </html> 3. Скрипт // Изменение размеров окна под картинку function resizep() { var w, h; w = document.images[0].width; h = document.images[0].height; window.resizeTo(w+50, h+110);} // Функция показа картинки function showp() { document.images[0].src = location.search.substring(1);} // Функция открытия нового окна и передачи адреса картинки function openw(res) { var z = res.src; z = z.substring(0, z.length-5)+z.substring(z.length - 4); window.open("picview.htm?"+z, null, "top=20, left=40, channelmode=no, toolbar=no, location=no, directories=no, menubar=no, scrollbars=1");} // Изображения со событием onClick делаем с курсором рука function handset() { n = document.images.length; for (i=0; i<n; i++) {if (document.images[i].onClick != '') {document.images[i].style.cursor = 'hand';}} } Все работает, и вроде неплохо. А насчет твоего окошка - если не трудно, выложи пожалуйста рабочий вариант моего с твоим окошком. Если, конечно, не сложно. Вдруг будет лучше. Да и я пойму, где недопонял.
-
Не получилось сделать рабочий вариант. Придется отказаться от этой идеи.
-
Хм, спрашивая про идею, я имел в виду наглядный пример. Извиняюсь за наглость, но, как говорил, в JS пока новичок...
-
Работать-то работает. Только всплывающее окно большой картинки не прикрутить. Что касается блока - ну нет, мне ж не на странице выводить, а чтоб всплывало. :-) Я вот подумал, а может можно как-то объединить наши скрипты? Что-то типа такого: <script language='javascript'> function show(path) { if (obj = document.getElementById('pic')) { obj.src = path; } } </script> <!-- Вывод большой картинки --> <script type="text/javascript"> ... win.onclick = function(){ w = window.open('переменная выбранной картинки','Моё окно','width = 300,height = 300'); } </script> <!-- Превьюшки --> <a href="#vf" onClick="show('images/01.jpg'); return false;"><IMG src="images/01.jpg"></a> <a href="#vf" onClick="show('images/02.jpg'); return false;"><IMG src="images/02.jpg"></a> <a href="#vf" onClick="show('images/03.jpg'); return false;"><IMG src="images/03.jpg"></a> Только в <!-- Вывод большой картинки --> что-то как-то прикрутить. Я в JS ообще ноль, читаю вот доки, но пока не врубаюсь... Есть какие-то идеи?
-
Впечятляет. Но, как мне кажется, мой код проще будет. Хотя давай по пунктам: 1. Превьюшки Твой код: <ul id="menu"> <li style="background: red;" class="red"></li> ... </ul> Мой код: <!-- Превьюшки --> <a href="#vf" onClick="show('images/01.jpg'); return false;"><IMG src="images/01.jpg"></a> ... Т.е. в <IMG src="images/01.jpg"> задается картинка цвета, а в <a href="#vf" onClick="show('images/03.jpg'); return false;"> сама модель этого цвета. Попробовал отредактировать твой код, но что-то делаю не так. 2. Большая картинка Твой код: <script type="text/javascript"> var win = document.getElementById('win'); var menu = document.getElementById('menu'); var color = menu.getElementsByTagName('li'); for(var i=0;i<color.length;i++){ color[i].onclick = function(){ win.style.background = this.className; } } win.onclick = function(){ w = window.open('http://forum.htmlbook.ru/','Моё окно','width = 300,height = 300'); } </script> Мой код: <!-- Вывод большой картинки --> <img id="pic" src = "images/01.jpg"> В src = "images/01.jpg" показывается картинка модели. При выборе в превьюшках другого цвета тут выводится картинка модели выбранного цвета. Как http://www.foxsox.com/catalog/product.aspx...ectedstyle=2450. При этом нажимаешь на большую картинку и она открывается в полном размере. Опять же пробовал отредактировать - не получилось. А я всего лишь хотел повесить на <img id="pic" src = "images/01.jpg"> возможность открытия полноразмерной картинки выбранной модели. Может надо вместо "images/01.jpg" вставить какую-то переменную?
-
Гм... может мы друг друга недопоняли? Вот пример, как мне нужно - http://www.foxsox.com/catalog/product.aspx...ectedstyle=2450 Как это реализовать с помощью LightBox - непонятно. Пощелкай по картинкам, выбери любую и кликни на большую - она увеличится. Вот так мне и нужно.
-
Да, ты прав. Но я перекопал уже весь рунет, но не нашел нужного варианта. Есть по отдельности - смена по клику и всплывающее окно, а соединить их не получается. Второй день уже ковыряю...
-
Доброго времени суток! Есть js-скрипт смены картинок по клику: <script language='javascript'> function show(path) { if (obj = document.getElementById('pic')) { obj.src = path; } } </script> <!-- Вывод большой картинки --> <img id="pic" src = "images/01.jpg"> <!-- Превьюшки --> <a href="#vf" onClick="show('images/01.jpg'); return false;"><IMG src="images/01.jpg"></a> <a href="#vf" onClick="show('images/02.jpg'); return false;"><IMG src="images/02.jpg"></a> <a href="#vf" onClick="show('images/03.jpg'); return false;"><IMG src="images/03.jpg"></a> Алгоритм работы: 1. кликаешь в превьюшках по нужной картинке 2. она выводится в области большой картинки 3. кликаешь по большой картинке и она всплывает в большом размере - например LightBox. Вопрос: Как можно организовать 3 пункт? Я в программировании новичок. И потому, если не сложно, покажите в виде примера или ссылки на рабочий вариант, если таковой есть. Заранее спасибо за ответ.