open url in jquery colorbox/lightbox

Question

I have a page that displays restaurant food menu. And when a person clicks on a particular food item I want to open the link in colorbox. Is there a way I can open the links in colorbox without effecting other anchor tags. I cannot modify the existing code(menu is displayed by 3rd party plugin) but I can add additional script to the page(jquery or php). So I was hoping to add ("a").click(), but I wasn't sure how to get the href link for a particular anchor tag. For now all the links I want to open have string "/restaurants/" in common. Any suggestions about how to solve this problem?

Answer 1

<script type="text/javascript">
  $(document).ready(function() {
    $("a", ".rest-menuitem").click(
      function(event) {
        event.preventDefault();
        var elementURL = $(this).attr("href");
        $.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
      });
  });
</script>

Change innerWidth and innerHeight to fit your content