title: Need to add a surrounding div to fancybox or add a class to body when clicked
body: <p>I am trying to create multiple fancyboxes on the same page that when clicked open up with either a iframe in a iphone, ipad or desktop browser. </p>
  
  <p>I got the image on the default overlay, but i can't add a class to it for each individual click so I can display a diff image for the iphone, ipad ect.</p>
  
  <p>Here the jquery for two to work. I can add the class to the fancybox_wrap, but i need to target the overlay above this which handles the background.</p>
  
  <pre><code>$(".fancybox-420").fancybox({
      maxWidth    : 480,
      maxHeight   : 600,
      minWidth    : 420,
      fitToView   : false,
      width       : '90%',
      height      : '90%',
      autoSize    : false,
      closeClick  : false,
      openEffect  : 'none',
      closeEffect : 'none',
      padding     : 0,
      tpl: {
                wrap: '&lt;div class="fancybox-wrap iphone_420" tabIndex="-1"&gt;&lt;div class="fancybox-skin"&gt;&lt;div class="fancybox-outer"&gt;&lt;div class="fancybox-inner"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
                next: '&lt;a title="Next" class="fancybox-nav fancybox-next"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;',
                prev: '&lt;a title="Prev" class="fancybox-nav fancybox-prev"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;'
      }
  }); 
  
  $(".fancybox-300").fancybox({
      maxWidth    : 320,
      maxHeight   : 569,
      minWidth    : 300,
      fitToView   : false,
      width       : '90%',
      height      : '90%',
      autoSize    : false,
      closeClick  : false,
      openEffect  : 'none',
      closeEffect : 'none',
      padding     : 0,
      tpl: {
                wrap: '&lt;div class="fancybox-wrap iphone_300" tabIndex="-1"&gt;&lt;div class="fancybox-skin"&gt;&lt;div class="fancybox-outer"&gt;&lt;div class="fancybox-inner"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
                next: '&lt;a title="Next" class="fancybox-nav fancybox-next"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;',
                prev: '&lt;a title="Prev" class="fancybox-nav fancybox-prev"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;'
      }
  }); 
  </code></pre>
  
  <p>I thought i would be able to add a script when clicked on, it would add a specific class to the body so i could target the fancybox_overlay layer for each diff iframe, but it breaks the fancybox script it doesnt pop up</p>
  
  <pre><code>    $(".fancybox-300").on('click', function( e ){
      e.stopPropagation();
      $(".fancybox-overlay").addClass("iphone300");
  });
  $(document).on('click', function( e ){
      if(e.target.className!="fancybox-300")
      $(".fancybox-overlay").removeClass("iphone300");
  });
  </code></pre>
  
  <p>I cant find anything similar to what i am after.</p>
  
  <p>I pretty much need to be able to add a unique class for each fancybox iframe that when clicked I can change the background for each.</p>
  
  <p>e.g .iphone .fancybox_overlay , .ipad .fancybox_overlay</p>
  
  <p>Thanks</p>