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>

Tags


Ask Questions

Ask Question