Cómo crear un enlace directo a cualquier cuadro de fancybox

Question

Necesito que cuando hago clic en cualquier elemento que use fancybox genere una URL específica para eso, así que cuando le envío este enlace a alguien, abre el cuadro específico que quiero.

Por ejemplo: fancybox.net/home al hacer clic en la primera imagen, el enlace aún fancybox.net/home Quiero que cuando hago clic en la imagen, la URL se genera y aparece en la barra de direcciones como: fancybox.net/home/imageid=1 así cuando envío fancybox.net/home/imageid=1 a alguien que ya abre la imagen en el cuadro

Gracias!

(es como fotos de Facebook, al hacer clic en cualquier foto, la foto se abre en una caja, pero la barra de direcciones cambios en el vínculo de la imagen)

////// ACTUALIZACIÓN # 1 //////

Hice lo que sugirió JFK, pero después de una hora tratando de seguir sin saber por qué las cajas no son iguales.

Mira la diference entre:

el código:

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

Qué hay de malo en que el guión?

Answer 1

En primer lugar, todavía necesita tener enlaces a sus imágenes en la página que se abre FancyBox como:

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

... etc

Aviso que estoy añadiendo a la vez un ID y una class para cada ancla, ya que la única forma en que tengo que apuntarlos a través de URL es a través de su ID ... la clase se usará para abrir esas imágenes en fancybox de forma regular una vez que esté en la página, así que no necesito escriba un código de fancybox específico para cada ID.

continuación, establezca este script en la página de referencia:

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

entonces usted puede proporcionar la dirección URL que se dirige a cada imagen como

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

o

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

etc.

quiero demostración de trabajo?

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

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

NOTA: Este código es para v1.3.x FancyBox ya que utilizó fancybox.net como referencia.

ACTUALIZACIÓN # 1: si quieres opciones FancyBox es necesario agregar otra en las dos selectores ID y class como:

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

Por supuesto, utilizar las opciones correctas, ya sea para v1.3.x FancyBox o 2.x