jquery colorbox tutorial

ColorBox is a very cool jQuery plugin. You can use it to open inline pages/images. its an perfect replacement for javascript's classic POP UP windows (window.open()).

Installing it and running it takes few minutes.

First Download it from http://www.jacklmoore.com/colorbox/

In your Download you need to copy these 3 files/folder....

jquery.colorbox-min.js
colorbox.css
images Directory

if you place css file and images directory within same folder then you dont need to change anything, however if you place images directory somewhere else, then you need to update your css file as well.

Also make sure your page has jQuery include on top of your page.

here is sample code.

<script type="text/javascript" src="/web/assets/js/jquery.1.8.3.js"></script>
<script src="/assets/js/colorbox/jquery.colorbox-min.js"></script>

<link rel="stylesheet" href="/assets/css/colorbox/colorbox.css" />

 function vDetailspopOut() {
      $.ajaxSetup({ cache: false });
        $(".vDetails_img").colorbox(); //apply on ALL CLASSES with name vDetails_img
 }

 $(function(){ // onLOAD on document

  vDetailspopOut();

})

 

 

<a href="item_detail.asp?sku=1 class="vDetails_img"><img src="/web/assets/images/button_quicklook_launcher_down.gif" border=1 /></a>

 

Thanks

 

 

 

 

 

Posted by:

No comments posted.

Name :  

Email :  

Comment Below