JS CODE INFO EXAMPLE:

       $('.simple_alert_info').click(function(){
          $.dialogize({
            content:'This is a sample example of alert DialogBox',
            img_dial:'<img src="img/info.png" lat="" />'
          });
       });        
          

JS CODE ERROR EXAMPLE:

       $('.simple_alert_error').click(function(){
          $.dialogize({
          $.dialogize({
            overlay_opacity:1,
            color_overlay:'red',
            border_color:'red',            
            shadow_color:'red',
            background_close:'red',
            color:'red',
            content:'This is a sample example of alert error DialogBox',
            img_dial:'<img src="img/error.png" lat="" />'
          });
       });       
          

JS CODE OK EXAMPLE:

       $('.simple_alert_ok').click(function(){
          $.dialogize({
            overlay_opacity:1,
            color_overlay:'#66FF33',
            border_color:'#66FF33',            
            shadow_color:'#666',
            background_close:'#66FF33',
            color:'#36D700',
            content:'This is a sample example of alert error DialogBox',
            img_dial:''
          });
       });          
          

JS CODE ATTENTION EXAMPLE:

       $('.simple_alert_attention').click(function(){
          $.dialogize({
            overlay_opacity:1,
            color_overlay:'#FEA303',
            border_color:'#FEA303',            
            shadow_color:'#666',
            background_close:'#FEA303',
            color:'#CC6600',
            content:'This is a sample example of alert error DialogBox',
            img_dial:''
          });
       });        
          

HTML CODE:

         <button class="myButton simple_alert_info"><img src="img/info.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE INFO EXAMPLE</button>
         <button class="myButton simple_alert_error"><img src="img/error.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE ERROR EXAMPLE</button>
         <button class="myButton simple_alert_ok"><img src="img/ok.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE OK EXAMPLE</button>
         <button class="myButton simple_alert_attention"><img src="img/attention.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE ATTENTION EXAMPLE</button>           
          

JS CODE:

   
          /*Resize intial images with integrated plugin "imgscale" , so no need Thumbnail*/
	   $(".img_sized").imgscale({ 
          parent : '.cont', 
          fade : 1000 ,
          scale:'fit'
       });
        /**********************/             
       $('.img_sized').click(function(){
       var path = $(this).attr('src')
        $.dialogize({
         type:'img',/* IMPORTANT */
         content:'<img src="'+path+'"/>'
        });
       });       
          

HTML CODE:

          <div style="height:100px;cursor:pointer" title="CLICK TO ZOOM!" class="cont"><img class="img_sized" src="desert.jpg" alt="" /></div>
          <div style="height:100px;cursor:pointer" title="CLICK TO ZOOM!" class="cont"><img class="img_sized" src="Penguins.jpg" alt="" /></div>
          /* N.B. divs with class "cont" is necessary for the plugin imgscale and it must have a defined height */
          

JS CODE:

        $('.read_pdf').click(function(){
          var path = $(this).attr('src')
          $.dialogize({
            type:'pdf',/* IMPORTANT */
            pdf_src:'lorem.pdf'
          });
       });       
          

HTML CODE:

           <button class="myButton read_pdf">READ PDF</button>
          

JS CODE:

     $('.read_html').click(function(){
        $.ajax({
         type:'GET',
         url:'callpage.html',
         success:function(data){
          $.dialogize({            
            content:data
          });
         }         
        });
     });   
          

HTML CODE:

           <button class="myButton read_html">READ HTML</button>
          

JS CODE:

        $('.alert_confirm').click(function(){
          $.dialogize({
            type:'confirm',/* IMPORTANT */
            img_dial:'<img src="img/questionmark.png" alt="" />',
            content:'<div style="text-align:center">Hi, do you want confirm?</div>',
            confirm:function(){
             alert('you have click on YES')
            }
          });
       });  
          

HTML CODE:

            <button class="myButton read_html">CONFIRM ALERT</button>
          

JS CODE:

        $('.simple_alert').click(function(){
          $.dialogize({
            img_dial:'<img src="img/questionmark.png" alt="" />',
            content:'This is a sample example of alert DialogBox.<br/>pay attemption to callback function after closing dialog!!',
            before_open_dial:function(){
             alert('you are opening a dialog box with dialogize plug in, this is a callback function before its opening')
            },
            post_close_dial:function(){
             alert('You have closed a dialog box with dialogize plug in, this is a callback function after its closing')
            }            
          });
       });
          

HTML CODE:

            <button class="myButton simple_alert">SIMPLE EXAMPLE WITH CALL BACK FUNCTIONS</button>