2012-12-10 178 views
0

如何刪除colorbox關閉動畫?刪除colorbox關閉動畫

我顯示了很多縮略圖;點擊時,將顯示包含完整內容的彩盒,並且包含指向所述內容的彩色幻燈片的鏈接。當幻燈片的彩色框關閉時,我重新打開原始的全部內容,但最後的動畫清楚地表明幻燈片在內容重新打開之前關閉。當我在初始化選項中將轉換設置爲none時,打開轉換將被刪除,而不是關閉動畫。

謝謝!


要初始化內容:

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

你有鏈接? –

+0

目前還沒有...我發現了一個解決方法,但是我從未真正關閉過彩盒,除非我在打開的主彩盒上,下面詳細介紹。 – trismi

回答

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 
     } 
    ); 
} 
+0

這並沒有擺脫動畫,但它確實避免關閉/關閉動畫,除非我真的想關閉彩色框。 – trismi