Follow two steps for implementation

Step 1: Add below section to Head Tag

<link rel=”stylesheet” href=”colorbox.css” />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” 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;
});
});
</script>

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>

Download:

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

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply