манипулирование слоями CSS с помощью JavaScript

Question

Мне интересно, возможно ли создать своего рода галерею миниатюр изображений, в которой при нажатии на миниатюру будет показано полное изображение в слое. Мне было интересно, можно ли было загрузить все слои и соответствующие изображения и использовать javascript для изменения индекса z или чего-то подобного, чтобы избежать перезагрузки или выхода из страницы. Я бы предпочел избегать использования серверной технологии, но не знаю, возможно ли это.

редактирование:

У меня нет решения «лайтбокса» или чего-либо, что перекрывает страницу, я скорее хочу, чтобы изображение появилось как часть страницы, и изменилось без перезагрузки страницы, в основном как PIctureSlide, ссылка на которую приведена ниже. Но что еще важнее, мне интересно, будет ли это легко написать без использования фреймворка, и будет ли он работать так, как я думал выше?

Answer 1

Да, вы можете сделать это без рамки:

<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="document.getElementById('big').style.backgroundImage='url(Big.gif)'"><img border="0" src="images/Thumb.gif" /></a>

Вот простой пример использования библиотеки Prototype :

<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="$('big').style.backgroundImage='url(Big1.gif)'"><img border="0" src="thumb1.gif" /></a>

В этом сценарии предполагается, что все большие изображения имеют размер 500 x 500 пикселей.

Вот альтернативный способ сделать это:

<div id='big'></div>
<a href="javascript://load big image" onclick="loadBig('Big1.gif')"><img border="0" src="thumb1.gif" /></a>
<script type="text/javascript">
function loadBig() {
    $('big').innerHTML = "<img src='Big1.gif'>"
}
</script>

Answer 2

Я бы порекомендовал GreyBox для этого, он достаточно мал и работает так же хорошо, как и любое другое решение для лайтбоксов.

Однако, если вы уже используете JS-фреймворк (Mootools / jQuery / Prototype) на той же странице, вы могли бы также пойти на решение, основанное на нем, есть много вещей, которые можно найти Если вам требуется функция слайд-шоу (у GreyBox нет AFAIK), я использовал Лайтбокс слайд-шоу (на основе прототипов) с успехом в прошлом.

Answer 3

Существует множество галерей миниатюрных изображений, чтобы написать ее самостоятельно, если у вас нет особых потребностей. такие как

http://www.huddletogether.com/projects/lightbox/

Answer 4

Конечно, возможно, хотя большинство фреймворков предложит вам лайтбокс, который вам не нужен

Я всегда рекомендую заставить JS изменить класс объекта и позволить CSS обрабатывать, как это представляется, но JS требуется для анимации, если это то, что вам нужно

Answer 5

Это возможно. Вы можете поместить все изображения в их собственный div, создать класс CSS, который скрывает объекты, и другой, который отображает изображения с любыми другими настройками, которые вы хотите. Когда кто-то нажимает на пиктограмму, измените класс на соответствующем элементе div, чтобы показать правильное изображение, и скройте все остальные.

Тем не менее, уже есть несколько флеш-инструментов, которые сделают именно это, если вы не возражаете против требований флеш-памяти.

Если вы делаете это с помощью JavaScript, убедитесь, что вы используете библиотеку, такую ​​как jQuery или Scriptaculas, чтобы помочь справиться с кросс-браузерными проблемами. Однажды я делал нечто подобное, используя прямой JavaScript, и это был кошмар.

Answer 6

Еще один, возможно, гораздо более полный, чем лайтбокс (даже если он в порядке), я рекомендую в целом, если вы не используете jquery или любую другую библиотеку: http://www.mjijackson.com/shadowbox/

Answer 7

JQuery должен иметь возможность делать то, что вы хотите.

У вас есть несколько эскизов, например:

• Фото-слайд
• JQuery Popeye (что может быть близко к тому, что вы ищете)