title: FancyBox 3.5.7 - Can't Get Any Options to Work
body: <p>I have just downloaded Fancybox v3.5.7.
  I am unable to get it to accept any options.
  I get the icons, but no options I selct work.
  Some examples... I can't get transitionEffect to work, nor fullScreen, nor animationEffect, nor right-click protection.</p>
  <p>I have used the jquery and css on the cdn.jsdeliver.net site, so I know there can't be a problem with any of that. I have tried placing it in the head section and body section, without sucess.</p>
  <p>I have tested on a few browsers, both from just computer, and also uploaded to the server.</p>
  <p>I also tried just the basic starting code as provided indocumentation without any options...</p>
  <pre><code>&lt;script&gt;
  $('[data-fancybox=&quot;Test-1&quot;]').fancybox({
  // Options will go here
  });
  &lt;/script&gt;
  
  </code></pre>
  <p>I created a basic html page (with utf8), with no other jquery, so there is nothing that may conflict with fancybox...</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;meta name=&quot;SKYPE_TOOLBAR&quot; content=&quot;SKYPE_TOOLBAR_PARSER_COMPATIBLE&quot; /&gt;
  &lt;meta name=&quot;MSSmartTagsPreventParsing&quot; content=&quot;true&quot;&gt;
  &lt;meta name=&quot;robots&quot; content=&quot;noodp&quot;&gt;
  &lt;meta name=&quot;robots&quot; content=&quot;NOindex,NOfollow&quot;&gt;
  
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css&quot; /&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  </code></pre>
  <p>And on the body of the page is the test gallery, sample code is...</p>
  <pre><code>  &lt;a data-fancybox=&quot;Test-1&quot; href=&quot;https://source.unsplash.com/juHayWuaaoQ/&quot;
    data-caption=&quot;Backpackers following a dirt trail&quot;&gt;
    &lt;img src=&quot;https://source.unsplash.com/juHayWuaaoQ/240x160&quot; /&gt;
    &lt;/a&gt;
  
  </code></pre>
  <p>So I wonder that the call and options are not coded correctly.
  I have tried it in both the head section and the body section without success.
  And I have tried various ways of editing the script code (I made comments there for reference)...</p>
  <pre><code>&lt;script&gt;
  $('[data-fancybox=&quot;Test-1&quot;]').fancybox({
  
  // Options will go here
    thumbs : { autoStart:true },
    toolbar: &quot;auto&quot;,
    arrows: true,
    infobar: true,
    smallBtn: &quot;auto&quot;,
    preventCaptionOverlap: true,// DOESN'T WORK!!!
    arrows: true,
    infobar: true,
    smallBtn: &quot;auto&quot;,
    protect: true,
    animationEffect: &quot;zoom-in-out&quot;,// DOESN'T WORK!!!        // other options: &quot;zoom&quot;  &quot;fade&quot;  &quot;zoom-in-out&quot;  
    zoomOpacity: &quot;auto&quot;,
    transitionEffect: &quot;rotate&quot;, //DOESN'T WORK!!!            // other options: false &quot;fade' &quot;slide' &quot;circular' &quot;tube' &quot;zoom-in-out' &quot;rotate'
    spinnerTpl: '&lt;div class=&quot;fancybox-loading&quot;&gt;&lt;/div&gt;',
    fullScreen: { autoStart:true }, //// DOESN'T WORK!!!     // I think this is for the large image to fill whole screen. doesn't work
  });
  
  //STAND-ALONE VAR DEFAULTS VERSION (apart from the call code) -DOESN'T WORK EITHER!!!
  //tried in both head section and body
  var defaults = {
    transitionEffect: &quot;rotate&quot;,
    closeExisting: false,
    toolbar: &quot;auto&quot;,
    arrows: true,
    infobar: true,
    smallBtn: &quot;auto&quot;,
      protect: true
  };
  
  // THIS DOESN'T WORK EITHER. WITH OR WITHOUT MY SPECIAL Test-1 !!!
  $('[data-fancybox=&quot;Test-1&quot;]').fancybox({ 
      protect: true
  });
  &lt;/script&gt;
  </code></pre>
  <p>Basically, I want certain options per gallery, so using the script tags and adding the various options of my choice is important and that is the part that seems to fail me.</p>
  <p>Can anyone check out the codes provided above to see where I may have gone wrong?</p>
  <p>If I can get this going, then other options I want to add will be easy for me.</p>
  <p>Gallery name is Test 1 and it is referenced in both the script below and in the href tag in the body:  data-fancybox=&quot;Test-1&quot;</p>
  <p>Thanks in advance.</p>