0

How do I remove the colorbox closing animation?

I'm displaying a lot of thumbnails; when clicked, a colorbox with the full content is displayed, and that contains a link to a colorbox slideshow for said content. When the slideshow colorbox closes, I reopen the original full content, but the closing animation makes it clear that the slideshow closed before the content was reopened. When I set the transition to none in the initialization options, the opening transition is removed, but not the closing animation.

Thanks!

To initialize content:

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

Trip modal content:

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"
                        }
                );
            }
        }
    );
}
4

1 に答える 1

0

$.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
        }
    );
}
于 2012-12-11T02:01:41.117 に答える