This topic contains 1 reply, has 2 voices, and was last updated by  Kharis Sulistiyono 2 years, 12 months ago.

Showing gallery photo description in the big photo

  • Hey team, I was curious if you could help me with a solution to have the gallery image title and description show up on the big photo rather than than the thumbnail?

    The poor descriptions do not completely show on the thumbnails.

    Hello there,

    Thank you for getting in touch.

    My apologize for delayed respond.

    In order to achieve that objective, could you please try to do the following?

    1. Open js/custom.js file, then find the following code block

    $('.popup-with-move-anim').magnificPopup({
    	type: 'image',
    
    	fixedContentPos: false,
    	fixedBgPos: true,
    
    	overflowY: 'auto',
    
    	closeBtnInside: true,
    	preloader: false,
    
    	midClick: true,
    	removalDelay: 400,
    	mainClass: 'my-mfp-slide-bottom'
    });
    

    replace it to

    $('.popup-with-move-anim').magnificPopup({
      type: 'image',
    
      fixedContentPos: false,
      fixedBgPos: true,
    
      overflowY: 'auto',
    
      closeBtnInside: true,
      preloader: false,
    
      midClick: true,
      removalDelay: 400,
      mainClass: 'my-mfp-slide-bottom',
      image  : {
        markup: '<div class="mfp-figure">'+
              '<div class="mfp-close"></div>'+
              '<figure>'+
                '<div class="mfp-img"></div>'+
                '<figcaption>'+
                  '<div class="caption-content">'+
                  '</div>'+
                '</figcaption>'+
              '</figure>'+
            '</div>'
      },
      callbacks : {
        markupParse: function(template, values, item) {
          var title_arr = values.title.split('|');
          var caption_content = '<h3>'+title_arr[0]+'</h3>'+
                                '<p>'+title_arr[1]+'</p>';
          template.find('.caption-content').html(caption_content);
        }
      },
    
    });
    

    2. Open gallery markup which resides in gallery.html (default package). Then find popup (big photo) link.

    < a href="img/gallery/900x600.png" class="popup-with-move-anim" >
    
    

    3. In order to insert title and description which will be displayed on popup (big view), do the following

    < a title="This is the title | This is the description." href="img/gallery/900x600.png" class="popup-with-move-anim" >
    

    Title and description are stored in title attribute; They are separated with “|”.

    4. Add the following CSS code into css/style.css

    .caption-content{
      display: block;
      width: 100%;
      position: absolute;
      top: auto;
      bottom: 40px;
      padding-left: 10px;
      padding-right: 10px; 
      padding-bottom: 10px;
      background: rgba(0, 0, 0, .3);
      color: #fff;
    }
    

    5. You are done.

    If everything goes right, you should have something like enclosed attachment.

    I hope this reply helps.

    I’ll wait to hear back from you regarding your stats.

    Regards,
    Kharis

    Attachments:
    You must be logged in to view attached files.

The topic ‘Showing gallery photo description in the big photo’ is closed to new replies.