Jquery Colorbox Example - Jquery
How to use colorbox in jquery?
Snippet Code
Sample jquery code allows you to display your image in lightbox view. The simple jquery colorbox code to add color effect is given below.
<link type='text/css' rel='stylesheet' href='http://www.jacklmoore.com/colorbox/example4/colorbox.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src='http://www.jacklmoore.com/colorbox/jquery.colorbox.js'></script>
<script>
$(document).ready(function(){
$(".colorimg").colorbox({
rel: 'colorimg',
transition: "elastic", // fade,none,elastic
width: "75%",
height: "75%",
current: "{current} / {total}",
previous: "<",
next: ">",
close: "close",
onComplete: function(){
var bg = $.colorbox.element().data('bg');
$('#cboxLoadedContent').css('backgroundColor', bg);
}
});
});
</script>
<a class="colorimg" data-bg="#ff0" href="images/rose.png" title="">
<img src="images/rose.png"/>
</a>
<a class="colorimg" data-bg="#8f8" href="images/test.jpeg" title="">
<img src="images/test.jpeg"/>
</a>
<a class="colorimg" data-bg="#ccf" href="images/puppys.jpg" title="">
<img src="images/puppys.jpg"/>
</a>
<style>
.colorimg img {
padding: 5px;
width:120px; height:90px;}
#cboxCurrent { left:28px; }
#cboxTitle { margin:0 60px; width:70%; }
</style>
Tags