Готовая фотогалерея для сайта на 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, поэтому если Вы будите перемещать файлы, то не забывайте прописывать новые пути на них.

Мой блог находят по следующим фразам
создание текстового файла через форму
как правильно css
dicim.net
www.dicim.net
как правильно размещать изображения на сайте
выпуклые края в фотошопе






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

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

    Кстати, чтобы отображалась кнопка запуска слайд-шоу и остановки его, нужно немного поменять 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;}

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

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

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

      Ирина:
      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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Спасибо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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