i am using jQuery colorbox plugin.
it is true with asp.net page but not in asp.net user control.
what is the problem?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ColorBox Examples</title>
<style type="text/css">
body
{
font: 12px/1.2 Verdana, Arial, san-serrif;
padding: 0 10px;
}
a:link, a:visited
{
text-decoration: none;
color: #416CE5;
border-bottom: 1px solid #416CE5;
}
h2
{
font-size: 13px;
margin: 15px 0 0 0;
}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({ transition: "fade" });
$("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" });
$("a[rel='example4']").colorbox({ slideshow: true });
$(".example5").colorbox();
$(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
$(".example7").colorbox({ width: "80%", height: "80%", iframe: true });
$(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
$(".example9").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
//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>
</head>
<body>
<h1>
ColorBox Demonstration
</h1>
<h2>
Elastic Transition
</h2>
<p>
<a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>
</p>
<p>
<a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a>
</p>
<p>
<a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a>
</p>
<h2>
Fade Transition
</h2>
<p>
<a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a>
</p>
<p>
<a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a>
</p>
<p>
<a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a>
</p>
<h2>
No Transition + fixed width and height (75% of screen size)</h2>
<p>
<a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>
</p>
<p>
<a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a>
</p>
<p>
<a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a>
</p>
<h2>
Slideshow</h2>
<p>
<a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">
Grouped Photo 1</a></p>
<p>
<a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a>
</p>
<p>
<a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a>
</p>
<h2>
Other Content Types</h2>
<p>
<a class='example5' href="test.aspx" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p>
<a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a>
</p>
<p>
<a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">
Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p>
<a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
<p>
<a class='example8' href="#">Inline HTML</a></p>
<h2>
Demonstration of using callbacks</h2>
<p>
<a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
<!-- This contains the hidden content for inline calls -->
<div style='display: none'>
<div id='inline_example1' style='padding: 10px; background: #fff;'>
<p>
<strong>This content comes from a hidden element on this page.</strong></p>
<p>
The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br /><a id="click" href="#" style='padding: 5px; background: #ccc;'>Click me, it will be preserved!</a></p>
<p>
<strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>
Updating Content Example:<br /><a class="example5" href="../content/flash.html">Click here to load new content</a>
</p>
</div>
</div>
</body>
</html>
You don’t need those quotes around ‘example1’ for a start. http://api.jquery.com/attribute-equals-selector/
Would do.