How can I add a long description to Magnific Popup without using the item option?

Question

I'm trying to get Magnific Popup to work for me, and I'm having difficulty with it. I'm a little new when it comes to Javascript and JQuery. I have been looking through the documentation for several days (literally) and am looking through stackoverflow. I found a few answers, but it seems that what I want does not suit me.

What I want to do is show the gallery using thumbnails inside multiple divs that have some style. It is preferable that the long description be hidden until the gallery is opened by clicking on individual elements of the gallery. Then display a long description to the right (float on the right) mfp-imag (which I will float to the left).

HTML

<div class="fourColumns">
  <div class="fourColumnsHeader">
    Image Title<br>
    <a class="with_caption" title="This is the Caption" href="/images/image.jpg"><img src="/images/image.jpg" alt="Image" width="223" height="131"></a>
    <div>
      This is one long discription<br>
      This is some more detail...<br><br>
      - Bullet<br> <!-- This is just a placeholder for an ul -->
      - Bullet<br>
      - Bullet
    </div>
  </div>
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

I think I need something like this Javascript

<script type="text/javascript">
$('.fourColumns').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  // other options
  gallery: {enabled: true},
  image: {
  markup: '<div class="mfp-figure">'+
          '<div class="mfp-close"></div>'+
          '<div class="mfp-img"></div>'+
          '<div class="mfp-description"></div>'+
          '<div class="mfp-bottom-bar">'+
            '<div class="mfp-title"></div>'+
            '<div class="mfp-counter"></div>'+
          '</div>'+
        '</div>', // 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: '<a href="%url%">The image</a> 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.
    },     
  }

});
</script>

, . . !:)

Answer 1

, . Single image lightbox. , HTML .

HTML = "" , . , , , . div mfp, .

:

<div class="fourColumns">
  <div class="fourColumnsHeader">
    Image Title
  </div>
  <a title="This is the Caption <!-- notice this is left open -->
    <ul class=&quot;mfp-ul&quot;> <!-- if you want to use classes you have to quote this way. Other wise it will crash. -->
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    " href="/images/image.jpg"><img src="/images/image.jpg" title="Image" width="223" height="131">
  </a> <!-- Above notice the title is set for the image. This will keep you code from showing on mouse-over. -->
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

Javascript

<script type="text/javascript">
$('.fourColumns').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  // other options
  gallery: {enabled: true},
  image: {
  markup: '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+ // Floated left
            '<div class="mfp-title"></div>'+ // This is floated right shows up on the right side
            '<div class="mfp-bottom-bar">'+
              '<div class="mfp-counter"></div>'+
            '</div>'+
          '</div>', // 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: '<a href="%url%">The image</a> could not be loaded.' // Error message
  },

  preloader: true,

});
</script>

Answer 2

: http://dimsemenov.com/plugins/magnific-popup/documentation.html

image: {
  markup: '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '<div class="mfp-bottom-bar">'+
              '<div class="mfp-title"></div>'+
              '<div class="mfp-counter"></div>'+
            '</div>'+
          '</div>', // 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.

  titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
  // Or the function that should return the title. For example:
  // titleSrc: function(item) {
  //   return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
  // }

  verticalFit: true, // Fits image in area vertically

  tError: '<a href="%url%">The image</a> could not be loaded.' // Error message
}