Пагинация слайдера со всплывающими блоками, нефиксированной ширины

Тема в разделе "Верстка", создана пользователем sasha_ua, 10 апр 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Здравствуйте.

    Задача - Создание всплывающего(hover) блока с автоматической шириной в зависимости от объема текста.
    т.е. при наведении на пагинацию(точки) выскакивает блок со стрелкой.
    Чувствую здесь попахивает javascript.. (что-то типа jQuery - Tooltip)

    В приложении внешний вид пагинации стандартного bootstrap слайдера.

    html(упрощенно)
    Код:
    <ul class="carousel-indicators">
       <li class="on"><span>Текст<span></li>
       <li><span>Текст Текст<span></li>
       <li><span>Текст Текст Текст<span></li>
       <li><span>Текст Текст Текст <span></li>
    </ul>
    
    li - точки
    span - всплывающая подсказка

    css

    Код:
    .carousel-indicators {
        display: table;
        margin: 0 auto;
    }
    .carousel-indicators li {
        float: left;
        width: 8px;
        height: 8px;
        margin: 0 5px;
        cursor: pointer;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #5d6f7b;
        position: relative;
    }
    .carousel-indicators li span {
        display: block;
        visibility: hidden;
        color: #fff;
        padding: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #5d6f7b;
        position: absolute;
        top: -60px;
        max-width: 300px;
    }
    .carousel-indicators li span:after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(93, 111, 123, 0);
        border-top-color: #5d6f7b;
        border-width: 12px;
        margin-left: -12px;
    }
    .carousel-indicators li:hover span {
        visibility: visible;
    }
    .carousel-indicators li .on {
        visibility: visible;
    }
    
    P.S. Как лучше такое реализовать?
     

    Вложения:

    • Untitled-1.jpg
      Untitled-1.jpg
      Размер файла:
      4,3 КБ
      Просмотров:
      11
  2. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    В общем если кому-то будет полезно:

    html
    Код:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style media="all" type="text/css">@import "css/style.css";</style>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script>
            $('.carousel').carousel({
                interval: 2000,
                pause: "hover"
            })
        </script>
        <script>
         $(function() {
           $('.carousel-indicators span').tooltip({
             show: {
                effect: "blind", duration: 800
             },
             hide: {
                effect: "explode", duration: 1000
             },
             position: {
               my: "center bottom-20",
               at: "center top",
               using: function( position, feedback ) {
                 $( this ).css( position );
                 $( "<div>" )
                   .addClass( "arrow" )
                   .addClass( feedback.vertical )
                   .addClass( feedback.horizontal )
                   .appendTo( this );
               }
             }
           });
         });
         </script>
    </head>
    <body>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <div class="container">
                <div class="control-holder">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><span title="Товар №1" class="on"></span></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"><span title="Товар №2"></span></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"><span title="Товар №3"></span></li>
                    </ol>
                </div>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-01">
                            <span>Товар</span>
                            <h2>№1</h2>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</p>
                            <a href="#" class="view button">Подробнее</a>
                        </div>
                        <div class="carousel-02">
                            <img src="images/slider-img.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-01">
                            <span>Товар</span>
                            <h2>№2</h2>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</p>
                            <a href="#" class="view button">Подробнее</a>
                        </div>
                        <div class="carousel-02">
                            <img src="images/slider-img.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-01">
                            <span>Товар</span>
                            <h2>№3</h2>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</p>
                            <a href="#" class="view button">Подробнее</a>
                        </div>
                        <div class="carousel-02">
                            <img src="images/slider-img.png" alt="">
                        </div>
                    </div>
                </div>    
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span></span>
            </a>
        </div>
    </body>
    </html>
    
    css
    Код:
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 12px/14px Verdana;
        color: #222;
        min-width: 960px;
        background: #edf0f3;
    }
    a {
        outline: 0;
    }
    ul, ol {
        list-style: none;
    }
    img {
        border: none;
    }
    .wrap {
        width: 100%;
        overflow: hidden;
    }
    input {
        outline: 0;
    }
    textarea {
        background: transparent;
        resize: none;
        overflow: auto;
    }
    textarea:focus {
        outline: none;
    }
    /* Page Holder ****************************************************************/
    .container {
        width: 960px;
        overflow: hidden;
        margin: 0 auto;
    }
    
    /* Tooltip **************************************************/
    
    .ui-tooltip, .arrow:after {
        background: #5d6f7b;
    }
    .ui-tooltip {
        position: absolute;
        z-index: 9999;
        max-width: 300px;
        border: none;
        padding: 5px 10px;
        color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font: 14px/18px Verdana;
        text-align: center;
    }
    .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: -16px;
    }
    .arrow.top {
        top: -16px;
        bottom: auto;
    }
    .arrow.left {
        left: 20%;
    }
    .arrow:after {
        content: "";
        position: absolute;
        left: 20px;
        top: -20px;
        width: 25px;
        height: 25px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        tranform: rotate(45deg);
    }
    .arrow.top:after {
        bottom: -20px;
        top: auto;
    }
    
    /* ----------------- Bootstrap Carousel ----------------- */
    
    .carousel {
        height: 523px;
        background: url(../images/slider-bg.jpg);
        overflow: hidden;
    }
    .carousel .container {
        position: relative;
        height: 523px;
    }
    .control-holder {
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
        height: 93px;
        width: 100%;
    }
    .carousel-inner {
        overflow: hidden;
        height: 427px;
    }
    .carousel-inner > .item {
        display: none;
        position: relative;
        -webkit-transition: 0.6s ease-in-out left;
        transition: 0.6s ease-in-out left;
    }
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
        display: block;
        max-width: 100%;
        height: auto;
        line-height: 1;
    }
    .carousel-inner > .active,
    .carousel-inner > .next,
    .carousel-inner > .prev {
        display: block;
    }
    .carousel-inner > .active {
        left: 0;
    }
    .carousel-inner > .next,
    .carousel-inner > .prev {
        position: absolute;
        top: 0;
        width: 100%;
    }
    .carousel-inner > .next {
        left: 100%;
    }
    .carousel-inner > .prev {
        left: -100%;
    }
    .carousel-inner > .next.left,
    .carousel-inner > .prev.right {
        left: 0;
    }
    .carousel-inner > .active.left {
        left: -100%;
    }
    .carousel-inner > .active.right {
        left: 100%;
    }
    .carousel-indicators {
        display: table;
        margin: 64px auto 0 auto;
        margin-bottom: 5px;
    }
    .carousel-indicators .active {
        width: 10px;
        height: 10px;
        background: #5d6f7b;
        border: none;
        color: #fff;
    }
    .carousel-indicators li {
        float: left;
        width: 8px;
        height: 8px;
        margin: 0 5px;
        cursor: pointer;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #5d6f7b;
        position: relative;
    }
    .carousel-indicators li span {
        display: block;
        width: 10px;
        height: 10px;
    }
    
    /* ----------------- Carousel Item ----------------- */
    
    .carousel-01 {
        float: left;
        width: 370px;
        overflow: hidden;
        padding-top: 106px;
    }
    .carousel-01 span {
        display: block;
        font: 20px/22px Verdana;
        color: #1b2731;
        text-transform: uppercase;
        padding-bottom: 8px;
    }
    .carousel-01 h2 {
        font: 68px/70px Verdana;
        color: #1b2731;
        padding-bottom: 17px;
    }
    .carousel-01 p {
        font: 16px/27px Verdana;
        color: #000000;
        padding-bottom: 39px;
    }
    .carousel .view {
        margin-left: 0;
    }
    .carousel-02 {
        overflow: hidden;
        width: 590px;
    }
    .carousel-02 img {
        display: block;
        width: 572px;
        height: auto;
        margin: 84px 0 0 17px;
    }
    
    /* ----------------- Carousel Control ----------------- */
    
    .carousel-control.left {
        position: absolute;
        left: 0;
        top: 209px;
        width: 56px;
        height: 108px;
        -webkit-border-radius: 0 54px 54px 0;
        -moz-border-radius: 0 54px 54px 0;
        border-radius: 0 54px 54px 0;
        background: #5d6f7b;
    }
    .carousel-control.left:hover {
        opacity: 0.8;
    }
    .carousel-control.left span {
        background: url(../images/arrow-left.png) no-repeat;
        display: block;
        width: 20px;
        height: 38px;
        margin: 33px 0 0 10px;
    }
    .carousel-control.right {
        position: absolute;
        right: 0;
        top: 209px;
        width: 56px;
        height: 108px;
        -webkit-border-radius: 54px 0 0 54px;
        -moz-border-radius: 54px 0 0 54px;
        border-radius: 54px 0 0 54px;
        background: #5d6f7b;
    }
    .carousel-control.right:hover {
        opacity: 0.8;
    }
    .carousel-control.right span {
        background: url(../images/arrow-right.png) no-repeat;
        display: block;
        width: 20px;
        height: 38px;
        margin: 33px 0 0 26px;
    }
    
    @media screen and (max-width: 1100px) {
        .left, .right {
            opacity: 0.5;
        }
    }
    
    Пояснения

    Слайдер

    Код:
        <script>
            $('.carousel').carousel({
                interval: 2000,
                pause: "hover"
            })
        </script>
    
    Инициализация Бутстраповского слайдера.
    interval - задаержка при смене кадров
    pause: "hover" - остановка слайдера при наведении на него курсора

    Tooltip (jquery-ux)
    Код:
         $(function() {
           $('.carousel-indicators span').tooltip({
             show: {
                effect: "blind", duration: 800
             },
             hide: {
                effect: "explode", duration: 1000
             },
             position: {
               my: "center bottom-20",
               at: "center top",
               using: function( position, feedback ) {
                 $( this ).css( position );
                 $( "<div>" )
                   .addClass( "arrow" )
                   .addClass( feedback.vertical )
                   .addClass( feedback.horizontal )
                   .appendTo( this );
               }
             }
           });
         });
    
    Тут я на самом деле не все понимаю) но объясню что знаю.
    Код:
    $('.carousel-indicators span').tooltip({
    .carousel-indicators span - селекторы css, мы выбираем на каких элементах будет срабатывать эффект.
    (ol.carousel-indicators li span)

    Следующие строки настраивают всплытие и затухание всплывающего элемента show/hide.
    Не знаю что это за эффекты) но реакция на hover стала намного быстрее.
    Код:
             show: {
                effect: "blind", duration: 800
             },
             hide: {
                effect: "explode", duration: 1000
             }
    
     
    Последнее редактирование: 11 апр 2014
  3. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Чтобы сработал jQuery Tooltip необходимо прописать целевому объекту атрибут title.
    Код:
    <span title="Товар №2">
    P.S. Если кто-то знает как это сделать проще будет интересно узнать)
     
  4. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    491
    Симпатии:
    292
    Лучше б залил куда-нить на тестовый хостинг, и сразу видно проблему было б, и сразу получил бы кучу рекомендаций.
    А специально для тебя моделировать ситуацию мало кто будет.
     
  5. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Да я пробовал залить на jsfidle, но что-то не сработало, то ли я им пользоваться не умею. В общем не получилось залить .js библиотеки.