Implementation of Color Box in

Category: ASP.NETJQUERY Comments: No comments

Follow two steps for implementation

Step 1: Add below section to Head Tag

<link rel=”stylesheet” href=”colorbox.css” />
<script src=”” type=”text/javascript”></script>
<script src=”js/jquery.colorbox.js” type=”text/javascript”></script>
<script type=”text/ecmascript”>
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$(“.group1″).colorbox({ rel: ‘group1′ });
//Example of preserving a JavaScript event for inline calls.
$(“#click”).click(function () {
$(‘#click’).css({ “background-color”: “#f00″, “color”: “#fff”, “cursor”: “inherit” }).text(“Open this window again and this message will still be here.”);
return false;

Step 2: Add below section to Design Page or Aspx Page

<a class=”group1″ href=”content/ohoopee1.jpg” title=”Me and my grandfather on the Ohoopee.”>Grouped Photo 1</a>
<a class=”group1″ href=”content/ohoopee2.jpg” title=”On the Ohoopee as a child”>Grouped Photo 2</a>
<a class=”group1″ href=”content/ohoopee3.jpg” title=”On the Ohoopee as an adult”>Grouped Photo 3</a>


Color Box Css: Colorbox Css
Color Box Js: Jquery ColorBox
Contents: Contents


Leave a Reply

Your email address will not be published. Required fields are marked *


HTML tags are not allowed.