I figured a way to do it, perhaps someone can come up with an easier way, but this works just fine.
In the html doc:
<head>
<link id="colorboxHtml" rel="stylesheet" type="text/css" href="styles/colorboxHtml.css">
<link id="colorboxYoutube" rel="stylesheet" type="text/css" href="styles/colorboxYoutube.css">
</head>
<body>
<section>
<a class="html" href="includes/colorboxHtml.html">Web page in colorbox
</a>
</section>
<section>
<a class="youtube" href="http://www.youtube.com/embed/8C0NfQrky6I">Youtube in colorbox
</a>
</section>
<!--footer-->
<script src='scripts/colorboxHtml.js'></script>
<script src='scripts/colorboxYoutube.js'></script>
<script>
$(document).ready(function(){
jQuery(".html").colorboxHtml({iframe:true, innerWidth:"80%", innerHeight:500});
jQuery(".youtube").colorboxYoutube({iframe:true, innerWidth:640, innerHeight:390});
});
</script>
</body>
Now we need to create the custom js and css files:
- Take the colorbox.css file and find/replace every instance of "colorbox" and replace it with, for the first in this example, "colorboxHtml"
- In the same file find/replace every instance of "cbox" and replace it with "cboxh"
- Save the file as colorboxHtml.css
- Take the colorbox.js file and do the same find/replaces for colorbox and cbox as you did in the css file
- Save the file as colorboxHtml.js
- Rinse and Repeat for every other instance of colorbox you want
Now we can not only style each instance differently but we can completely control each instance's javascript functionality!!