Different colorbox calls depending on specific cookie

Question

I am trying to do two things here. If someone visits the site and they have the cookie "v_regUsr" on their computer, the plan should open up normally when they click on the link in colorbox like in my html below.

If someone visits the site and they dont have the cookie "v_regUsr" it should open up a different colorbox window when the click on it with these settings:

$.colorbox({width:"480px",height:"290px", iframe:true, href:"test.php"});

my html:

<a href="plan.php"  class="iframeplan"><img src="planbutton.png" border="0"/></a>

my script:

<script type="text/javascript">
if (document.cookie.indexOf("v_regUsr") >= 0) {
  // They've been here before.

}
else {
  //They've not been here before.
   $.colorbox({width:"480px",height:"290px", iframe:true, href:"test.php"});
}
</script>

is this possible?

Answer 1

I would be inclined to use jQuery for this:

if($.cookie('v_regUsr')){
    //the cookie exists
    $('a#galleryLink').attr('href', 'plan.php'); //EDIT - adds an attribute to any <a> tag with the id 'galleryLink'
    jQuery('a.gallery').colorbox({/*insert your key:value paired options specific to established users here*/});
} else{
    //the cookie does not exist
    $('a#galleryLink').attr('href', 'test.php'); //EDIT - as above, but for test.php
    jQuery('a.gallery').colorbox({/*insert your key:value paired options specific to new users here*/});
}

This simply checks for the existence of a cookie. The scripting inside the if() statement is taken from the colorbox website, all of the key:value pairs are here.

The answer above assumes you use a number of <a> tags in your html with a common class, in this case gallery.

---

Edit:

See code annotations above for alterations.

This assumes you add an id="" attribute for each of your links, these IDs would have to be the same for each element, it's not ideal, but provided you don't need to use the ID to reference an individual entity, then it won't break.

That said, it would appear you could omit the href="" attribute from the link tag, and allow the colorbox API to handle this for you - you've got the right idea in your own demo code href:"test.php" - I haven't used this in colorbox myself so can't attest to it working.

---

Edit 2:

if($.cookie('v_regUsr')){
    //the cookie exists
    $('#linkOne').attr('href', 'plan1.php'); //EDIT - this assigns an attribute to an element with the ID of 'linkOne'
    $('#linkTwo').attr('href', 'plan2.php'); //as above, but for link 2
    $('#linkThree').attr('href', 'plan3.php'); //as above, but for link 3

    jQuery('a.gallery').colorbox({/*insert your key:value paired options specific to established users here*/}); //this references any <a> element with a class of 'gallery'
} else{
    //the cookie does not exist
    $('#linkOne').attr('href', 'test1.php'); //EDIT - this assigns an attribute to an element with the ID of 'linkOne'
    $('#linkTwo').attr('href', 'test2.php'); //as above, but for link 2
    $('#linkThree').attr('href', 'test3.php'); //as above, but for link 3

    jQuery('a.gallery').colorbox({/*insert your key:value paired options specific to new users here*/});
}

---

Edit 3:

if($.cookie('v_regUsr')){
    //the cookie exists
    $('#linkOne').attr('href', 'plan1.php'); //EDIT - this assigns an attribute to an element with the ID of 'linkOne'
    $('#linkTwo').attr('href', 'plan2.php'); //as above, but for link 2
    $('#linkThree').attr('href', 'plan3.php'); //as above, but for link 3

    jQuery('a.gallery').colorbox({/*insert your key:value paired options specific to established users here*/}); //this references any <a> element with a class of 'gallery'
} else{
    //the cookie does not exist
    $('a.gallery').attr('href', 'test.php'); //EDIT - this assigns an attribute to all elements with the class of 'gallery'

    jQuery('a.gallery').colorbox({/*insert your key:value paired options specific to new users here*/});
}

See fiddle here for a basic, working example of the above href manipulation using IDs and class'