title: Uncaught TypeError: $(...).fancybox is not a function
body: <p>HTML</p>
  
  <pre><code>&lt;div class="test"&gt;
  &lt;a href="/example/123.html" class="fancybox"&gt; link 1&lt;/a&gt;
  &lt;a href="/example/123.html" class="fancybox"&gt; link 1&lt;/a&gt;
  &lt;a href="/example/123.html" class="fancybox"&gt; link 1&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery - updated</p>
  
  <pre><code>$('.fancybox').each(function(){
              $(this).fancybox({
                  type: 'ajax',
                  autoHeight: true,
                  width: 930,
                  autoSize: false,
                  autoCenter: true,
                  fitToView: false,
                  topRatio: 0,
                  arrows: false,
                  closeBtn: true,
                  closeClick: true,
                  autoPlay: false,
                  openSpeed: 1,
                  closeSpeed: 'fast',
                  closeClick: false,
                  live: true,
                  helpers: {
                      overlay: {
                          openSpeed: 'fast'
                      }
                  }
              });
          });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hgmd6q1q/1/" rel="nofollow">Jsfiddle demo</a></p>
  
  <p>Attempted with only</p>
  
  <pre><code>$('.fancybox').fancybox();
  </code></pre>
  
  <p>The first clicked link will open <code>fancybox</code>. Then the next clicked link will not open <code>fancybox</code> and just show blank overlay. </p>
  
  <p>Noticed that if with <code>parent.location.reload(true);</code>, it worked by refreshing whole page and then show <code>fancybox</code>. That is not what I wanted. It should work every time click on different links and show <code>fancybox</code> without refresh. </p>
  
  <p>Thought with ajax that it could get href to process and then show <code>fancybox</code> but it does not work :( </p>
  
  <p>Another thing is that <code>Fancybox</code> seemed to be initialized more than once. How to prevent it from being initialized more than once?</p>
  
  <p>Got error: `Uncaught TypeError: $(...).fancybox is not a function</p>
  
  <p>Is there any way to make <code>fancybox</code> work without having to refresh page everytime click on link?</p>
  
  <p><strong>Updated</strong></p>
  
  <p>I edited the code above and it is still giving me trouble.</p>