Готовая фотогалерея для сайта на jQuery

8 октября 2009 года, Размещено в категории: jQuery / MooTools

фотогалерея для сайта

Pikachoos - это один из самых простых плагинов Jquery, на котором можно сделать очень хорошее, и в тоже время очень простую фотогалерею.
В плагине Pikachoose все операции сделаны таким образом, что они являются простыми и понятными всем.
Посмотрите демо и убедитесь в этом сами.

demoскачать

Шаг 1: HTML код
HTML Код галереи не такой и уже тяжелый, используем id = "pikame" для списка. Для каждого изображения прописывается путь, а также и описание (также возможно, что бы каждое изображения было ссылкой).

  • Теперь вы можете получить ссылки!
  • Или какой-либо HTML вы хотите внутри подписи!
  • Donec in ante. Donec pretium.
  • Aliquam erat volutpat.
  • In ornare, neque ut malesuada hendrerit.
  • Aliquam condimentum dolor sed elit.
  • Aliquam condimentum dolor sed elit.
  • Ut non magna at purus cursus facilisis.
  • Nunc semper dapibus erat. Nulla hendrerit.
  • Nunc semper dapibus erat. Nulla hendrerit.

Шаг 2: jQuery код
Этот код прописываем между тегом <head> что находится в верху страницы.
Первая строка кода это мы подключаем наш фреймворк JQuery, вторая строчка кода, это подключает файл с плагином нашей галереи pikachoose-min.js.

 
//

Все javascript файлы находятся в папке js, поэтому если Вы будите перемещать файлы, то не забывайте прописывать новые пути на них.






