title: How could I add a long description to Magnific Popup without using item option?
body: <p>I am trying to get Magnific Popup to work for me and I having difficulty with it. I am somewhat of a novice when it comes to Javascript and Jquery. I have been going through the documentation for days(literally) and searching stackoverflow. I have found some answers out there but it doesn't seem to fit what I want.</p>
  
  <p>What I want to be able to do is have a gallery displayed via thumbnails inside multiple div's that have some styling. Preferably I would like the long description to be hidden until the gallery is open by clicking on the individual gallery items. Then display the long description to the right(float right) of the mfp-imag(which I will float left).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="fourColumns"&gt;
    &lt;div class="fourColumnsHeader"&gt;
      Image Title&lt;br&gt;
      &lt;a class="with_caption" title="This is the Caption" href="/images/image.jpg"&gt;&lt;img src="/images/image.jpg" alt="Image" width="223" height="131"&gt;&lt;/a&gt;
      &lt;div&gt;
        This is one long discription&lt;br&gt;
        This is some more detail...&lt;br&gt;&lt;br&gt;
        - Bullet&lt;br&gt; &lt;!-- This is just a placeholder for an ul --&gt;
        - Bullet&lt;br&gt;
        - Bullet
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="fourColumns"&gt;
    ...
  &lt;/div&gt;
  
  &lt;div class="fourColumns"&gt;
    ...
  &lt;/div&gt;
  
  &lt;div class="fourColumns"&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I think I need something like this
  Javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.fourColumns').magnificPopup({
    delegate: 'a', // child items selector, by clicking on it popup will open
    type: 'image',
    // other options
    gallery: {enabled: true},
    image: {
    markup: '&lt;div class="mfp-figure"&gt;'+
            '&lt;div class="mfp-close"&gt;&lt;/div&gt;'+
            '&lt;div class="mfp-img"&gt;&lt;/div&gt;'+
            '&lt;div class="mfp-description"&gt;&lt;/div&gt;'+
            '&lt;div class="mfp-bottom-bar"&gt;'+
              '&lt;div class="mfp-title"&gt;&lt;/div&gt;'+
              '&lt;div class="mfp-counter"&gt;&lt;/div&gt;'+
            '&lt;/div&gt;'+
          '&lt;/div&gt;', // Popup HTML markup. `.mfp-img` div will be replaced with img tag,  `.mfp-close` by close button
  
    cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to   null to disable zoom out cursor. 
  
    tError: '&lt;a href="%url%"&gt;The image&lt;/a&gt; could not be loaded.' // Error message
    },
  
    preloader: true,
    callbacks: {
      elementParse: function(item) {
      // Function will fire for each target element
      // "item.el" is a target DOM element (if present)
      // "item.src" is a source that you may modify
          // store the text in imgCaption variable, - if you will need this later on
          var imgCaption =  item.el.find('p');                    // This is wrong.
          // append the text to the element     
          item.content.find('.mfp-description').html(imgCaption); // This is wrong.
      },     
    }
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I hope that was thorough enough. Any assistance would be greatly appreciated. Thank you! :)</p>