Có cách nào để chuyển chức năng khởi tạo vào trình chiếu Orbit không?

Question

Tôi đã giải quyết được vấn đề ban đầu của mình, nhưng tôi tự hỏi liệu có một giải pháp thanh lịch hơn hay không. Tôi đang sử dụng Orbit của Quỹ để tạo trình chiếu. Đây không phải là trình chiếu đơn giản, nó là một trình chiếu nơi mỗi trang có một chú thích dữ liệu được xác định, và bên trong chú thích dữ liệu này có HTML cần tải một hộp thoại phương thức.

Nếu bạn đang sử dụng Foundation, bạn ngay lập tức nghĩ về việc sử dụng thư viện Reveal để hiển thị một hộp thoại phương thức, và tôi sẽ, nhưng yêu cầu gọi để sử dụng prettyPhoto. (. Đó là những yêu cầu) Vâng vấn đề là các yếu tố trong các dữ liệu-caption không bị ảnh hưởng bởi các cuộc gọi khởi tạo ban đầu để:

$("a[rel^='prettyPhoto']").prettyPhoto();

Những gì tôi cần làm là đảm bảo để khởi tạo mỗi dữ liệu -caption khi nó được nạp. Vâng, đây là vấn đề. Tôi đã giải quyết vấn đề này cho quá trình chuyển đổi slide bằng cách sử dụng sự kiện afterSlideChange, nhưng vấn đề là slide đầu tiên. Tôi cần gọi phương thức này cho slide đầu tiên được hiển thị.

Dưới đây là đoạn code mà giải quyết vấn đề này:

<script type="text/javascript"> 
$(window).load(function() { 
    $('#featured').orbit({ 
     afterSlideChange:function() { 
      $("a[rel^='prettyPhoto']").prettyPhoto({ 
       default_width:640, 
       default_height:500, 
       theme:'light_square' 
      }); 
     }, // empty function 
     fluid:true       // or set a aspect ratio for content slides (ex: '4x3') 
    }); 
    $("a[rel^='prettyPhoto']").prettyPhoto({ 
     default_width:640, 
     default_height:500, 
     theme:'light_square' 
    }); 
}); 
</script> 

Có cách nào tốt hơn để làm điều này mà không cần phải sao chép mã mà. Tôi có nên định nghĩa một sự kiện "initializeSlide" của riêng tôi hay không, hoặc có một số câu trả lời mà tôi chỉ thiếu?

Answer 1

Thanh trượt quỹ đạo không lộ nhiều phương pháp. May mắn thay, có một số cách giải quyết đơn giản.

Ví dụ, bạn có thể thiết lập nó như thế này:

$(window).load(function() { 
    var sliderChanged = (function sliderChanged(prevActive, active) { 
     $("a[rel^='prettyPhoto']").prettyPhoto({ 
      default_width: 640, 
      default_height: 500, 
      theme: 'light_square' 
     }); 
     return sliderChanged; 
    }()); 
    jQuery('#featured').orbit({ 
     afterSlideChange: sliderChanged, 
     fluid: true 
    }); 
}); 

Answer 2

đây tôi nghĩ rằng bạn có thể sử dụng sự kiện tải từ jquery

<script type="text/javascript"> 
    $(window).load(function() { 
     $('#featured').orbit({fluid:true}); 
     $("a[rel^='prettyPhoto']").load(function(){ 
     $(this).prettyPhoto({ 
      default_width:640, 
      default_height:500, 
      theme:'light_square' 
     }); 
     }); 
    }); 
</script> 

Answer 3

Bạn đang sử dụng Sau khi slide Thay đổi

tham khảo Orbit của documentation

'afterSlideChange function(){}, //Empty Function for you to use after slide change' 

Vì vậy, cuộc gọi này sẽ làm trống chức năng và bạn phải gọi lại một lần nữa ..

Bây giờ, câu hỏi của tôi là lý do tại sao bạn làm điều này, bất kỳ lý do cụ thể nào? Nếu không thì chỉ cần loại bỏ điều đó.

và theo quan niệm của tôi câu trả lời Rohit của trên sẽ làm phần còn lại ...

Tôi hy vọng điều này sẽ làm :)

Answer 4

Với bản cập nhật để Foundation 4 bây giờ có một sự kiện orbit:ready. Sự kiện này sẽ kích hoạt khi thanh trượt được tải.