2012-09-10

Textual description of firstImageUrl

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


Сегодня вы узнаете как сделать горизонтальную карусель 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 виджеты

6 комментариев :

gerbert комментирует...

А можно эту карусель на Вордпрес прикрутить? Спасибо.

Mycrib комментирует...

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

Кулешова Татьяна Алексеевна комментирует...

Очень интересно. Но у меня изображения не прокручиваются. Почему?

Кулешова Татьяна Алексеевна комментирует...

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

sergej комментирует...

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

Анонимный комментирует...

Как сделать, чтобы прокрутка начиналась с последнего изображения?

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности