How to Include Caption for Gallery Using Magnific Popup

How to include caption for gallery using magnific popup?

Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.

Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://

Solution:

You are halfway there. There are 2 parts to making the captions work.

1. You correctly have put the link in the anchor tag and not the
   image tag

2. You must specify your title source in your
   initialization script like this.

   $(document).ready(function() {
       $('.chicken').magnificPopup({ 
           type: 'image',
           gallery:{enabled:true},
           type: 'image',
           image: {
               titleSrc: 'title' 
               // this tells the script which attribute has your caption
           }
       });
   });
   

The script then automatically writes your caption to its div labeled class="mfp-title"

BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:

    titleSrc: 'title',
    titleSrc: function(item) {
        return '<a href="' + item.el.attr('href') + '">' + item.el.attr('title') + '</a>';
        }

This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section

How to include caption on web page for gallery using magnific popup?

Alright, have a look at this, I adjusted your function a bit:

$(document).ready(function() {
    $('.chicken').magnificPopup({
        type: 'image',
        gallery: {
            enabled: true
        }
    }).each(function() { // Here I chain a loop to each .chicken element
        // Now we append the title inside the .chicken element
        $(this).append('<div class="title">' + $(this).attr('title') + '</div>');
    });
});

The CSS:

.chicken {
    display: inline-block;
    width: 20%;
    margin: 10px;
}

.chicken img {
    width: 100%; /* set it to 100% of it's parents width */
    vertical-align: bottom;
}

.chicken .title {
    text-align: center;
}

and here's the DEMO.

Now you can also just add the title directly to the html like this:

<a href="http://placehold.it/350x250" title="The Title A" class="chicken">
  <img src="http://placehold.it/350x250" />
  <div class="title">The Title A</div>
</a>

Display Title and Caption for Magnific Popup

If you just don't want anything appears when hovering the image,then how about using data-attribute instead of title and caption?

$(".slider__wrapper").each(function() {  let $slider_wrapper = $(this);  let $slider = $slider_wrapper.find(".slider");  let $slider_items = $slider.find(".slider__items");  var options = {    adaptiveHeight: true,    infinite: true  }
  $slider_items.slick(options);
  $slider_items.magnificPopup({    delegate: ":not(.slick-cloned) a",    type: "image",    gallery: {      enabled: true,      tCounter: ""    },    image: {      titleSrc: function(item) {        var markup = '';        if (item.el[0].hasAttribute("data-title")) {          markup += '<h3>' + item.el.attr('data-title') + '</h3>';        }
        if (item.el[0].hasAttribute("data-caption")) {          markup += '<p>' + item.el.attr('data-caption') + '</p>';        }        return markup      }    },  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div class="slider__wrapper">  <div class="slider__wrapper__item">    <div class="slider">      <div class="slider__items">        <div class="slider__item">          <h3>Title 1</h3>          <a href='https://placeimg.com/640/480/nature' data-title="Title 1" data-caption='Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum' class="slider__item__image">
            <img src="https://placeimg.com/640/480/nature">          </a>          <p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>        </div>        <div class="slider__item">          <h3>Title 2</h3>          <a href='https://placeimg.com/640/480/people' data-title="Title 2" class="slider__item__image">
            <img src='https://placeimg.com/640/480/people'></a>        </div>      </div>    </div>  </div></div></div>

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

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="mfp-ul"> <!-- 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>

Magnific Popup: source title from span

return item.el.find('span').text();

Custom title for Magnific Popup

As per documentation titleSrc:{} should be inside image:{} and you can use item.el.parents() instead of item.el.parent().

Corrected Code

$('.container').magnificPopup({
    delegate: 'article figure a',
    type: 'image',
    gallery:{enabled:true},
    image: {
        titleSrc: function(item) {
        return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html();
        }
    }
});

---

Related Topics