название скроллера - PullRequest
Новая
       3

название скроллера

0 голосов
/ 29 ноября 2011

В моем скроллере миниатюр у меня есть: <span id="tt" style="display:none;"></span>, который управляется скриптом jquery fade in / fade out, и я хочу расположить его вне контейнера миниатюр. CSS для тега span: span#tt { position:absolute; left:0; top:0; }

Вы можете проверить скроллер миниатюр здесь

1 Ответ

1 голос
/ 29 ноября 2011

Если я вас хорошо понимаю, это сработает. 

#tt {
    position:absolute;
    left:0;
    top: 0;
    margin-top:-20px; /*added*/
}
.jThumbnailScroller{
    position:relative;
    width:800px;
    height:260px; /*changed 255px set it if you change #tt margin-top value*/
    margin:0; 
    padding:0;
    overflow:hidden
}
.jThumbnailScroller#tS1{
    position:relative;
    width:100%;
    margin-top:100px;
    padding-top:20px
}

Также отредактировал ваш скрипт подсказки.Он мигал Если вы перемещаетесь по изображениям быстрее, потому что ваш скрипт пытается постепенно его затухать до того, как он завершает исчезновение. 

jQuery(document).ready(function(){    

var link = jQuery('.jTscroller a');

link.each(function(){
    $(this).mouseenter(function(){
        var imgtitle = $(this).find('img').data('title');
        $('#tt').html(imgtitle);
        $('#tt').fadeIn('slow');

        $(this).mouseleave(function()
        {
            $('#tt').hide();
        });
    });
});
});

Вот jsfiddle http://jsfiddle.net/dsu9a/7/

Не забудьте удалить эти коды.Это было для исправления ссылок img с реальными ссылками в скрипте. 

jQuery(document).ready(function(){
   var img = jQuery('.jTscroller a img');
    img.each(function(){
        var url = $(this).attr('src');
        $(this).attr('src','http://outboxvision.com/test/'+url)
    });
});

Исправьте ваш html следующим образом. 

<body>
    <div id="tt"></div>
<!-- rest of the code -->
...