31 комментарий

  • 12 лет назад Ответить

    Кстати, чтобы отображалась кнопка запуска слайд-шоу и остановки его, нужно немного поменять styles.css… найти «.pika_play a» и первую заменить на «.pika_play a.pika_play_button». И ниже увидите ещё «.pika_play a», замените на «.pika_play a.pika_stop_button». «pause.png» менять на «stop.png» — по вкусу. =)

    Вот часть кода styles.css, уже изменённая:
    .pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
    .pika_play a.pika_play_button{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url(‘play.png’) top center no-repeat;}
    .pika_play a.pika_stop_button{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url(‘stop.png’) top center no-repeat;}

  • 11 лет назад Ответить

    Здравствуйте!
    Спасибо большое за галерею. Возникла парочка вопросов, приношу извинения за их глупость.
    1) Есть ли возможность полноценно разместить фотографии размером не 500*315?
    2) Мне бы хотелось иметь возможность поместить более 10 фотографий в галерею,но тогда их маленькие варианты не видны полностью в третьем ряду уже. Можно ли как-то это исправить?
    3) Можно ли поменять фон с серого на белый допустим?

    • 11 лет назад Ответить

      Ирина:
      1) Можно, Вам необходимо поставить размеры, своих изображений в файле styles.css вот здесь:
      .pika_main{width:506px;height:325px;
      2) Нужно увеличень длину блока с миниатюрами у файле styles.css ставим нужную Вам расстояние в пикселях в низ пока не будут видны все ваши миниатюры:
      .pikachoose ul{padding-left:0;width:510px;height:240px;
      3) В том же файле styles.css меняем фон, узнать код цвета можно с помощью приложенияHTML colors 2000
      body{background-color:#999;

  • 11 лет назад Ответить

    Помогите пожалуйста разобраться, установил на одной из страниц своего сайта: http://partyland.hop.ru/konf.html
    этот прикольный плагин(слайд-шоу), но не могу понять почему маленькие фотки под основным экраном слайд-шоу располагаются не горизонтально, как в демо, а вертикально 🙁
    Подскажите, что надо поменять?

    • 11 лет назад Ответить

      Я посмотрели твой код и увидел что ты пропустил кусок кода. Нужно слайд расположить в контейнере:
      div class=»pikachoose»>
      /dіv>

      Вот как нужно чтобы было:
      div class=»pikachoose»>
      ul id=»pikame»>

      Изображение
      /ul>
      /div>

      Код в коментах не хочет показываться, поэтому я удалив передние скобы «<", подобавляеш их 🙂

  • 11 лет назад Ответить

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

    • 11 лет назад Ответить

      Я заходил на твой сайт так меню (Previous:: Next) у меня работает, а почему съехали миниатюры я не понимаю.

  • 11 лет назад Ответить

    спасибо за галерею… возник такой вопрос — фотографии разного размера в галерею разместить не получится?

    • 11 лет назад Ответить

      miss-pronina
      Вам необходимо поставить размеры, своих изображений в файле styles.css вот здесь:
      .pika_main{width:506px;height:325px;
      И все получиться

  • 11 лет назад Ответить

    Расскажите пожалуйста поподробнее о размещении фото разных размеров, т е одно фото одного размера, другое-другого. ведь в
    .pika_main{width:506px;height:325px;
    мы указываем лишь один размер.

  • 11 лет назад Ответить

    Спасибо за галерею, присоединяюсь к последнему вопросу.

  • 11 лет назад Ответить

    Кстати вопрос:
    что еще нужно поменять (помимо кода в теле), чтобы картинки можно было грузить не в корень, а в специальную папку?

    Спасибо

  • 11 лет назад Ответить

    Здравствуйте!
    Все супер. Подскажите:
    — как убрать меню «Previous :: Next»;
    — div разместил в таблице, но не могу выровнять по центру (смещено влево).
    — как убрать прокрутку на большом фото (возможно понадобится).
    А плагин отличный. Я перебрал многое — везде сложные составляющие и трудно интегрировать на свои страницы. Здесь все просто.
    Спасибо.

  • 11 лет назад Ответить

    Добрый день!!! Подскажите!!! Почему скрипт локально работает, а после закидывания на сервер нет??? Если не трудно — посмотрите на указанном сайте — страница — фотогалерея
    http://www.balakliya-rda.gov.ua/

    • 11 лет назад Ответить

      Юрий
      Работает только Вы, сделали в новой вкладке.
      Вам нужно HTML код галереи (index.html) вставить на свою страницу fotogalery.htm и уже потом подключить jQuery код, как написано в уроке.
      Если изображение Вы будите хранить в папке, то не забывайте в файле fotogalery.htm проставить правильные адрес к изображениям

  • 11 лет назад Ответить

    Блин какие тут все ленивые ужост просто а автору респект за галерейку очень прикольная и простенькая )))

  • 11 лет назад Ответить

    Константин 10.06.2010 06:51
    Я могу вам подсказать войдите в код (pikachoose-min.js) и в первой стороке находим (previous:»Previous»,next:»Next») меняем то что в кавычках, сохраняем и вуаля. только если ввод будет на руском то кодировочку прийдется поменять

  • 11 лет назад Ответить

    Классная галерея и хорошо описана!

    Есть пара вопросов: у меня блог на Блоггере, так когда я закомментирую последний скрипт в вашем примере (у вас он как раз закоментирован, да и на офсайте галлереи — тоже), то у меня все картинки отображаются одна за одной по вертикали и галерея не работает, а когда разкомментирую — работает. Можно использовать БЕЗ комментирования?

    И еще: никак не могу поставить галерею по центру и корректно убрать «next» и «prev». Не подскажете как?

    Заранее благодарна за ответ.

  • 10 лет назад Ответить

    Ребята кто подскажет почему идёт 2 скрипта pikachoose-min.js и pikachoose.js
    когда меняешь на сайте использовать тот или другой скрипт изменений никаких не происходит
    весят они 6 и 11 кб
    разница в коде есть, а никаких изменений наглядно не видно
    в чём разница то?

  • 10 лет назад Ответить

    Помогите разобраться с проблемой. У меня показывается две большие фотки. Одна там где она и должна быть, а вторая снизу справа от всей галереи. Как от нее избавиться?

  • 10 лет назад Ответить

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

  • 10 лет назад Ответить

    Твое мнение:
    Для Jurasik_Park:
    В css ищем этот стиль:
    .pika_back_img
    в него добавьте:
    display:none;

  • 10 лет назад Ответить

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

  • 10 лет назад Ответить

    У меня интернет-магазин на webasyst, как сделать фотогаллерею с голосованием (контролем ip)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: