How to use jquery colorbox plugin

Published on : June 3, 2014

Author:

Category: Jquery

How to use colorbox (Guideline):

Colorbox is a jquery plugin which means that it extends the jquery javascript library to include extra functionality. In your HTML document you must include the jquery library’s before you include the source of any jquery plugin. Colorbox has the additional requirement that  you include its stylesheet in the <head> of your document before include the source of the plugin.

Example:


   

      
         

            
         

         

            
            
               

                   
                      

                         
                            

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


                                     <script type="text/javascript" src="JS/jquery-1.7.1.min.js"></script>

                                     <script type="text/javascript" src="JS/jquery.colorbox.js"></script>


                                  </head>

                               </html>
                            
















Let’s use colorbox.


Example: 



   colorbox.css
   

      
         

            
               

                  
                     

                        
                           

                              #colorbox, #cboxOverlay, #cboxWrapper {position: absolute; top: 0; left:0; z-index:99999999; overflow:hidden;}
                              #cboxOverlay {position: fixed; width: 100%; height: 100%; background-color: #68c477;}
                           

                        		
                     

                  
               

            		
         

      
   




Example of demo code:



   

      
         

            
            
            
            
         

         

            
            
            
               

                  
                     

                        
                           

                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                              <html xmlns="http://www.w3.org/1999/xhtml">

                                 <head>
                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                    <title>This is an example of using colorbox</title>

                                    <!----------------- Add colorbox css ------------------>

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

                                    <!----------------- Add jquery script and colorbox plugin source ------------------------>
                                    <script type="text/javascript" src="JS/jquery-1.7.1.min.js"></script>
                                    <script type="text/javascript" src="JS/jquery.colorbox.js"></script>
                                    <script type="text/javascript">

                                       $(document).ready(function(e){
                                          $('.press').colorbox({inline:true});
                                       });
                                    </script>
                                </head>
                             

                          		
                       

                    
                 

              		
           

           

              
           

           

              
              
                 

                    
                       

                          
                             

                                <body>

                                   <div>
                                      <a href="#test"> Press the link</a>
                                   </div>

                                   <div style="display:none;">

                                   <div id="test">
                                      <h1>This is an example of colorbox</h1>
                                      <p>Colorbox example</p>
                                   </div>
                               </div>
                            </body>
                         </html>
                      

                   		
                

             
          

       		
    

    
    





For colorbox jquery settings visit:


http://www.jacklmoore.com/colorbox/

								


								

									

																					

												

													

														By,
														
																wahid															
													

												

												
												

																										
												

											

																			

									
																			

												

		
Leave a Reply 
Your email address will not be published. Required fields are marked *

Recent Post

Popular Categories:

Popular Tags

Useful links

Contact - USA

Brent Fowler
Director, Business
Development