title: Dynamic Link in Fancy box jQuery for wordpress images
body: <p>I am designing a website in Wordpress.</p>
  
  <p>I need help in Fancybox. I am using fancy box with elevate zoom. When we hover on the image, it gives a zoom in effect as in ecoomerce websites and when I click on it, a fancybox opens up with the bigger size image. </p>
  
  <p>Now I want to add a link on this fancybox pop up window which will take the user to the dedicated page for that product. But I am not sure how to add a dynamic link in jQuery.</p>
  
  <p>here is the snippet from fancybox jquery</p>
  
  <pre><code>        // HTML templates
  
          tpl: {
              wrap     : '&lt;div class="fancybox-wrap" 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;',
              image    : '&lt;img class="fancybox-image" src="{href}" alt="" /&gt;&lt;div class="fancybox-caption"&gt;&lt;a href="**?page_id=**"&gt;Click here to view the details&lt;/a&gt;&lt;/div&gt;',
              iframe   : '&lt;iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '&gt;&lt;/iframe&gt;',
              error    : '&lt;p class="fancybox-error"&gt;The requested content cannot be loaded.&lt;br/&gt;Please try again later.&lt;/p&gt;',
              closeBtn : '&lt;a title="Close" class="fancybox-item fancybox-close" href="javascript:;"&gt;&lt;/a&gt;',
              next     : '&lt;a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;',
              prev     : '&lt;a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;'
          },
  </code></pre>
  
  <p>Thanks in Advance</p>
  
  <p>Disha</p>