2009-12-20 16 views
7

Estoy tratando de abrir un jQuery Colorbox desde un enlace fuera del resto de las imágenes de la caja de color. Por lo tanto, todos los ejemplos tienen el siguiente aspecto:jQuery/Colorbox: ¿crear un enlace por separado para abrir el cuadro de colores?

<a href="image1.png" rel="group1"><img src="thumb1.png" /></a> 
<a href="image2.png" rel="group1"><img src="thumb2.png" /></a> 
<script>$("a[rel='group1']").colorbox();</script> 

OK, está bien, pero también necesito para abrir esa caja de colores de un enlace separado:

<a href="?"> this link should also open the colorbox </a> 

¿Qué tengo que poner dónde ¿Haz eso? Todos los ejemplos de colorbox solo muestran lo que está en el primer bloque de código, y no soy un experto de jQuery.

Respuesta

5

¡Ah, lo descubrí! Esto funciona:

Cambiar el primer link para:

<a href="image1.png" rel="group1" id="something"><img src="thumb1.png" /></a> 

A continuación, establecer nuestro enlace adicional del modo siguiente:

<a href="#" onclick="$('#something').colorbox({rel:\'post' . $post->ID . '\', open:true});">click here</a> 
+1

Debería agregar su función de colorbox en la función document.ready en lugar de hacerlo como un clic. –

20

Aquí es una cosa similar que trabajó para mi proyecto.

HTML

//I "display:none" the images gallery to hide them... 
<div style="display:none;"> 
<a href="image1.jpg" rel="example1">Grouped Photo 1</a> 
<a href="image2.jpg" rel="example2">Grouped Photo 2</a> 
<a href="image3.jpg" rel="example3">Grouped Photo 3</a> 
</div> 

//...then when I click on this JPG image the group of images (above) appear in a colorbox 
<img src="circle1.jpg" width="147" height="149" alt="circle" class="circle1" /> 

Aquí está la JQUERY

$(document).ready(function(){ 

    //when i "click" on the image with a class of "circle1" it opens the "example1" group 
    $('.circle1').click(function() { 
     $("a[rel='example1']").colorbox({open:true}); 
    }); 

}); 
0

Prueba esto:

$(".link-to-click").click(function() { 
    $("a.colorbox-link").colorbox({open:true, rel:'colorbox-class-group'}); 
}); 
Cuestiones relacionadas