Готовая фотогалерея для сайта на jQuery
8 октября 2009 года, Размещено в категории: jQuery / MooTools
Pikachoos — это один из самых простых плагинов Jquery, на котором можно сделать очень хорошее, и в тоже время очень простую фотогалерею.
В плагине Pikachoose все операции сделаны таким образом, что они являются простыми и понятными всем.
Посмотрите демо и убедитесь в этом сами.
Шаг 1: HTML код
HTML Код галереи не такой и уже тяжелый, используем id = «pikame» для списка. Для каждого изображения прописывается путь, а также и описание (также возможно, что бы каждое изображения было ссылкой).
1 2 3 4 5 6 7 8 9 10 11 12 | <ul id="pikame"> <li><img src="1.jpg" alt="" /><span><a href="http://dicim.net">Теперь вы можете получить ссылки!</a></span></li> <li><img src="2.jpg" alt="" /><span>Или какой-либо HTML вы хотите внутри подписи!</span></li> <li><img src="3.jpg" alt="" /><span> Donec in ante. Donec pretium. </span></li> <li><img src="4.jpg" alt="" /><span> Aliquam erat volutpat. </span></li> <li><img src="5.jpg" alt="" /><span> In ornare, neque ut malesuada hendrerit.</span></li> <li><img src="6.jpg" alt="" /><span> Aliquam condimentum dolor sed elit. </span></li> <li><img src="7.jpg" alt="" /><span> Aliquam condimentum dolor sed elit.</span></li> <li><img src="8.jpg" alt="" /><span> Ut non magna at purus cursus facilisis.</span></li> <li><img src="9.jpg" alt="" /><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li> <li><img src="10.jpg" alt="" /><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li> </ul> |
Шаг 2: jQuery код
Этот код прописываем между тегом <head> что находится в верху страницы.
Первая строка кода это мы подключаем наш фреймворк JQuery, вторая строчка кода, это подключает файл с плагином нашей галереи pikachoose-min.js.
1 2 3 4 5 | <script src="js/jquery.js" type="text/javascript"></script> <script src="js/pikachoose-min.js" type="text/javascript"></script> <script>// <![CDATA[ $(document).ready( function (){ $("#pikame").PikaChoose(); }); // ]]></script> |
Все javascript файлы находятся в папке js, поэтому если Вы будите перемещать файлы, то не забывайте прописывать новые пути на них.
Чтобы постоянно получать новые посты с блога, подпишитесь на
rss ленту
и следуйте за мной в
twitter-e
Кстати, чтобы отображалась кнопка запуска слайд-шоу и остановки его, нужно немного поменять 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;}
Здравствуйте!
Спасибо большое за галерею. Возникла парочка вопросов, приношу извинения за их глупость.
1) Есть ли возможность полноценно разместить фотографии размером не 500*315?
2) Мне бы хотелось иметь возможность поместить более 10 фотографий в галерею,но тогда их маленькие варианты не видны полностью в третьем ряду уже. Можно ли как-то это исправить?
3) Можно ли поменять фон с серого на белый допустим?
Ирина:
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;
Помогите пожалуйста разобраться, установил на одной из страниц своего сайта: http://partyland.hop.ru/konf.html
этот прикольный плагин(слайд-шоу), но не могу понять почему маленькие фотки под основным экраном слайд-шоу располагаются не горизонтально, как в демо, а вертикально
Подскажите, что надо поменять?
Я посмотрели твой код и увидел что ты пропустил кусок кода. Нужно слайд расположить в контейнере:
div class=»pikachoose»>
/dіv>
Вот как нужно чтобы было:
div class=»pikachoose»>
ul id=»pikame»>
Изображение
/ul>
/div>
Код в коментах не хочет показываться, поэтому я удалив передние скобы «< «, подобавляеш их
Webchester, не знаю как предыдущие посты подкорректировать, поэтому приходиться добавлять новый.
Скажи пожалуйста, как исправить, то что теперь у меня нижние фотки смещены правее относительно верхнего экрана слайд-шоу ил сам экран смещён относительно нижних фоток.
Я заходил на твой сайт так меню (Previous:: Next) у меня работает, а почему съехали миниатюры я не понимаю.
спасибо за галерею… возник такой вопрос — фотографии разного размера в галерею разместить не получится?
miss-pronina
Вам необходимо поставить размеры, своих изображений в файле styles.css вот здесь:
.pika_main{width:506px;height:325px;
И все получиться
Расскажите пожалуйста поподробнее о размещении фото разных размеров, т е одно фото одного размера, другое-другого. ведь в
.pika_main{width:506px;height:325px;
мы указываем лишь один размер.
Спасибо за галерею, присоединяюсь к последнему вопросу.
Кстати вопрос:
что еще нужно поменять (помимо кода в теле), чтобы картинки можно было грузить не в корень, а в специальную папку?
Спасибо
Здравствуйте!
Все супер. Подскажите:
- как убрать меню «Previous :: Next»;
- div разместил в таблице, но не могу выровнять по центру (смещено влево).
- как убрать прокрутку на большом фото (возможно понадобится).
А плагин отличный. Я перебрал многое — везде сложные составляющие и трудно интегрировать на свои страницы. Здесь все просто.
Спасибо.
Добрый день!
Мой пост выше (13).
С третьим вопросом разобрался — снято.
Подскажите решение по первому и второму.
Сайт http://dotz.su/Shuriken_f.php
Спасибо.
Добрый день!!! Подскажите!!! Почему скрипт локально работает, а после закидывания на сервер нет??? Если не трудно — посмотрите на указанном сайте — страница — фотогалерея
http://www.balakliya-rda.gov.ua/
Юрий
Работает только Вы, сделали в новой вкладке.
Вам нужно HTML код галереи (index.html) вставить на свою страницу fotogalery.htm и уже потом подключить jQuery код, как написано в уроке.
Если изображение Вы будите хранить в папке, то не забывайте в файле fotogalery.htm проставить правильные адрес к изображениям
Блин какие тут все ленивые ужост просто а автору респект за галерейку очень прикольная и простенькая )))
Константин 10.06.2010 06:51
Я могу вам подсказать войдите в код (pikachoose-min.js) и в первой стороке находим (previous:»Previous»,next:»Next») меняем то что в кавычках, сохраняем и вуаля. только если ввод будет на руском то кодировочку прийдется поменять
Классная галерея и хорошо описана!
Есть пара вопросов: у меня блог на Блоггере, так когда я закомментирую последний скрипт в вашем примере (у вас он как раз закоментирован, да и на офсайте галлереи — тоже), то у меня все картинки отображаются одна за одной по вертикали и галерея не работает, а когда разкомментирую — работает. Можно использовать БЕЗ комментирования?
И еще: никак не могу поставить галерею по центру и корректно убрать «next» и «prev». Не подскажете как?
Заранее благодарна за ответ.
Ребята кто подскажет почему идёт 2 скрипта pikachoose-min.js и pikachoose.js
когда меняешь на сайте использовать тот или другой скрипт изменений никаких не происходит
весят они 6 и 11 кб
разница в коде есть, а никаких изменений наглядно не видно
в чём разница то?
Помогите разобраться с проблемой. У меня показывается две большие фотки. Одна там где она и должна быть, а вторая снизу справа от всей галереи. Как от нее избавиться?
Как можно сделать чтобы вертикальные картинки масштабировались по высоте, а не по ширине?
Твое мнение:
Для Jurasik_Park:
В css ищем этот стиль:
.pika_back_img
в него добавьте:
display:none;
У меня другая проблема:
миниатюры изображений периодиески не все отображаются, а после перезагрузки они появляюся, но могут исчезнуть другие.
Кто-нибудь сталкивался? как это решить?
У меня интернет-магазин на webasyst, как сделать фотогаллерею с голосованием (контролем ip)