Готовая фотогалерея для сайта на jQuery
08.10.2009 |
jQuery |
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://w-blog.org.ua">Теперь вы можете получить ссылки!</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> что находится в верху сайта. Здесь мы подключаем таблицу стилей и необходимые нам скрипты.
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> |
Вам нужен Выделенный не дорогой и качественный Сервер в аренду НЕМЕДЛЕННО??
Интересные статьи:
-
iNemcev 18.11.2009 23:45
-
Ирина 21.01.2010 02:42
Здравствуйте!
Спасибо большое за галерею. Возникла парочка вопросов, приношу извинения за их глупость.
1) Есть ли возможность полноценно разместить фотографии размером не 500*315?
2) Мне бы хотелось иметь возможность поместить более 10 фотографий в галерею,но тогда их маленькие варианты не видны полностью в третьем ряду уже. Можно ли как-то это исправить?
3) Можно ли поменять фон с серого на белый допустим? -
Webchester 29.01.2010 01:27
Ирина:
1) Можно, Вам необходимо поставить размеры, своих изображений в файле styles.css вот здесь:
.pika_main{width:506px;height:325px;
2) Нужно увеличень длину блока с миниатюрами у файле styles.css ставим нужную Вам расстояние в пикселях в низ пока не будут видны все ваши миниатюры:
.pikachoose ul{padding-left:0;width:510px;height:240px;
3) В том же файле styles.css меняем фон, узнать код цвета можно с помощью приложения
body{background-color:#999; -
Денис 04.02.2010 20:53
Помогите пожалуйста разобраться, установил на одной из страниц своего сайта:
этот прикольный плагин(слайд-шоу), но не могу понять почему маленькие фотки под основным экраном слайд-шоу располагаются не горизонтально, как в демо, а вертикально
Подскажите, что надо поменять? -
Webchester 05.02.2010 13:42
Я посмотрели твой код и увидел что ты пропустил кусок кода. Нужно слайд расположить в контейнере:
div class=”pikachoose”>
/dіv>
Вот как нужно чтобы было:
div class=”pikachoose”>
ul id=”pikame”>
Изображение
/ul>
/div>Код в коментах не хочет показываться, поэтому я удалив передние скобы “< “, подобавляеш их
-
Денис 05.02.2010 17:48
Webchester, не знаю как предыдущие посты подкорректировать, поэтому приходиться добавлять новый.
Скажи пожалуйста, как исправить, то что теперь у меня нижние фотки смещены правее относительно верхнего экрана слайд-шоу ил сам экран смещён относительно нижних фоток. -
Webchester 05.02.2010 22:56
Я заходил на твой сайт так меню (Previous:: Next) у меня работает, а почему съехали миниатюры я не понимаю.
-
miss-pronina 27.02.2010 21:13
спасибо за галерею… возник такой вопрос – фотографии разного размера в галерею разместить не получится?
-
Webchester 01.03.2010 18:54
miss-pronina
Вам необходимо поставить размеры, своих изображений в файле styles.css вот здесь:
.pika_main{width:506px;height:325px;
И все получиться -
Galina 03.03.2010 11:24
Расскажите пожалуйста поподробнее о размещении фото разных размеров, т е одно фото одного размера, другое-другого. ведь в
.pika_main{width:506px;height:325px;
мы указываем лишь один размер. -
Юлия 31.05.2010 11:00
Спасибо за галерею, присоединяюсь к последнему вопросу.
-
Юлия 31.05.2010 11:12
Кстати вопрос:
что еще нужно поменять (помимо кода в теле), чтобы картинки можно было грузить не в корень, а в специальную папку?Спасибо
-
Константин 10.06.2010 06:51
Здравствуйте!
Все супер. Подскажите:
- как убрать меню “Previous :: Next”;
- div разместил в таблице, но не могу выровнять по центру (смещено влево).
- как убрать прокрутку на большом фото (возможно понадобится).
А плагин отличный. Я перебрал многое – везде сложные составляющие и трудно интегрировать на свои страницы. Здесь все просто.
Спасибо. -
Константин 11.06.2010 20:03
Добрый день!
Мой пост выше (13).
С третьим вопросом разобрался – снято.
Подскажите решение по первому и второму.
Сайт
Спасибо. -
Юрий 14.07.2010 11:13
Добрый день!!! Подскажите!!! Почему скрипт локально работает, а после закидывания на сервер нет??? Если не трудно – посмотрите на указанном сайте – страница – фотогалерея
-
Webchester 14.07.2010 16:58
Юрий
Работает только Вы, сделали в новой вкладке.
Вам нужно HTML код галереи (index.html) вставить на свою страницу fotogalery.htm и уже потом подключить jQuery код, как написано в уроке.
Если изображение Вы будите хранить в папке, то не забывайте в файле fotogalery.htm проставить правильные адрес к изображениям
Оставь свое мнение:
Кстати, чтобы отображалась кнопка запуска слайд-шоу и остановки его, нужно немного поменять 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;}