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

Question

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.

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).

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>

I hope that was thorough enough. Any assistance would be greatly appreciated. Thank you! :)

Solution 1

So I came up with my own solution. Looking at the main page for Magnific Popup I noticed the example Single image lightbox. I noticed that the caption can contain HTML and can be moved around.

So I put the HTML in my title="" in the link as pictured below. If you don't want this to show up when you mouse over you have to put a title on your image. I also moved the title div in mfp as seen below.

Here is the code:

<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>

Solution 2

Another way from the documentation : 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
}

Comments

[morgs32]

hi @serverjohn, is this live? I'd love to get a closer look at how you pulled this off. thanks for sharing this!

[serverjohn]

@morgs32 Wow I just saw this over 2 years later. That is pretty terrible! Yes this is still live at iverticle.com/pos/. I am sure you have this figured out already but maybe someone else can have a look too. :-)