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 http://www.example.com/blog/?open=true, 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 http://www.example.com/blog/?id=12345?open=true
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>


$(document).ready(function(){
var
vars = [],
hash,
hashes = window.location.href.slice(window.location.href.indexOf('?')
+ 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
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(); ?>
</a>


Answers (1)

2011-04-06

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.

So http://www.example.com/my-page?query=a_query_value#hash_parameter

would give you :


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

if( hash.length > 1 ) {
// clean the leading #
hash.replace('#','');
$("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.


Regards

John

---

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:
$(".example9").colorbox({
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:
http://www.example.com/my-page?query=a_query_value#hash_parameter

if you mean

http://www.example.com/my-page?open=true#post-id

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 http://www.example.com/my-page?open=true#post-id 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.