Jquery Colorbox Example - Jquery
How to use colorbox in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
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>
