Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение свойств картинок в документе (https://javascript.ru/forum/misc/1557-izmenenie-svojjstv-kartinok-v-dokumente.html)

Gekt0r 13.08.2008 13:37

Изменение свойств картинок в документе
 
Всем привет, передо мной такая задачка. Через админку на сайт с помощью визуального редактора добавляются документы, содержащие картинки. Требуется написать скрипт, который все картинки будет оснащать свойством "onclick", чтоб по щелчку открывался попапчик с большой картинкой. Жаваскрипт я знаю на поверхностном уровне, поэтому обращаюсь за помощью. Я много лазил по сети, нашел пару вариантов решений, но они не совсем подходят.
Если я правильно понимаю, сначала надо собрать все картинки, что есть в документе, вычислить для каждой ссылку на большую картинку (это я уже сделал), а затем добавить к ним свойство onclick. Посоветуйте, плз, как это можно сделать?

ZoNT 13.08.2008 13:40

так в чём у тебя затык? в назначении onclick?
пиши imgXXX.onclick = function() {вызываем большую картинку};

Gekt0r 13.08.2008 13:49

Затык в неполном понимании жаваскрипта)

То есть можно сделать так:
1. собрать в массив все картинки в документе.
2. Для каждой вызвать array[index].onclick = function () {http://big_image};
и это автоматом сделает все картинки кликабельными? И если так, то как их собрать в один массив?

Может, коряво вопрос поставил, но в знании жаваскрипта есть пробелы, часть из которых я ликвидировал прочтением мануалов, но часть еще дает о себе знать)

ZoNT 13.08.2008 14:05

Цитата:

Сообщение от Gekt0r (Сообщение 4508)
Затык в неполном понимании жаваскрипта)

То есть можно сделать так:
1. собрать в массив все картинки в документе.
2. Для каждой вызвать array[index].onclick = function () {http://big_image};
и это автоматом сделает все картинки кликабельными? И если так, то как их собрать в один массив?

Может, коряво вопрос поставил, но в знании жаваскрипта есть пробелы, часть из которых я ликвидировал прочтением мануалов, но часть еще дает о себе знать)

1) document.getElementsByTagName('img');
2) array[index].onclick = function () {this.src="http://big_image"};

Gekt0r 13.08.2008 14:50

Цитата:

Сообщение от ZoNT (Сообщение 4510)
1) document.getElementsByTagName('img');
2) array[index].onclick = function () {this.src="http://big_image"};

Смотри, я сделал так:
в самый конец страниц добавил код:

Код:

<script language="javascript">
var imgList = document.getElementsByTagName('img'); //список картинок


        for (var index_a = 0; index_a < imgList.length; index_a++) {
                               
//тут код, который вычисляет адрес большой картинки и
//записывает его в переменную bigLink

                    imgList[index_a].onclick = function ()  {this.src=bigLink;};       
        }
</script>

В итоге при клику по картинке она просто заменяется на новую, большую. А я хочу, чтоб открывался попап с большой картинкой... Как это можно сделать?

ZoNT 13.08.2008 15:18

imgList[index_a].onclick = function () {открываем попап с bigLink;};

Можешь поискать готовые скрипты для открытия попапа (их очень много), можешь сам написать по их примеру.

Gekt0r 13.08.2008 17:19

Я сделал так:
imgList[index_a].onclick = function () {window.open(bigLink);};

Единственно, слишком большое окно открывается, а в Firefox - новая вкладка вместо попапчика.

А можно как-нибудь открывать картинку без нового окна, чтоб она в этом же разворачивалась?

Gekt0r 14.08.2008 17:37

Подниму снова эту тему.
Немного поменял условия задачи. Все практически то же самое, но я хочу при нажатии на картинку сделать не новый попап, а чтоб в этом же окне разворачивался див. Нечто подобное реализовано тут: http://www.felix-riesterer.de/main/seiten/js_popup.html Но здесь онкликом оснащаются не картинки (как хочу я), а ссылки, плюс там большой, сложный код, я хочу проще сделать. Итак, я в документе сделал <div id="divPopup">
прописал в css, чтоб он был hidden.

В хедере написал функцию
<script language="Javascript">
function showDiv () {
    var el = document.getElementById('divPopup');
    el.style.visibility = 'visible';
}
</script>


а внизу страницы добавил код

<script language="javascript">
var imgList = document.getElementsByTagName('img'); //список картинок


	for (var index_a = 0; index_a < imgList.length; index_a++) {
				

		    imgList[index_a].onclick = showDiv()};	
        }
</script>


Пока этот кусок кода должен просто показывать див. Потом я вставлю в див код большой картинки. Но почему-то не работает. Страница сразу отображается с дивом, словно он визибл, а не хидден. Подскажите, почему так??

ZoNT 14.08.2008 17:50

el.style.visibility = 'visible'
визибл резервирует место на странице.
используй display="none"/"block"

Gekt0r 14.08.2008 18:30

поменял, все осталось, как было...
Кстати, ИЕ выдает внизу слева желтый треугольничек об ошибке.
ругается на последнюю строку: "imgList[index_a].onclick = showDiv();"
говорит "not implemented


Часовой пояс GMT +3, время: 05:34.