Слайдер для фото видео изображений



Здравствуйте друзья, читатели и гости блога. В этой статье хочу поделиться с Вами созданием еще одного слайдера для изображений. Кто еще не читал мои посты о создании галереи изображений самостоятельно и прокрутке сообщений блога в виде изображений, при желании перейдите по ссылкам и почитайте.

Этот слайдер Вы будете создавать и настраивать вручную. Для чего можно использовать, для картинок либо фото, решать Вам. Можно настроить изображения популярных сообщений блога. Автоматической прокрутки не будет, пока не подведете курсор мыши к картинкам. Тогда можно просмотреть все установленные изображения слева направо, и вернуться к началу.

Смотрится довольно не плохо, устанавливается легко: дизайн-добавить гаджет. Лучше устанавливать над или под сообщением. В сайдбаре тоже можно установить, если хватит терпения настроить. Живой пример сбегайте посмотреть в тестовый блог. А внизу для Вас скриншот.

Настройка и установка слайдера в макет блога blogspot

Скопируйте этот код, вставьте в черновик или в блокнот для настроек

<style>
#BloggerSpiceCarouselSlider {
  height:120px;
  background-color:#029d74;
  border:3px solid #029d74;
  position:relative;
  margin:50px 50px;
  overflow:auto;
}

#BloggerSpiceCarouselSlider:before,
#BloggerSpiceCarouselSlider:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:-4px;
  width:4px;
  height:100%;
  box-shadow:0 0 4px green;
  z-index:10;
}
#BloggerSpiceCarouselSlider:after {
  left:auto;
  right:-4px;
}
#BloggerSpiceCarouselSlider .container {
  position:absolute;
  top:0;
  left:0;
  margin:5px 0 0 7px;
  width:300%;
  height:120px;
}
#BloggerSpiceCarouselSlider figure {
  display:block;
  background-color:white;
  float:left;
  width:120px;
  height:110px;
  margin:0 3px 0 0;  
  position:relative;
  overflow:hidden;
}
#BloggerSpiceCarouselSlider figcaption {
  display:block;
  position:absolute;
  right:0;
  bottom:-50px;
  left:0;
  background-color:black;
  font:italic normal 14px Arial,Sans-Serif;
  color:#ff9900;
  padding:4px 10px;
  text-align:center;
  opacity:.8;
}
#BloggerSpiceCarouselSlider figure img {
  display:block;
  border:none;
  margin:0 0;
}
</style>
<div id="BloggerSpiceCarouselSlider">
    <div class="container">
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку или видео" />
            </a>
        </figure>
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку"/>
            </a>
        </figure>
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
  <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
  <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
        <figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
<figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" />
            </a>
        </figure>
СЮДА МОЖНО ДОБАВИТЬ ИЗОБРАЖЕНИЯ
    </div>
</div>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
(function($) {
    var config = {
        itemMargins: 5 // Distance between the thumbnails
    };
    var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),
        $container = $thumbnailScroller.find('.container'),
        $item = $container.find('figure'),
        item_length = $item.length,
        item_width = $item.outerWidth(),
        item_margin = config.itemMargins,
        total_width = (item_width + item_margin) * item_length,
        $window = $(window);
    $thumbnailScroller.css('overflow', 'hidden');
    $container.css('width', total_width);
    // Auto caption builder & hover effect
    $item.each(function(cap) {
        if ($(this).children().attr('title')) {
            cap = $(this).children().attr('title');
            $(this).children().removeAttr('title');
            $(this).append('<figcaption>' + cap + '</figcaption>');
        }
    }).hover(function() {
        $(this).find('figcaption').stop().animate({
            bottom: 0
        }, 200);
    }, function() {
        $(this).find('figcaption').stop().animate({
            bottom: -50
        }, 200);
    });
    $window.on("resize", function() {
        var o_l = $thumbnailScroller.offset().left,
            t_w = $thumbnailScroller.width(),
            c_w = total_width;
        $thumbnailScroller.on("mousemove", function(e) {
            if ($(this).width() < $container.width()) {
                $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
            }
        });
    }).trigger("resize");
})(jQuery);
//]]> 
</script>


Настройки: зеленым-высота блока; светло-коричневым-цвет фона и разделителей; коричневым-размер, форма и цвет рамки блока; оранжевым-отступ картинок сверху, справа, снизу и слева; сиреневым-ширина и высота изображений. В этом параметре настроек высота должна быть чуть меньше, чем высота всего блока (выделено зеленым); 

голубым-цвет разделителя справа и слева в блоке; Чтобы не были заметны, подбирайте под цвет фона и пишите цвет на англ. языке; синим-размер и цвет шрифта, и положение надписи (в коде по центру, center); бордовым-название и адрес ссылки на картинку; лиловым-где решетка, вставьте ссылку на заголовок.

Чтобы добавить больше изображений, вставьте дополнительно эту часть кода

<figure>
            <a href="#" title="Название">
                <img alt="" src="адрес ссылки на картинку" /> </a>
  </figure>


Чтобы установить в сайдбар блога, как я сказала выше, нужно будет потрудиться в настройках высоты и ширины, чтобы корректно работал. Мне, если честно, не понравилось в боковых панелях, слайдер предназначен для горизонтальной установки.


И сегодня у меня вся информация. Комментируйте, задавайте вопросы. Сейчас в блоге работает контактная форма для связи, переустановила другой код, можно пользоваться. Буду благодарна всем за плюсик в соц сетях. Всего Доброго, до новых встреч.




Автор статьи ✎ Olga Protasova Выпуск ✹ 3/08/2015 Ярлыки ►


Открыть комментарии →

0 коммент. :

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

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *