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

sasha_ua

sasha_ua

Постоялец
Регистрация
22 Июн 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 KB · Просмотры: 11
В общем если кому-то будет полезно:

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
         }
 
Последнее редактирование:
Чтобы сработал jQuery Tooltip необходимо прописать целевому объекту атрибут title.
Код: 
<span title="Товар №2">

P.S. Если кто-то знает как это сделать проще будет интересно узнать)
 
Лучше б залил куда-нить на тестовый хостинг, и сразу видно проблему было б, и сразу получил бы кучу рекомендаций.
А специально для тебя моделировать ситуацию мало кто будет.
 
Да я пробовал залить на jsfidle, но что-то не сработало, то ли я им пользоваться не умею. В общем не получилось залить .js библиотеки.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху