Làm thế nào để tạo liên kết trực tiếp đến bất kỳ hộp fancybox

Question

Tôi cần khi tôi nhấp vào bất kỳ thứ gì sử dụng fancybox, nó sẽ tạo một URL cụ thể cho điều đó, vì vậy khi tôi gửi liên kết này tới ai đó, nó sẽ mở hộp cụ thể mà tôi muốn.

Ví dụ: fancybox.net/home khi tôi nhấp vào hình ảnh đầu tiên, liên kết vẫn fancybox.net/home Tôi muốn rằng khi tôi nhấp vào hình ảnh, URL được tạo ra và xuất hiện trong thanh địa chỉ như: fancybox.net/home/imageid=1 nên khi tôi gửi fancybox.net/home/imageid=1 với ai đó nó đã mở hình ảnh trong hộp

Cảm ơn!

(Nó giống như hình ảnh facebook, khi bạn nhấp chuột vào bất kỳ hình ảnh, bức ảnh sẽ mở trong một hộp nhưng những thay đổi thanh địa chỉ để liên kết hình ảnh)

////// CẬP NHẬT # 1 //////

Tôi đã làm những gì JFK đề xuất nhưng sau một giờ thử tôi vẫn không biết tại sao các hộp không giống nhau.

Nhìn diference giữa:

mã:

<script type="text/javascript"> 
var thisHash = window.location.hash; 
$(document).ready(function() { 
if(window.location.hash) { 
$(thisHash).fancybox({ 
    prevEffect : 'none', 
    nextEffect : 'none', 
    closeBtn : false, 
    arrows : true, 
    nextClick : true, 
    helpers : { 
      thumbs : { 
       width : 80, 
       height : 80 
      }, 
    title : { 
      type : 'inside' 
      }, 
    buttons : {} 
       }, 

    afterLoad : function() { 
      this.title = (this.index + 1) + ' de ' + this.group.length + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>'; 
      } 

       }).trigger('click'); 
} 
$('.fancylink').fancybox({ 
    prevEffect : 'none', 
    nextEffect : 'none', 
    closeBtn : false, 
    arrows : true, 
    nextClick : true, 
    helpers : { 
      thumbs : { 
       width : 80, 
       height : 80 
      }, 
    title : { 
      type : 'inside' 
      }, 
    buttons : {} 
       }, 

    afterLoad : function() { 
      this.title = (this.index + 1) + ' de ' + this.group.length  + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>'; 
      } 

       }); 
}); // ready 
</script>  

Có gì sai trong kịch bản đó?

Answer 1

Trước tiên, bạn vẫn cần phải có liên kết đến hình ảnh của bạn trong trang mở ra Fancybox như:

<a id="image01" class="fancylink" rel="gallery" href="images/01.jpg" title="image 01">open image 01</a> 
<a id="image02" class="fancylink" rel="gallery" href="images/02.jpg" title="image 02">open image 02</a> 

... vv

Thông báo mà tôi đang bổ sung thêm cả một ID và một class cho mỗi neo vì cách duy nhất tôi phải nhắm mục tiêu chúng thông qua URL là thông qua ID của chúng ... lớp sẽ được sử dụng để mở những hình ảnh đó trong hộp thư một cách thông thường khi tôi ở trên trang vì vậy tôi không cần viết một mã hộp thư ưa thích cụ thể cho từng ID.

sau đó thiết lập kịch bản này trên trang của tài liệu tham khảo:

<script type="text/javascript"> 
var thisHash = window.location.hash; 
$(document).ready(function() { 
if(window.location.hash) { 
    $(thisHash).fancybox().trigger('click'); 
} 
$('.fancylink').fancybox(); 
}); // ready 
</script> 

sau đó bạn có thể cung cấp địa chỉ URL mà mục tiêu mỗi hình ảnh như

http://mydomain.com/page.html#image01 

hoặc

http://mydomain.com/page.html#image02 

, vv

muốn demo làm việc?

http://picssel.com/playground/jquery/targetByID_28jan12.html#image01

http://picssel.com/playground/jquery/targetByID_28jan12.html#image02

LƯU Ý: Mã này là dành cho Fancybox v1.3.x kể từ khi bạn sử dụng fancybox.net như tài liệu tham khảo.

CẬP NHẬT # 1: nếu bạn muốn lựa chọn Fancybox bạn cần phải thêm chúng trong cả hai bộ chọn ID và class như:

<script type="text/javascript"> 
var thisHash = window.location.hash; 
$(document).ready(function() { 
if(window.location.hash) { 
    $(thisHash).fancybox({ 
    padding: 0 
    // more API options 
    }).trigger('click'); 
} 
$('.fancylink').fancybox({ 
    padding: 0 
    // more API options 
}); 
}); // ready 
</script> 

Tất nhiên, sử dụng các tùy chọn ngay hoặc cho Fancybox v1.3.x hoặc 2.x