//   $("button[rel]").overlay({expose: '#000', effect: 'apple'}); 
      $(document).ready(function() {
      $('a[rel]').overlay({

   //   expose: 'darkred',
        //  effect:'apple' ,

              onBeforeLoad: function() {
       
                  this.getBackgroundImage().expose({ color: '#000', opacity: 0.6 });

                  var fileext = this.getTrigger().attr("href")  //get file extention
                  var ext = fileext.slice(fileext.lastIndexOf(".")).toLowerCase();

                  var html = '<img src="' + this.getTrigger().attr("href") + '" />';    // get the HTML ready to load
                  var wrap = this.getContent().find("div.wrap");
                   
                  
                  // if extention = image then show image, otherwise open an external link
                  if (ext == ".jpg" || ext == ".png" || ext == ".gif" || ext == ".jpeg") {
                      $('.overlay')  // change css for image popups
                           .css('background-image', 'url(../_site/_images/jquery/BK_large.png)')
                           .css('width', '825px')
                           .css('height', '625px')
                           .css('padding', '30px');

                      wrap.append(html)

                  } else {

                      $('.overlay')  // reset none image pop to default
                      // .css('background-image', 'url(/_site/_images/jquery/white1.png)')
                      // .css('width', '780px')
                      // .css('height', '600px')
                      // .css('overflow', 'auto');
                      wrap.load(this.getTrigger().attr("href"));
                  }

              },

         
              onClose: function() {

                  $('div.wrap').val(''); // clear div tag
                  $('div.wrap').text(''); // clear div tag

              }

          });


      });