Using Colorbox JQuery plugin to autoload a Lightbox

phptuts August 2, 2013

Here the sample code using Colorbox JQuery plugin:

<html>
	<head>
		 
		<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){				 
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".inline").trigger('click'); 
			});
		</script>
	</head>
	<body>
<p>Wellcome to Tutorialspots.com</p>

<!--colorbox start-->
<a class='inline' href="#inline_content" style="display:none;">Tutorialspots.com</a>
<div style='display:none'>

			<div id='inline_content' style='padding:10px; background:#fff;'>
			Wellcome to Tutorialspots.com
			</div>
		</div>
<!--colorbox end-->
	</body>
</html>

We receive the result:

Problem with Colorbox JQuery plugin

However, when we use Colorbox with other JS library or older JQuery, like the example below:

<html>
	<head>
		
		<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){				 
				$(".inline").colorbox({inline:true, width:"300px"});
				$(".inline").trigger('click'); 
			});
		</script>
	</head>
	<body>
<p>Wellcome to Tutorialspots.com</p>

<!--colorbox start-->
<a class='inline' href="#inline_content" style="display:none;">Tutorialspots.com</a>
<div style='display:none'>

			<div id='inline_content' style='padding:10px; background:#fff;'>
			Wellcome to Tutorialspots.com
			</div>
		</div>
<!--colorbox end-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
	</body>
</html>

We get the Error:
Error: $(".inline").colorbox is not a function

We must use $.noConflict() method:

<script>
			var $jq = jQuery.noConflict(); 
			$jq(document).ready(function(){				 
				$jq(".inline").colorbox({inline:true, width:"300px"});
				$jq(".inline").trigger('click'); 
			});
		</script>

phptuts

Related Posts

Leave a Reply