Модификация заголовка бесконечной карусели Jquery - PullRequest
Новая
       26

Модификация заголовка бесконечной карусели Jquery

1 голос
/ 18 августа 2011

Вчера у меня был клиент, который попросил меня удалить подписи из пространства изображения на бесконечной карусели, которую я здесь реализовал: http://www.nokkam.com/showcase.html, и благодаря переполнению стека я смог выполнить это.

Теперь меня просят, чтобы анимация заголовка имитировала анимацию изображений (слева направо, в отличие от анимации снизу вверх. Стоит ли изменять этот сценарий, или я должен отказаться от него иПопытка найти еще один подходящий для того, что меня просят. Я искал множество плагинов карусели и, кажется, не могу найти тот, который оживляет таким образом. Любая помощь или идеи всегда очень ценятся.

Я пытался установитьвверх на той же странице и изменив то, что я считаю правильными свойствами в сценарии, используя «left» вместо «margin bottom» для управления анимацией, но теперь весь текстодержатель исчез. Я действительно колеблюсь здесь. Я нашел части в сценарии, которыеЯ думаю, что управляю анимацией и догадываюсь, что заставит их работать… это не удалось.

ПРЕДЫДУЩИЙ СЦЕНАРИЙ 

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
            var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
            $('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'.8'});
            showtext($('li:eq(1) p', obj).html());  


function showtext(t)
            {
                // the text will always be the text of the second list item (if it exists)
                if(t != null)
                {
                    $('#textholder'+randID).html(t).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();
                }
            }



function showminmax()
            {
                    if(!autopilot)
                    {
                        html = '<img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/assets/images/down.png" title="Minimize" alt="minimize" id="min" /><img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/assets/images/up.png" title="Maximize" alt="maximize" id="max" />';
                        html += '<img style="position:absolute;top:2px;right:6px;display:none;cursor:pointer" src="/assets/images/close.png" title="Close" alt="close" id="close" />';
                        $('#textholder'+randID).append(html);
                        $('#min').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+24+'px'},500,function(){$("#min,#max").toggle();});});
                        $('#max').click(function(){$('#textholder'+randID).animate({marginBottom:'0px'},500,function(){$("#min,#max").toggle();});});
                        $('#close').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);});
                    }
            }


    // animate textholder out of frame
                $('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);

МОЙ РЕДАКТИРОВАННЫЙ СЦЕНАРИЙ (изменил некоторые переменные вслепую и сделал его хуже) 

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;left:'+-imgWidth+$(obj).css('paddingLeft')+'"></div>');
            var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
            var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
            $('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'.8'});
            showtext($('li:eq(1) p', obj).html());


function showtext(t)
            {
                // the text will always be the text of the second list item (if it exists) .width(imgWidth-(correctTHWidth * 2))
                if(t != null)
                {
                    $('#textholder'+randID).html(t).animate({left:correctTHWidth}); // Raise textholder

                }
            }

// анимация текстового поля вне кадра $ ('# textholder '+ randID) .animate ({left: (- imgWidth- (correctTHWidth * 2)) +' px '}, 500);

PROGRESS !!!
Итак, отредактировав следующее Iпо крайней мере, удалось выполнить анимацию textholder из кадра!Теперь мне просто нужно выяснить, как анимировать новый текстовый держатель в кадре ... пожалуйста, помогите, если вы знаете что-нибудь еще. 

// animate textholder out of frame
$('#textholder'+randID).animate({left:(-imgWidth)-(correctTHWidth * 2)+'px'},500);

ДАЙТЕ ДРУГОЕ ОБНОВЛЕНИЕ ПРОГРЕССА
Через более слепое возмущение (методом проб и ошибок)Мне удалось заставить анимацию хотя бы двигаться в правильном направлении!У меня сейчас проблемы с тем, что текстовая строка входит слева и анимируется обратно в том же направлении ... Это мое последнее препятствие.Если у кого-нибудь есть какие-либо слова, которые могут повлиять на это, я все равно буду признателен.
Хаос продолжается по ссылке ниже.Заранее спасибо.

Итак, после изменения свойств анимации и полного избавления от функции "showminmax" ... У меня все еще есть анимация, которая не работает должным образом.Я знаю, что это не очень интересный вопрос, но я действительно свежая из идей и начинаю терять волосы.Спасибо всем.

Мой новый, даже (немного) более функциональный пример можно увидеть здесь: http://www.nokkam.com/showcase2.html

...