Для того, чтобы на Вашем сайте появилась красивая фотогалерея совсем не нужно изучать разные языки программирования и писать огромное количество кодов. Это же Интернет, все уже давно сделано за нас.
В качестве галереи мы возьмем бесплатно распространяемый скрипт thickbox на основе javascript-библиотеки lightwindow (это было самое сложное предложение в тексте).
Итак, устанавливаем галерею на сайт:
- Сохраните файлы thickbox.js и jquery.js в каталог /script/, файл thickbox.css в каталог /css/, файл loadinganimation.gif в каталог /i/
- В файле /script/thickbox.js поправьте строку
var tb_pathToImage = "images/loadingAnimation.gif";на
var tb_pathToImage = "../i/loadingAnimation.gif"; - В коде страницы, куда Вы вставляете фотогалерею, перед тегом </head> впишите:
<script type="text/javascript" src="/script/jquery.js"></script>
<script type="text/javascript" src="/script/thickbox.js"></script>
<link rel="stylesheet"href="/css/thickbox.css" type="text/css" media="screen" /> - Сложите картинки, которые будут отображаться в галерее в каталог /images/. Помните, что т. к. галерея создается для web, нужно оптимизировать изображения для сокращения их размера. Для удобства называйте картинки так: image.jpg (увеличенное изображение) и s-image.jpg (картинка-превью)
- В коде страницы вставляем превью-ссылки на увеличенные изображения следующим образом:
<a href="/images/image.jpg" title="сюда впишите заголовок / или оставьте поле пустым" class="thickbox" rel="gallery-test"><img src="/images/s-image.jpg" alt="Изображение" /></a>
Вот и все. 5 простых шагов помогают сделать Ваш сайт более удобным, современным и привлекательным. Если у Вас возникли вопросы, посмотрите внимательно наш пример.
Метки: javascript, thickbox, верстка, галерея
Удобная штука, прикручу-ка я ее куда-нибудь :)
Видимо, кроме меня никто пробовал установить эту галерею :)
Так вот с какой проблемой столкнулся я — выполнив все 5 пунктов, галерея не работала. Причина в п.3: при указании параметра src первый слэш ставить не надо!
index.html
script/jquery.js
script/thickbox.js
Ты наверно просто не на сервере это делал, а на компьютере. Вот у тебя и искались скрипты от корня диска.
а можно этот скрипт как то сюда приклеить и чтоб пользователи могли сами добавлять изображения туда…? http://greenyline.com
…все сделал, но при нажатии на ссылку-картинку (превьюшку) большая картинка не загружается :-( отчего бы это? (типа — кто виноват и что делать?)
что вместо загрузки большой картинки происходит? если просто открывается картинка в новой странице, то не работает скрипт (либо неправильно прописаны вызовы скриптов в теге head, либо неправильно написаны классы в гиперссылке). если появляется пустой квадрат в середине экрана на черном фоне, то скорее всего урл большой картинки неправильно указан.
…дык вот весь код! — <!DOCTYPE html PUBLIC>
<html>
<head><title>Пример фотогалереи</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/thickbox.js"></script>
<link rel="stylesheet"href="css/thickbox.css" type="text/css" media="screen"/>
</head>
<body >
<a href="images/_2250002.jpg" class="thickbox" rel="gallery-plants"><img src="images/s — _2250002.jpg" alt="Растение 1" /></a>
<a href="images/_2260007.jpg" title="сюда впишите заголовок / или оставьте поле пустым" class="thickbox" rel="gallery-plants"><img src="images/s — _2260007.jpg" alt="Растение 2" /></a>
<a href="images/_4100004.jpg" title="сюда впишите заголовок / или оставьте поле пустым" class="thickbox" rel="gallery-plants"><img src="images/s — _4100004.jpg" alt="Растение 3" /></a>
<a href="images/P1020011.jpg" title="сюда впишите заголовок / или оставьте поле пустым" class="thickbox" rel="gallery-plants"><img src="images/s — P1020011.jpg" alt="Растение 4" /></a>
</body></html>
а происходит так — экран темнеет, но картинки нету…
…сделал все как в примере, и папки так же назвал даже!
Привет всем!
галерейка
http://test1.atlas-is.ru/site_media/october/easy-galery.js
картинка загрузки
http://test1.atlas-is.ru/site_media/october/loadspiral.gif
вот вам простенькая галерейка, легкая простая, в две строчки :)
пробуйте тестируйте пишите ;)
в коментах скрипта все написано что делать!
пример
<a href="путь/картинка" title="описание картинки" rel="EG">бла бла бла</a>
[b]после![/b] ссылок на картинки добавляем строчку
<script type="text/javascript" src="path to galeryjs/easy-galery.js"></script> ъ
и вес должно работать.
Таже проблема, что у max.
Если галерея, т.е. указано сво-во rel для картинок, то не пашет.
Вылечилось изменением строки в thickbox.js
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
на
TB_TempArray = $("a[rel="+imageGroup+"]").get();
Lexander,
[cite]TB_TempArray = $("a[rel="+imageGroup+"]").get(); [/cite]
после изменения строки
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
на
TB_TempArray = $("a[rel="+imageGroup+"]").get();
картинка открывается просто в новом окне… по крайней мере у меня так…
если не менять — то начинается затемнее… но чего-то нужную картинку не находит…
внимательно изучил все шаги…
и все равно не работает… просто не открывается большая кратинка…
висит в режиме думанья!!!
ask1503, пути до больших картинок точно правильно прописаны? Та строчка, которую указал Lexander, должна исправлять проблему.
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
Я вообще такую строку найти не могу!
Помогите!
Проблемку наверно так никто и не решил??
Даже если указываешь урл одной и той же картинки, все равно она не открывается!
Происходит затемнение, появляется "loadingAnimation.gif" и все…
… а строки "TB_TempArray = $("a[@rel="+imageGroup+"]").get();" в файле "thickbox.js" действительно нет…
Господа, кто-нибудь решил задачу?
Подскажите пожалуйста, как заставить это работать!
вышеприведенной строки в файле действительно нет, если возможно скиньте рабочий полный файл
Вот домашняя страница thickbox.js — http://jquery.com/demo/thickbox/. Возьмите оттуда несжатую версию скрипта, там как раз есть вышеприведенная строка (№ 79).
Изменение этой строки (удаление "собачки") требуется в том случае, если вы используете jQuery версии 1.3 и выше.
Также на всякий случай проверьте наличие и корректность файла thickbox.css (можно скачать там же).
Народ! У кого проблемы со скриптами, то решение очень простое! Когда закачал jquery.js по ссылке в п. 1, тогда не работало. А вот если в Опере кликнуть правой кнопкой мыши по ссылке http://htc-cs.ru//article/script/jquery.js и выбрать "Сохранить по ссылке как…", тогда закачаете именно ту jquery.js которая в примере (а он как видите работает). Аналогично если посмотреть хтмл-код страницы с примером можна закачать и thickbox.js, и thickbox.css У меня тепер все рабоатет!
Спасибо всем!!! Получилось!!
Всем здравствовать и процветать!
Всё работает, проблем не возникло, за что — большое спасибо. Но, может быть, кто-нибудь подскажет, как применить к превьюшкам свои css-стили. А то какой-то прям затык…
Привет всем!
Полезный скрипт, и сразу же вопрос.
Можно ли сделать так, чтобы клик по картинке менял ее на следующую в режиме показа галлереи (как по ссылке "next").
Я думаю, это всем пригодится и мне очень надо!
Заранее благодарен, если кто разберется.
dlynn,
Хотя бы так:
<style type="text/css">
dlynn, img {
border:solid;
border-color: #000000;
margin-left: 15px
}
</style>
работает без проблем
Если еще кому-то интересно, то у меня (не долго думая) получилось таким образом (тока сильно ногами не бейте):
в файле thickbox.js
1) заменила строку
TB_imageCount = "Фото " + (TB_Counter + 1) +" из "+ (TB_TempArray.length);
на TB_imageCount = "Фото " + (TB_Counter + 1) +" из "+ (TB_TempArray.length-1);
чтобы счетчик соответствовал количеству отображаемых имиджей
2)заменила
$("#TB_ImageOff").click(tb_remove);
на
$("#TB_ImageOff").click(goNext);
чтобы не закрывать по клику, а показывать следующий имидж.
В самой html-ке:
после ссылки на последний имидж галереи вставила еще одну ссылку на первый имидж со стилем "display:none;":
<a href="/img/works/bc_zkr/8.jpg" title="bla" class="thickbox" rel="bc_zkr">
<img src="/img/works/bc_zkr/8.jpg" alt="" class="pic"/></a>
<a href="/img/works/bc_zkr/1.jpg" title="bla" class="thickbox" rel="bc_zkr" style="display:none;">
<img src="/img/works/bc_zkr/1.jpg" alt="" class="pic"/></a>
таким образом "зацикливается просмотр"
Работающий экземпляр можно глянуть тут:
http://www.paladin-auto.ru/works/obves.html
sashkin, спасибо за последний комментарий!