Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Adding wordpress post ID to a Colorbox jQuery string? WordPress

I have installed Colorbox (version of Lightbox) into a theme for a client. The client will be posting photos to the blog and when a user clicks on a photo, the photo opens in a colorbox window. The issue is, the client wants to be able to post a url (say on Twitter) to a specific photo in within a colorbox. I have figured out how to code the colorbox so that if you go to, the first photo post on the page will open within the colorbox.

I know if someone understands jQuery and Wordpress, this has to be a piece of cake. I'm assuming the URL will end up looking like
Extra props for anyone who can make the browser's address bar display this URL when its colorbox is open. That would be ideal.

<strong>This is current Colorbox jquery code I am using:</strong>

vars = [],
hashes = window.location.href.slice(window.location.href.indexOf('?')
+ 1).split('&');
for(var i = 0; i < hashes.length; i++)
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
$("a[rel='example1']").colorbox({maxHeight:'90%',next:'Next',close:'Close', open:vars['open'] == 'true' ? true : false});


<strong>This is the code for the post image link:</strong>

<a href="<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'full-size', true);
echo $image_url[0];?>" rel="example1"
title="<?php the_title(); ?>" id="<?php the_ID(); ?>">
<?php the_content(); ?>

Answers (1)


John Cotton answers:

Hi Lindsay

You should use the hash part of the query string so that you can change the url without changing the page when you popup an image.


would give you :

jQuery(document).ready( function() {
// get the hash value
var hash = window.location.hash;

if( hash.length > 1 ) {
// clean the leading #
$("a[rel='"+hash+"']").colorbox({maxHeight:'90%',next:'Next',close:'Close', open:vars['open'] == 'true' ? true : false});

I don't know colorbox, but if there's a pop-up event then calling this function on that event would change the address bar:

function updateHash(p_picture_id) {
window.location.hash = p_picture_id;

Of course, you could make more use of the hash by storing a series of name/value pairs there, in which can you'd need something more sophisticated in updateHash to maintain what was there already and append/update, but hopefully you get the idea.



John Cotton comments:

I just had a quick look at the colorbox examples. I'm not certain but - if the photo id is in the id attribute - this might work:
onOpen:function(){ window.location.hash = jQuery(this).attr('id'); },
onClosed:function(){ window.location.hash = ''; }

The bit I'm not sure about is "jQuery(this).attr('id')" since I don't know what context colorbox will have, but it might work.

Lindsey comments:

I have to say, my knowledge of jquery goes as far as rollover effects, so this makes absolutely no sense to me.

Making the URL look like this:

if you mean

is perfect. What I need is just the code that I can copy and paste into me theme. I don't understand any of this at all. I just want to be able to go to and have whatever post id I put in open in a colorbox. As you can see from my code above, I have added the post id to the colorbox link so all that should need to change is the jquery string.

Maybe your code would work but I have no idea how to implement it.