title: Add a javascript for posts
body: <p>I dont know anything about Javascript. I'm using Ignite theme in Wordpress. I tried to add a lightbox gallery in my site:
  <a href="http://dimsemenov.com/plugins/magnific-popup/" rel="nofollow">http://dimsemenov.com/plugins/magnific-popup/</a>   > the "Zoom-gallery" example</p>
  
  <p>So I put the html code in the post, the CSS in style.css, but I dont know where I have to put the javascript. I tried to past it (between script tags) inside the content-page.php, content.php, header.php, or footer.php but it didn't work.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="zoom-gallery"&gt;
      &lt;a href="http://farm4.staticflickr.com/3763/9204547649_0472680945_o.jpg" data-source="http://500px.com/photo/32736307" title="Into The Blue" style="width:193px;height:125px;"&gt;
          &lt;img src="http://farm4.staticflickr.com/3763/9204547649_7de96ee188_t.jpg" width="193" height="125"&gt;
      &lt;/a&gt;
      &lt;a href="http://farm3.staticflickr.com/2856/9207329420_7f2a668b06_o.jpg" data-source="http://500px.com/photo/32554131" title="Light Sabre" style="width:82px;height:125px;"&gt;
          &lt;img src="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" width="82px" height="125"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.image-source-link {
      color: #98C3D1;
  }
  
  .mfp-with-zoom .mfp-container,
  .mfp-with-zoom.mfp-bg {
      opacity: 0;
      -webkit-backface-visibility: hidden;
      -webkit-transition: all 0.3s ease-out; 
      -moz-transition: all 0.3s ease-out; 
      -o-transition: all 0.3s ease-out; 
      transition: all 0.3s ease-out;
  }
  
  .mfp-with-zoom.mfp-ready .mfp-container {
          opacity: 1;
  }
  .mfp-with-zoom.mfp-ready.mfp-bg {
          opacity: 0.8;
  }
  
  .mfp-with-zoom.mfp-removing .mfp-container, 
  .mfp-with-zoom.mfp-removing.mfp-bg {
      opacity: 0;
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('.zoom-gallery').magnificPopup({
          delegate: 'a',
          type: 'image',
          closeOnContentClick: false,
          closeBtnInside: false,
          mainClass: 'mfp-with-zoom mfp-img-mobile',
          image: {
              verticalFit: true,
              titleSrc: function(item) {
                  return item.el.attr('title') + ' &amp;middot; &lt;a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank"&gt;image source&lt;/a&gt;';
              }
          },
          gallery: {
              enabled: true
          },
          zoom: {
              enabled: true,
              duration: 300, // don't foget to change the duration also in CSS
              opener: function(element) {
                  return element.find('img');
              }
          }
  
      });
  });
  </code></pre>