Question

如何删除彩盒关闭动画？

我正在显示很多缩略图;单击时，将显示包含完整内容的颜色框，其中包含指向所述内容的颜色框幻灯片的链接。当幻灯片彩色框关闭时，我重新打开原始的完整内容，但结束动画清楚地表明在重新打开内容之前幻灯片已关闭。当我在初始化选项中将转换设置为无时，将删除打开转换，但不会关闭结束动画。

谢谢！

初始化内容：

        var trip = getTripById(this.id);
        currentTrip = trip;
        var tripModal = createTripModal(trip);
        openTripModal(tripModal);

旅行模式内容：

var currentTrip;

function openTripModal(tripModal)
{
    var trans = "elastic";
    if(arguments[1] == "none")
    {
        console.log(arguments);
        trans = "none";
    }
    $.colorbox(
        {
            html: tripModal,
            transition: trans,
            onComplete: function(){
                console.log("complete loaded");
                $(".photos").colorbox(   
                        {   
                            html: "If you close me, I will hopefully open the current trip again",
                            onClosed: function(){
                                console.log('closing photoslides1');
                                var modal = createTripModal(currentTrip);
                                openTripModal(modal, "none");
                            },
                            transition:"none"
                        }
                );
            }
        }
    );
}

Answer 1

我最终将原始$.colorbox.close函数保存在另一个变量中，并将$.colorbox.close函数设置为其他函数以打开我以前显示的信息。打开上一个信息时（我有一个完整的功能可以打开它），我恢复原来的$colorbox.close()功能。

var currentTrip;

var originalClose;


function getOrig(){
    return $.colorbox.close;
}

originalClose = getOrig();

function openTripModal(tripModal)
{
    $.colorbox.close = originalClose; 
    $.colorbox(
        {
            html: tripModal,
            onComplete: function(){
                $(".photos").colorbox(   
                    {   
                        html: createTripSlideshow(currentTrip.id),
                        onComplete: function(){
                            thumbs$ = $('.trip-thumbnails') 
                              .anythingSlider({
                                   mode: "horizontal",
                                   buildArrows         : false,      // If true, builds the forwards and backwards buttons 
                                   buildNavigation     : false,      // If true, builds a list of anchor links to link to each panel 
                                   buildStartStop      : false,      // If true, builds the start/stop button              autoPlay: true,
                                   width: 138,
                                   height: 80,
                                   hashTags: false,
                                   showMultiple: 6,
                                   changeBy: 1,
                                   animationTime: 0
                               });
                                thumbs = thumbs$.data('AnythingSlider');


                            slider$ = $('.trip-slideshow') 
                              .anythingSlider({
                                   mode: "horizontal",
                                   buildArrows         : false,      // If true, builds the forwards and backwards buttons 
                                   buildNavigation     : false,      // If true, builds a list of anchor links to link to each panel 
                                   buildStartStop      : false,      // If true, builds the start/stop button              autoPlay: true,
                                   width: 570,
                                   hashTags: false,
                                   height: 380,
                                   onSlideComplete : function()
                                   {
                                       slideTemp = slider$.data('AnythingSlider');
                                        $('.slideshow-title .slide-number').text(   slideTemp.currentPage + " / " +  slideTemp.pages   );
                                        $('.thumbclick').removeClass('active');
                                        $(".trip-thumbnails").find("li:eq("+slideTemp.currentPage+")").find("img").addClass('active');
                                   }
                               });
                                slider = slider$.data('AnythingSlider');
                                $(".slideshow-wrap .next-arrow").click(function(){
                                    slider.goForward(); 
                                    if( !slider.playing )
                                    {
                                        $('.slides-play').removeClass('pause');
                                        slider.startStop( slider.playing ); 
                                    }
                                });
                                $(".slideshow-wrap .prev-arrow").click(function(){
                                    slider.goBack();
                                    if( !slider.playing )
                                    {
                                        $('.slides-play').removeClass('pause');
                                        slider.startStop( slider.playing ); 
                                    }
                                });
                                $(".slideshow-wrap .slides-play").click(function(){
                                    var play = slider.playing;
                                    if(!play)
                                        $('.slides-play').addClass("pause");
                                    else
                                        $('.slides-play').removeClass("pause");
                                    slider.startStop( !play );
                                });


                                $(".thumbnail.next-arrow").click(function(){
                                    thumbs.goForward(); 
                                });

                                $(".thumbnail.prev-arrow").click(function(){
                                    thumbs.goBack();
                                });

                                $.colorbox.close = function(){
                                    slider.startStop(false);
                                    $('trip-slideshow').remove();
                                    $('trip-thumbnails').remove();

                                    var modal = createTripModal(currentTrip);
                                    openTripModal ( modal );    
                                }

                                $(".thumbclick").click(function()
                                {
                                    var len = this.src.length;
                                    var index = this.src.substring( len - 6, len - 4  );
                                    index = parseInt(index, 10);
                                    $('.trip-thumbnails').anythingSlider( index );
                                    $('.trip-slideshow').anythingSlider( index );
                                    $('.slides-play').removeClass('pause');

                                });

                        }
                    } 
                );// end photos modal


                var formHtml = createFormHtml(currentTrip);
                $(".request-info").colorbox(  
                    {
                        html: formHtml,
                        onComplete: function()
                        {
                            $.colorbox.close = function(){
                                var modal = createTripModal(currentTrip);
                                openTripModal ( modal );    
                            }
                            $('.trip-information-request .cancel').click(function()
                              {
                                $.colorbox.close();                               
                              }
                            );

                            $('.trip-information-request form').validate(
                                {
                                    rules: {
                                        f_firstname: "required",
                                        f_lastname: "required",
                                        f_email: "required email",
                                        f_phone: "required"
                                    },
                                    messages: {
                                        f_firstname: "Please provide your first name", 
                                        f_lastname: "Please provide your last name",
                                        f_email:{
                                            required: "Please enter your email",
                                            email: "Please enter a valid email"
                                        },
                                        f_phone: "Please provide your phone number"
                                    },
                                    submitHandler: function( )
                                    {
                                        //submit code
                                        alert("validation successully passed");


                                        var thankYou ="                 <div class='trip-information-request'>\
                                                            <p class='trip-thank-you-header'>Thank you!</p>\
                                                            <p class='trip-thank-you'>\
                                                                We've received your email and will respond within 2 business days.\
                                                            </p>\
                                                            <p class='trip-thank-you'>\
                                                                If you have any additional questions, please contact us at 1.xxx.xxx.xxxx.\
                                                            </p>\
                                                            <div class='trip-thank-you return'>\
                                                                return to trips\
                                                            </div>\
                                                        </div>";

                                        $.colorbox({html:thankYou, onComplete: function(){   $('.trip-thank-you.return').click(function(){ $.colorbox.close();}); }});                                      


                                    }
                                }
                            );
                            $('.trip-information-request .submit').click(function(){$('.trip-information-request form').submit();   $.colorbox.resize(); });
                        }
                    }
                );


            }//end oncomplete function
        }
    );
}

删除彩盒关闭动画

1 个答案: