Готовая фотогалерея для сайта на jQuery
8 октября 2009 года, Размещено в категории: jQuery / MooTools
- это один из самых простых плагинов Jquery, на котором можно сделать очень хорошее, и в тоже время очень простую фотогалерею.
В плагине Pikachoose все операции сделаны таким образом, что они являются простыми и понятными всем.
Посмотрите демо и убедитесь в этом сами.
Шаг 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
• как правильно размещать изображения на сайте
• выпуклые края в фотошопе
iNemcev
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 лет назад
Помогите пожалуйста разобраться, установил на одной из страниц своего сайта:
этот прикольный плагин(слайд-шоу), но не могу понять почему маленькие фотки под основным экраном слайд-шоу располагаются не горизонтально, как в демо, а вертикально 🙁
Подскажите, что надо поменять?
7 лет назад
Я посмотрели твой код и увидел что ты пропустил кусок кода. Нужно слайд расположить в контейнере:
div class=»pikachoose»>
/dіv>
Вот как нужно чтобы было:
div class=»pikachoose»>
ul id=»pikame»>
Изображение
/ul>
/div>
Код в коментах не хочет показываться, поэтому я удалив передние скобы «<", подобавляеш их 🙂
7 лет назад
Webchester, не знаю как предыдущие посты подкорректировать, поэтому приходиться добавлять новый.
Скажи пожалуйста, как исправить, то что теперь у меня нижние фотки смещены правее относительно верхнего экрана слайд-шоу ил сам экран смещён относительно нижних фоток.
7 лет назад
Я заходил на твой сайт так меню (Previous:: Next) у меня работает, а почему съехали миниатюры я не понимаю.
miss-pronina
7 лет назад
спасибо за галерею… возник такой вопрос — фотографии разного размера в галерею разместить не получится?
7 лет назад
miss-pronina
Вам необходимо поставить размеры, своих изображений в файле styles.css вот здесь:
.pika_main{width:506px;height:325px;
И все получиться
Galina
7 лет назад
Расскажите пожалуйста поподробнее о размещении фото разных размеров, т е одно фото одного размера, другое-другого. ведь в
.pika_main{width:506px;height:325px;
мы указываем лишь один размер.
Юлия
7 лет назад
Спасибо за галерею, присоединяюсь к последнему вопросу.
Юлия
7 лет назад
Кстати вопрос:
что еще нужно поменять (помимо кода в теле), чтобы картинки можно было грузить не в корень, а в специальную папку?
Спасибо
7 лет назад
Здравствуйте!
Все супер. Подскажите:
— как убрать меню «Previous :: Next»;
— div разместил в таблице, но не могу выровнять по центру (смещено влево).
— как убрать прокрутку на большом фото (возможно понадобится).
А плагин отличный. Я перебрал многое — везде сложные составляющие и трудно интегрировать на свои страницы. Здесь все просто.
Спасибо.
7 лет назад
Добрый день!
Мой пост выше (13).
С третьим вопросом разобрался — снято.
Подскажите решение по первому и второму.
Сайт
Спасибо.
7 лет назад
Добрый день!!! Подскажите!!! Почему скрипт локально работает, а после закидывания на сервер нет??? Если не трудно — посмотрите на указанном сайте — страница — фотогалерея
7 лет назад
Юрий
Работает только Вы, сделали в новой вкладке.
Вам нужно HTML код галереи (index.html) вставить на свою страницу fotogalery.htm и уже потом подключить jQuery код, как написано в уроке.
Если изображение Вы будите хранить в папке, то не забывайте в файле fotogalery.htm проставить правильные адрес к изображениям
7 лет назад
Блин какие тут все ленивые ужост просто а автору респект за галерейку очень прикольная и простенькая )))
7 лет назад
Константин 10.06.2010 06:51
Я могу вам подсказать войдите в код (pikachoose-min.js) и в первой стороке находим (previous:»Previous»,next:»Next») меняем то что в кавычках, сохраняем и вуаля. только если ввод будет на руском то кодировочку прийдется поменять
Luda
7 лет назад
Классная галерея и хорошо описана!
Есть пара вопросов: у меня блог на Блоггере, так когда я закомментирую последний скрипт в вашем примере (у вас он как раз закоментирован, да и на офсайте галлереи — тоже), то у меня все картинки отображаются одна за одной по вертикали и галерея не работает, а когда разкомментирую — работает. Можно использовать БЕЗ комментирования?
И еще: никак не могу поставить галерею по центру и корректно убрать «next» и «prev». Не подскажете как?
Заранее благодарна за ответ.
RainHeart
6 лет назад
Ребята кто подскажет почему идёт 2 скрипта pikachoose-min.js и pikachoose.js
когда меняешь на сайте использовать тот или другой скрипт изменений никаких не происходит
весят они 6 и 11 кб
разница в коде есть, а никаких изменений наглядно не видно
в чём разница то?
Jurasik_Park
6 лет назад
Помогите разобраться с проблемой. У меня показывается две большие фотки. Одна там где она и должна быть, а вторая снизу справа от всей галереи. Как от нее избавиться?
Vlad
6 лет назад
Как можно сделать чтобы вертикальные картинки масштабировались по высоте, а не по ширине?
Alex
6 лет назад
Твое мнение:
Для Jurasik_Park:
В css ищем этот стиль:
.pika_back_img
в него добавьте:
display:none;
Alex
6 лет назад
У меня другая проблема:
миниатюры изображений периодиески не все отображаются, а после перезагрузки они появляюся, но могут исчезнуть другие.
Кто-нибудь сталкивался? как это решить?
6 лет назад
У меня интернет-магазин на webasyst, как сделать фотогаллерею с голосованием (контролем ip)