Манипулирование слоями css с помощью javascript
Мне интересно, можно ли создать своего рода галерею миниатюрных изображений, в которой при нажатии на миниатюру будет отображаться полное изображение в слое. Мне было интересно, можно ли загрузить все слои и соответствующие изображения и использовать javascript для изменения индекса z или чего-то подобного, чтобы избежать перезагрузки или выхода из страницы. Я бы предпочел избегать использования серверной технологии, но не знаю, возможно ли это.
редактировать:
Я не стремлюсь к решению «лайтбокса» или чему-либо, что перекрывает страницу, я скорее хочу, чтобы изображение отображалось как часть страницы и изменялось без перезагрузки страницы, в основном как PIctureSlide, ссылка на который приведена ниже. Но что более важно, мне интересно, будет ли это легко написать без использования фреймворка, и будет ли это работать так, как я думал выше?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
JQuery должен иметь возможность делать то, что вы хотите.
У вас есть несколько эскизов, созданных с его помощью, например:
- Картинка-слайд
- JQuery Popeye (что может быть близко к тому, что вы ищете)
Существует множество галерей миниатюрных изображений, которые вы можете написать самостоятельно, если у вас нет особой необходимости. такие как
http://www.huddletogether.com/projects/lightbox/
Popeye на самом деле является альтернативой лайтбоксу с лучшей интеграцией в веб-страницу.
Другой, возможно, гораздо более полный, чем лайтбокс (даже если он в порядке), я рекомендую в целом, если вы не используете jquery или любую другую библиотеку: http://www.mjijackson.com/shadowbox/
Я бы порекомендовал для этого GreyBox, он довольно маленький и работает так же хорошо, как и любое другое решение для лайтбоксов.
Однако, если вы уже используете JS-фреймворк (Mootools / jQuery / Prototype) на той же странице, вы также можете выбрать решение, основанное на нем, есть много вещей, которые можно найти в Google. Если вам специально нужна функция слайд-шоу (у GreyBox ее нет, AFAIK), я успешно использовал Лайтбокс слайд-шоу (на основе прототипа) в прошлом.
Возможно. Вы можете поместить все изображения в отдельный блок div, создать класс CSS, который скрывает вещи, и другой класс, который отображает изображения с любыми другими настройками, которые вы хотите. Когда кто-то нажимает на миниатюру, измените класс в соответствующем div, чтобы показать правильное изображение, и скройте все остальные.
Тем не менее, уже есть несколько флэш-инструментов, которые сделают именно это, если вы не возражаете против требований флэш-памяти.
Если вы делаете это с помощью JavaScript, убедитесь, что вы используете такую библиотеку, как jQuery или Scriptaculas, чтобы справиться с проблемами кроссбраузерности. Однажды я сделал нечто подобное, используя простой JavaScript, и это был кошмар.
Спасибо, меня в основном интересовало понимание того, как это будет работать. Как сделать так, чтобы ссылка меняла класс отдельного div?
Используйте атрибут ссылки onClick (). "... href = '#' onClick = 'ShowImage (4); return false;' ..."
Я предполагаю, что ShowImage - это функция ... Я имею в виду, что функция на самом деле сделает, чтобы изменить класс?
Это зависит от того, какую библиотеку вы используете, или от того, делаете ли вы это на прямом JS. С jQuery вы должны использовать что-то вроде: $ ("CSS_ID_Of_Place_Holder_Div"). Html ('<img src = "path / to / image /' + id + '. Jpg">'); Похоже, вам нужно потратить некоторое время на изучение JavaScript.
Я стараюсь избегать использования фреймворка и хотел сделать это прямо на JS. Одно дело знать язык, а другое понимать логику.
Да, без фреймворка можно:
<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>
Вот простой пример с использованием библиотеки Прототип:
<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>
Привет, спасибо, я начинаю понимать. Хотя этот пример у меня не работает. Первый работает, но как бы мне изменить его, чтобы я мог вернуть его в текст. Я попытался использовать код здесь: nomorepasting.com/getpaste.php?pasteid=22222, и я не уверен, почему он не работает.
Вам нужно передать строки вашей функции. Вы передаете переменные. Попробуйте: onclick = "sbox ('test1', 'test2'); return false;"
Кроме того, вы должны использовать "." для имен ваших классов, а не "#". Использование «#» назначает стиль имени DIV, а не классу. Примерно так: .test1 {...} и ваш DIV должен иметь: <div class = 'test1' id = "test1"> ... </div>
Конечно, возможно, хотя большинство фреймворков предложат вам нежелательный лайтбокс.
Я всегда рекомендую заставить JS изменить класс объекта и позволить CSS обрабатывать то, как это представлено, но JS требуется для анимации, если это то, что вам нужно.
Нет ничего проще, чем писать без такой библиотеки, как jQuery, как с ней. Вы можете это сделать, но вам придется беспокоиться обо всех проблемах совместимости между браузерами и обходе DOM.