Российская проектная студия OlDesign.ru

Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.

Адаптивная галерея Fotorama

    Fotorama - мощная и многофункциональная галерея, написанная на jQuery.
    Является универсальным решеним
    любой галереи или слайдера фотографий.

     

    Настройки скрипта включает в себя множество параметров,
    которые можно указывать через атрибуты тегов HTML
    или выносить отдельно в функцию.
    Разработчики весьма постарались и снабдили галерею
    очень подробной документацией с разбором примеров настройки.
     Настройка функций галереи с примерами: 

     

    fotorama gallery

     

    Привлекает данное исполнение галереи тем, что
    на одну страницу можно установить сразу несколько галерей, и
    они не будут конфликтовать между собой.

     

    Есть возможность реализовать видео галерею.
    Можно добавлять привью для видео картинкой,
    после включения видеозаписи появляется кнопка выключение, что не создает возможной ситуации, когда в галере несколько видео работают одновременно.
    Инициализация видео.

     

    фоторама site gallery

     

    Реализована прокрутка видео мышью,
    что весьма удобно на телефонах и планшетах,
    где в качестве мыши выступает палец ладони.

     

    Кроме того, её можно развернуть во весь экран – 
    очень полезный функционал для сайтов с качественными изображениями. 

     

    Галерея обладает адаптивной версткой
    и после установки выглядит одинаково
    красиво на любом разрешении монитора, будь то нетбук, лептоп или телефон.
     

    fotorama адаптивная галерея

     

    Fotorama jQuery галерея очень функциональна.
    Она поддерживает работу с HTML кодом, так что
    вместо картинок можно добавить текста или дополнительные элементы.
    Для пролистывания слайдов можно настроить клавиши и многое другое.

     

    фоторама галерея для сайта

     


     

    УСТАНОВКА

     

    <!-- 1.  Вставьте это код в head страницы -->
    <!-- Link to jQuery (1.8 or later), -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- 33 KB -->
    <!-- fotorama.css & fotorama.js. -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"><!-- 3 KB -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script><!-- 16 KB -->
    
    <!-- 2. Вставьте в ваш <body> HTML код контейнера <div> c классом="fotorama",  поместите в <div> изображения, и галерея автоматически заработает -->
    
    <div class="fotorama">
    <img src="http://s.fotorama.io/1.jpg">
     <img src="http://s.fotorama.io/2.jpg">
    </div>
    
    <!-- 3. Галерея работает! -->


    Просто скопируйте фрагмент кода выше, чтобы и вставьте к себе на страницу.

    Вы можете использовать CDN  Fotorama  при подключении скриптов,
    или скачайте и загрузите к себе на сервер ZIP, указав в коде правильный адрес.

    СКАЧАТЬ ГАЛЕРЕЮ FOTORAMA . ZIP  (version 4.6.4)

     


     

    Главный сайт проекта: http://fotorama.io

    Посмотрите код плагина: https://github.com/artpolikarpov/fotorama

    Fotorama Галерея для Wordpress - видео

    Статьи от авторов: habrahabr  apsolyamov



    Скажите спасибо - поделитесь:
     

    Комментарии (0)


    Оставьте ваш комментарий: