title: Fancybox in React
body: <p>I'm trying to include fancyBox in my React application.
  I included the css and js in my index.html file</p>
  <pre><code>&lt;script src=&quot;//code.jquery.com/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;link href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; id=&quot;bootstrap-css&quot;&gt;
  &lt;script src=&quot;//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css&quot; media=&quot;screen&quot;&gt;
  &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Then, in my component I try to use it:</p>
  <pre><code>...
  
  import &quot;datatables.net-dt/js/dataTables.dataTables&quot;
  import &quot;datatables.net-dt/css/jquery.dataTables.min.css&quot;
  
  const $ = require(&quot;jquery&quot;);
  $.DataTable = require(&quot;datatables.net&quot;);
  ...
  
  
  componentDidMount = async () =&gt; {
       $(() =&gt; {
           $('#myTable').DataTable({
               pageLength : 5,
               lengthMenu: [[5, 10, 50, -1], [5, 10, 50, 'All']]
           });
              
           $(&quot;.fancybox&quot;).fancybox({
               openEffect: &quot;none&quot;,
               closeEffect: &quot;none&quot;
           });  
       });
  }
  
  ...
  
  render() {
     ...
  
     &lt;div className=&quot;col-lg-3 col-md-4 col-xs-6 thumb&quot;&gt;
      &lt;a href=&quot;https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940&quot; className=&quot;fancybox&quot; rel=&quot;ligthbox&quot;&gt;
        &lt;img src=&quot;https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940&quot; className=&quot;zoom img-fluid &quot; alt /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    ...
  </code></pre>
  <p>It is returning:
  <code>TypeError: $(...).fancybox is not a function</code></p>