Галерея на Jquery
Приветствую Вас уважаемые коллеги, сегодня я расскажу Вам, как можно реализовать галерею на Jquery, вообще не зная данной библиотеки, а тем более языка Javascript. Сегодня мы реализуем вот такую галерею:
Для этого Вы можете зайти на любую поисковую систему и ввести поисковый запрос слайдер Jquery, далее переходим на сайт
http://yeap.narod.ru/js/022.html и сразу наблюдаем самый первый слайдер. Визуально он нам подходит,
нам нужно лишь скачать его, изменить стили, и установить на Ваш сайт. Скачиваем архив и распаковываем его в любое удобное для Вас место.
Внутри в папке видим папку под названием examples. Внутри нее находится три слайдера, но Вам может понадобиться два из них.
Первый находится в папке responsive, а второй в папке standart. Их отличие заключается в следующем: в респосив слайдер является
резиновым и сжимается, а также растягивается в зависимости от ширины окна браузера. А стандартный слайдер имеет фиксированную ширину.
Давайте будем разбираться с ним. Заходим в папку и видим папку со стилями, скриптами, изображениями и индексный файл. Открываем его в браузере
и видим уже почти то, что нам необходимо. Только без изображений. Кстати архив с необходимыми изображениями можно взять тут.
Из архива берем изображение для самого слайдера, копируем его в папку с изображениями, и изменяем путь в индексном файле, в каждой картинке слайдера.
Путь должен быть примерно таким: img/slider-img.png. Также в папке img заменяем файл pagination, на наш.
В результате у Вас должно появиться наше изображение слайдера, а также кнопки пагинации. Нам остается лишь подкорректировать стили и разместить
кнопки пагинации по центру слайдера. Сами кнопки листалки мы трогать не будем, ведь они могут нам пригодиться, но если они Вам не нравятся, можете
удалить их из html кода. Открываем файл стилей и в 80 строке кода, где мы обращаемся к .slidesPagination li a изменяем ширину на 15 пикселей,
также padding-top устанавливаем тоже 15 пикселей. Где мы обращаемся к .slidesPagination li.slidesCurrent a изменяем background-position
на -16 пикселей и сохраняем результат. Все слайдер практически готов для использования, осталось лишь немного его доработать и внедрить на сайт. Изменения мы вносили
в связи с тем, что наше изображения, является шириной 15 пикселей и высотой в 31 пиксель.
Все доработки я не буду описывать, здесь работа происходит только со стилями. С этим Вы должны справиться самостоятельно, и видоизменять слайдер под себя.
Для того чтобы перенести слайдер к Вам на сайт, необходимо скопировать html код слайдера в нужное для Вас место и лучше обернуть его в блок. После этого скопировать
папку со скриптами к Вам, а также подключить все необходимые скрипты в вашем html файле между тегами head, скопировав нужную информацию из нашего первоначального
файла. Также не забывайте копировать изображения и стили слайдера. Если Вы все сделаете правильно, и все пути будут верными, то он должен работать корректно, но если
что-то не так нужно искать ошибку.
Вот таким образом Вы можете реализовать слайдер на сайте без знания Jquery. Я пытался как можно понятнее объяснить данную тему, но если Вы что-то не поняли,
обращайтесь ко мне за помощью, я постараюсь Вам детально все объяснить. На этом все, до скорого!
