Tải nội dung nội tuyến bằng cách sử dụng FancyBox

Vâng, tôi chỉ viết bài đăng này để hy vọng giúp những người khác có thể gặp phải vấn đề tương tự.Tải nội dung nội tuyến bằng cách sử dụng FancyBox

Các ví dụ trên trang web của nhà cung cấp có chút mơ hồ và tôi đã giả định kịch bản sau đây.

Bạn có một liên kết với một href n đối với một số nội dung của #id.

<a href="#content-div" class="fancybox">Open Example</a>

Và bạn có div để giữ nội dung đó.

<div id="content-div" style="display: none">Some content here</div>

Sau đó, bạn chỉ cần chạy Fancybox qua 1 lớp lót.

$(".fancybox").fancybox();

Đương nhiên, bạn sẽ nghĩ rằng Fancybox sẽ sao chép nội dung và thay đổi display: none-display: block và mọi thứ sẽ ok.

Nhưng điều này không xảy ra.
Nó vẫn tải nội dung nhưng nội dung bị ẩn và bạn có một Hộp ưa thích trống. *cry*

Nguồn

2010-10-18 Marko

121

Giải pháp rất đơn giản, nhưng tôi mất khoảng 2 giờ rưỡi tóc trên đầu để tìm.

Đơn giản chỉ cần bọc nội dung của bạn với một (dư thừa)div có display: none và Bob là chú của bạn.

<div style="display: none"> 
    <div id="content-div">Some content here</div> 
</div>

Voila

Nguồn

2010-10-18 20:59:41 Marko

ví dụ rất này được xử lý trên trang web Fancybox - hãy nhìn vào ví dụ 5 http://fancybox.net/blog –

@Bobby Jack - Vâng, nhưng họ don' làm cho nó rất rõ ràng. Nếu bạn nhìn xung quanh internet, rất nhiều người đã có cùng một vấn đề với tôi - vì vậy hy vọng điều này sẽ giúp ai đó. – Marko

nó đã giúp tôi dude..i đã đi hạt cũng .. nhờ chia sẻ – mysterious

Tôi đã dành rất nhiều thời gian cố gắng để con số này ra và cách tôi đã làm đang trải qua ví dụ index.html/style.css đóng gói đi kèm với quá trình cài đặt Fancybox .

Nếu bạn xem mã được sử dụng cho trang web demo và về cơ bản sao chép/dán, bạn sẽ ổn.

Để có được một inline Fancybox làm việc, bạn sẽ cần phải có mã hiện tại này trong file index.html của bạn:

<head> 
    <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

    $("#various1").fancybox({ 
      'titlePosition'  : 'inside', 
      'transitionIn'  : 'none', 
      'transitionOut'  : 'none' 
     }); 
    }); 
    </script> 
    </head> 

<body> 

    <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a> 
    <div style="display: none;"> 
     <div id="inline1" style="width:400px;height:100px;overflow:auto;"> 
        Write whatever text you want right here!! 
     </div> 
    </div>

Hãy nhớ được chính xác về những gì các thư mục các file kịch bản của bạn được đặt trong và nơi bạn đang trỏ đến trong thẻ Head; chúng phải tương ứng.

Tôi hy vọng điều này sẽ hữu ích.

Nguồn

2011-09-22 23:15:11 tandy

Chỉ cần một cái gì đó tôi tìm thấy cho người sử dụng Wordpress,

Như rõ ràng như âm thanh, Nếu div của bạn đang trở lại một số nội dung AJAX dựa trên nói một tiêu đề mà thường sẽ liên kết ra một bài viết mới trang, một số hướng dẫn sẽ nói để trả về false vì bạn đang trả lại dữ liệu bài đăng trên cùng một trang và trả lại sẽ ngăn trang di chuyển. Tuy nhiên nếu bạn trả về false, bạn cũng ngăn Fancybox2 làm điều đó. Tôi đã dành hàng giờ cố gắng tìm ra điều đơn giản ngu ngốc đó.

Vì vậy, đối với loại liên kết này, chỉ cần đảm bảo rằng thuộc tính href là băm (#) div bạn muốn chọn và trong javascript của bạn, hãy đảm bảo rằng bạn không trả về false vì bạn không còn cần phải .

đơn giản tôi biết^_^

Nguồn

2012-11-02 21:59:12

Tải nội dung nội tuyến bằng cách sử dụng FancyBox

Trả lời

Các vấn đề liên quan