Jak utworzyć bezpośredni link do dowolnego pudełka z fancybox?

Question

Potrzebuję tego, kiedy klikam w coś, co używa fancybox, generuje specjalny adres URL, więc kiedy wyślę ten link do kogoś, otworzy on określone pole, które chcę.

Na przykład: fancybox.net/home po kliknięciu w pierwszym obrazie, link nadal fancybox.net/home chcę, że po kliknięciu na obrazku, URL jest generowany i pojawia się w pasku adresu jak: fancybox.net/home/imageid=1 więc kiedy wysłać fancybox.net/home/imageid=1 komuś to już otwiera obraz w polu

Dzięki!

(Jest to jak zdjęcia na Facebooku, po kliknięciu w dowolne zdjęcie, zdjęcie otwiera się w oknie, ale zmiany pasku adresu, aby link obrazu)

////// Aktualizacja # 1 //////

Zrobiłem to, co sugerował JFK, ale po godzinie próbowałem nadal nie wiem, dlaczego pudełka nie są takie same.

Spójrz diference pomiędzy:

kodu:

<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>  

Co jest złego w tym scenariuszu?

Answer 1

Najpierw trzeba jeszcze mieć linki do zdjęć na stronie, która otwiera fancybox jak:

<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> 

... itd

Sklepu że dodaję zarówno ID oraz class do każdej kotwicy, ponieważ jedynym sposobem, w jaki muszę ich adresować za pomocą adresu URL, jest ich identyfikator ... klasa będzie używana do otwierania tych obrazów w fancybox w zwykły sposób, gdy znajdę się na stronie, więc nie muszę napisz konkretny kod fancybox dla każdego identyfikatora.

następnie ustawić ten skrypt na stronie odniesienia:

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

wtedy można podać adres URL, który kieruje każdy obraz jak

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

lub

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

itp

chce działające demo?

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

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

UWAGA: Ten kod jest fancybox v1.3.x ponieważ użyłeś fancybox.net jako odniesienie.

Aktualizacja # 1: jeśli chcesz opcje fancybox trzeba dodać je do obu selektorów ID i class jak:

<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> 

Oczywiście, należy użyć odpowiednich opcji zarówno dla fancybox v1.3.x lub 2.x