Создание горизонтальной прокрутки изображений


Сегодня вы узнаете как сделать горизонтальную карусель jcarousel на jquery (или прокрутка изображений) в blogger.
С помощью данного плагина вы сможете продемонстрировать в вашем блоге миниатюры ваших фотографий или работ.

Установка карусели:

  1. Административная панель blogger.com –> Дизайн –> Добавить новый элемент гаджета (тип HTML / JavaScript).
  2. Добавляем код в гаджет:

    <script src='http://code.jquery.com/jquery-latest.js'></script>
    <script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>
    <script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>
      <style>
    .jcarousel-skin-tango .jcarousel-container {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
       border-radius: 10px;
        background: #F0F6F9;
       
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl {
        direction: rtl;
    }
    .jcarousel-skin-tango .jcarousel-container-horizontal {
       width:425px;
        padding: 20px 40px;
    }
    .jcarousel-skin-tango .jcarousel-container-vertical {
        width: 75px;
        height: 245px;
        padding: 40px 20px;
    }
    .jcarousel-skin-tango .jcarousel-clip {
        overflow: hidden;
    }
    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width:  425px;
        height: 75px;
    }
    .jcarousel-skin-tango .jcarousel-clip-vertical {
        width:  75px;
        height: 245px;
    }
    .jcarousel-skin-tango .jcarousel-item {
        width: 75px;
        height: 75px;
    }
    .jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-left: 0;
        margin-right: 10px;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
        margin-left: 10px;
        margin-right: 0;
    }
    .jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: 10px;
    }
    .jcarousel-skin-tango .jcarousel-item-placeholder {
        background: #fff;
        color: #000;
    }
    /**
    *  Horizontal Buttons
    */
    .jcarousel-skin-tango .jcarousel-next-horizontal {
        position: absolute;
        top: 43px;
        right: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
        left: 5px;
        right: auto;
        background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
        background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:active {
        background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
        position: absolute;
        top: 43px;
        left: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
        left: auto;
        right: 5px;
        background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
        background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
        background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
    /**
    *  Vertical Buttons
    */
    .jcarousel-skin-tango .jcarousel-next-vertical {
        position: absolute;
        bottom: 5px;
        left: 43px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-next-vertical:hover,
    .jcarousel-skin-tango .jcarousel-next-vertical:focus {
        background-position: 0 -32px;
    }
    .jcarousel-skin-tango .jcarousel-next-vertical:active {
        background-position: 0 -64px;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
        cursor: default;
        background-position: 0 -96px;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical {
        position: absolute;
        top: 5px;
        left: 43px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical:hover,
    .jcarousel-skin-tango .jcarousel-prev-vertical:focus {
        background-position: 0 -32px;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical:active {
        background-position: 0 -64px;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
        cursor: default;
        background-position: 0 -96px;
    }

      </style>
     
      <ul id="mycarousel" class="jcarousel-skin-tango">
       
    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>
       
    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 

      </ul>

Настройка jcarousel карусели:

  1. Изменить IMAGE LINK на ссылку на изображение. Оно будет отображаться в уменьшенном виде, а именно 75 на 75 пикселей. Вы можете изменить размеры и миниатюры (не забудьте в этом случае изменить высоту height виджета).
  2. Вместо # вы можете добавить ссылку на изображение в оригинальном размере или на любой другой веб-адрес (например, на страницу с описанием фото).
  3. Вы можете изменить ширину виджета  jquery jcarousel изменив параметр width:425px;
  4. Изменяем суммарную ширину всех миниатюр через изменение параметра width: 425px;

Читайте также похожие темы:

  1. Виджет социальных закладок
  2. Анимированная панель блога
  3. twitter виджеты

8 ответов к «Создание горизонтальной прокрутки изображений»

  1. gerbert, для wordpress вы можете подобрать для себя специальный плагин для создания карусели jcarousel на странице http://wordpress.org/extend/plugins/tags/jcarousel

  2. Подскажите, пожалуйста,как выстроить в горизонтальный ряд картинки внизу блога (без прокрутки). Этот код не подходит. Внизу картинки выстраиваются вертикально.

  3. Здравствуйте! Подскажите пожалуйста как решить проблему. После обновления WP 3.7.1 на 3.8.1 (бэкап не сделал) карусель прокручивается вертикально а не горизонтально как было. В ручную ставил обратно WP 3.7.1 и отключал поочередно плагины, но все по прежнему. Может у кого есть идея? Заранее спасибо!

  4. Татьяна, к сожалению, пост 2012 года. Файл скрипта был утерян, поэтому перестал работать. Как-нибудь я поправлю статью.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *