26

Устанавливаем красивую галерею на свой сайт в 5 шагов

25 апреля 2008 года

Для того, чтобы на Вашем сайте появилась красивая фотогалерея совсем не нужно изучать разные языки программирования и писать огромное количество кодов. Это же Интернет, все уже давно сделано за нас.

В качестве галереи мы возьмем бесплатно распространяемый скрипт thickbox на основе javascript-библиотеки lightwindow (это было самое сложное предложение в тексте).

Итак, устанавливаем галерею на сайт:

  1. Сохраните файлы thickbox.js и jquery.js в каталог /script/, файл thickbox.css в каталог /css/, файл loadinganimation.gif в каталог /i/
  2. В файле /script/thickbox.js поправьте строку

    var tb_pathToImage = "images/loadingAnimation.gif";

    на

    var tb_pathToImage = "../i/loadingAnimation.gif";

  3. В коде страницы, куда Вы вставляете фотогалерею, перед тегом </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" />

  4. Сложите картинки, которые будут отображаться в галерее в каталог /images/. Помните, что т. к. галерея создается для web, нужно оптимизировать изображения для сокращения их размера. Для удобства называйте картинки так: image.jpg (увеличенное изображение) и s-image.jpg (картинка-превью)
  5. В коде страницы вставляем превью-ссылки на увеличенные изображения следующим образом:

    <a href="/images/image.jpg" title="сюда впишите заголовок / или оставьте поле пустым" class="thickbox" rel="gallery-test"><img src="/images/s-image.jpg" alt="Изображение" /></a>

Вот и все. 5 простых шагов помогают сделать Ваш сайт более удобным, современным и привлекательным. Если у Вас возникли вопросы, посмотрите внимательно наш пример.

Метки: , , ,

26 комментариев к записи «Устанавливаем красивую галерею на свой сайт в 5 шагов»

  1. Konstantin Medvedev,

    Удобная штука, прикручу-ка я ее куда-нибудь :)

  2. mkp,

    Видимо, кроме меня никто пробовал установить эту галерею :)
    Так вот с какой проблемой столкнулся я — выполнив все 5 пунктов, галерея не работала. Причина в п.3: при указании параметра src первый слэш ставить не надо!

    index.html
    script/jquery.js
    script/thickbox.js

  3. vigor,

    Ты наверно просто не на сервере это делал, а на компьютере. Вот у тебя и искались скрипты от корня диска.

  4. Dima,

    а можно этот скрипт как то сюда приклеить и чтоб пользователи могли сами добавлять изображения туда…? http://greenyline.com

  5. max,

    …все сделал, но при нажатии на ссылку-картинку (превьюшку) большая картинка не загружается :-( отчего бы это? (типа — кто виноват и что делать?)

  6. vigor,

    что вместо загрузки большой картинки происходит? если просто открывается картинка в новой странице, то не работает скрипт (либо неправильно прописаны вызовы скриптов в теге head, либо неправильно написаны классы в гиперссылке). если появляется пустой квадрат в середине экрана на черном фоне, то скорее всего урл большой картинки неправильно указан.

  7. max,

    …дык вот весь код! — <!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>
    а происходит так — экран темнеет, но картинки нету…

  8. max,

    …сделал все как в примере, и папки так же назвал даже!

  9. Andrey,

    Привет всем!
    галерейка
    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> ъ
    и вес должно работать.

  10. Lexander,

    Таже проблема, что у max.
    Если галерея, т.е. указано сво-во rel для картинок, то не пашет.
    Вылечилось изменением строки в thickbox.js
    TB_TempArray = $("a[@rel="+imageGroup+"]").get();
    на
    TB_TempArray = $("a[rel="+imageGroup+"]").get();

  11. ask1503,

    Lexander,
    [cite]TB_TempArray = $("a[rel="+imageGroup+"]").get(); [/cite]
    после изменения строки
    TB_TempArray = $("a[@rel="+imageGroup+"]").get();
    на
    TB_TempArray = $("a[rel="+imageGroup+"]").get();
    картинка открывается просто в новом окне… по крайней мере у меня так…
    если не менять — то начинается затемнее… но чего-то нужную картинку не находит…

  12. ask1503,

    внимательно изучил все шаги…
    и все равно не работает… просто не открывается большая кратинка…
    висит в режиме думанья!!!

  13. vigor,

    ask1503, пути до больших картинок точно правильно прописаны? Та строчка, которую указал Lexander, должна исправлять проблему.

  14. VB,

    TB_TempArray = $("a[@rel="+imageGroup+"]").get();

    Я вообще такую строку найти не могу!
    Помогите!

  15. Serg,

    Проблемку наверно так никто и не решил??

    Даже если указываешь урл одной и той же картинки, все равно она не открывается!
    Происходит затемнение, появляется "loadingAnimation.gif" и все…

  16. Serg,

    … а строки "TB_TempArray = $("a[@rel="+imageGroup+"]").get();" в файле "thickbox.js" действительно нет…

  17. Sergey,

    Господа, кто-нибудь решил задачу?
    Подскажите пожалуйста, как заставить это работать!

  18. Sergey,

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

  19. dok,

    Вот домашняя страница thickbox.js — http://jquery.com/demo/thickbox/. Возьмите оттуда несжатую версию скрипта, там как раз есть вышеприведенная строка (№ 79).
    Изменение этой строки (удаление "собачки") требуется в том случае, если вы используете jQuery версии 1.3 и выше.
    Также на всякий случай проверьте наличие и корректность файла thickbox.css (можно скачать там же).

  20. svtbox,

    Народ! У кого проблемы со скриптами, то решение очень простое! Когда закачал jquery.js по ссылке в п. 1, тогда не работало. А вот если в Опере кликнуть правой кнопкой мыши по ссылке http://htc-cs.ru//article/script/jquery.js и выбрать "Сохранить по ссылке как…", тогда закачаете именно ту jquery.js которая в примере (а он как видите работает). Аналогично если посмотреть хтмл-код страницы с примером можна закачать и thickbox.js, и thickbox.css У меня тепер все рабоатет!

  21. Сергей ,

    Спасибо всем!!! Получилось!!

  22. dlynn,

    Всем здравствовать и процветать!
    Всё работает, проблем не возникло, за что — большое спасибо. Но, может быть, кто-нибудь подскажет, как применить к превьюшкам свои css-стили. А то какой-то прям затык…

  23. Владимир,

    Привет всем!
    Полезный скрипт, и сразу же вопрос.
    Можно ли сделать так, чтобы клик по картинке менял ее на следующую в режиме показа галлереи (как по ссылке "next").
    Я думаю, это всем пригодится и мне очень надо!
    Заранее благодарен, если кто разберется.

  24. Владимир,

    dlynn,
    Хотя бы так:

    <style type="text/css">
    dlynn, img {
    border:solid;
    border-color: #000000;
    margin-left: 15px
    }
    </style>

    работает без проблем

  25. sashkin,

    Если еще кому-то интересно, то у меня (не долго думая) получилось таким образом (тока сильно ногами не бейте):

    в файле 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

  26. vfif,

    sashkin, спасибо за последний комментарий!

Ответить на сообщение Serg