Add a download button for images in wp gallery

Hi hugodebe,
Try pasting this into a text widget within your footer (Apperance > Widgets):
<script type="text/javascript">jQuery(document).ready(function ($) {var magnificPopupEnabled = false;$.extend(true, $.magnificPopup.defaults, {disableOn: function() {return false;}});});</script>

Hannah

Hi Hannah, thanks for your reply. I added the script in footer but it doesn’t look to be running when i look in debugger. I continue to have data-rel=”lightbox” added to the link:

<a href="https://example.com/wp-content/uploads/2016/11/image.jpg" data-download="picture.jpg" class="download-image" title="Download" data-rel="lightbox"><i class="icon-download-alt"></i></a>

Could you have a quick look and try to tell me what I am missing please? I sent you a page link in a message on the Facebook Page.

This is something the developer would have more insight on. I’ll make sure he looks into this for you asap. Thanks for your patience!

Hannah

Hey,
Short answer is there isn’t but I’m going to fix that, premium has this but I just hadn’t put it in free yet so I’ll make sure that gets into the next update.

Here is a fix that should work for you right now, use the class: no-lightbox for those links.

Then in the footer in a text widget add this:

<script type="text/javascript">jQuery( window ).load(function () {
jQuery('.kad-light-wp-gallery').each(function(){
      jQuery(this).find("a[data-rel^='lightbox']:not('.no-lightbox')").magnificPopup({
        type: 'image',
        gallery: {
          enabled:true
          },
          image: {
            titleSrc: function(item) {
            return item.el.find('img').attr('alt');
            }
          }
        });
    });
});</script>

Now that should work and note that it will still add the rel-data=”lightbox” but that should make the lightbox redraw and exclude those links. When I get the theme updated just adding no-lightbox will do this and you can remove the script.

Ben
Kadence Themes

Hi Ben, Hannah, thanks a lot for the quick reply. That’s what I was looking for!

I added the class and the script Ben provided but it’s not working yet for me. I also noticed that the number of pics in the gallery lightbox has been triplicated. What am I doing wrong?

$output .= '<div class="'.esc_attr($itemsize).' g_item"><div class="grid_item kad_gallery_fade_in gallery_item"><a href="'.esc_url($attachment_url).'" '.$lightbox_data.' class="lightboxhover">';
    $output .= '<img src="'.esc_url($image[0]).'" width="'.esc_attr($image[1]).'" height="'.esc_attr($image[2]).'" alt="'.esc_attr($alt).'" '.$img_srcset_output.' class="light-dropshaddow"/>';
     $output .= '</a></div>';
//Add the buttons for lightbox and download
    $output .= '<div class="image_links double"><a href="'.esc_url($attachment_url).'" '.$lightbox_data.' itemprop="image" class="zoom-image" title="Zoom"><i class="icon-zoom-in"></i></a>';
	$output .= '<a href="'.esc_url($attachment_url).'" data-download="picture.jpg" class="no-lightbox download-image" title="Download"><i class="icon-download-alt"></i></a>';
	$output .= '</div></div>';

/wp-content/plugins/virtue-toolkit-custom/gallery.php

I sent you a frontend link again, via fb messenger.

Thanks
Hugo

Please can you post a link to your site?

And if you are going to add a link for the lightbox then you need to remove the normal lightbox link else that will cause the lightbox to think you have two different images. There should only be one lightbox link.

Ben
Kadence Themes

Hi Ben, I sent the link to the Kadence Facebook Page. Do you have access to it?

The reason I kept the normal lightbox link is for mobile compatibility. For small devices I hide both buttons and use the normal link only. I will have to think about another approach…

I removed the normal lightbox link on the image and rebuild my layout/css to display the buttons under the images on mobiles (under 767px). Images aren’t seen 3 times anymore by the lightbox, but I still have them twice as my download button link is seen as a lightbox link. I can’t find why the script sent by Ben isn’t working. Please, help!

Here is the link: combibresil.com/puma-gt-1600-bresil-1972-ref-pu04

• This reply was modified 8 years ago by hugodebe.

Hey,
It’s much much easier to do support here, I try to not do support through facebook messages. I believe we encourage anyone that posts through facebook to use the forums.

Ok great I see the issue. You have a plugin minifying your scripts. And moving when jquery loads. Minifying scripts are great but jquery has to be loaded in the header. You have 9 errors on your site from plugins trying to use jquery but it’s before jquery is being defined. So just check your minify plugin and make sure your not minifying/moving jquery.

Ben

Thanks for your reply Ben.

I had already try to disable js minifying and/or load the script in the header, without success. You can have a look to this configuration accessing the website again.

I can’t see any error anymore in the Console. Please, can you see what am I doing wrong?

Hey,
Great, yeah I now see it working just fine without errors, Maybe I was viewing an older cached version of your site when I could see that jquery wasn’t loading.

Ben

Hi Ben,

The download buttons is really not working for me, independently of the browser I use, with the cache cleaned.

When I click a download button, it opens the lightbox.

Hi Ben, did you managed to update your code with the no-lightbox class, to disable the lightbox? Please, let me know if it will come in an update of the theme or the toolkit plugin.

Otherwise, could you test again to the website? The download buttons aren’t working at all, even with the js minify disabled.

The site owner really would like this new feature to work now. He is a 2016 kadence customer as we implemented virtue premium on another project. I hope it can help you spend a bit more of time on this support request… ??

Thanks in advance.
Hugo

If your a premium customer use the premium forums. You will get a response very quickly.

The lightbox update would come through the theme.

Where are you adding the js I sent now?

Ben

I can request your help through the premium support website, but as you told before, this had already been resolved for the premium themes.

Now I’m adding the js you sent to custom.js from my child theme directory. JS minification continues disabled.

When adding the js code to a text widget into the footer area, it didn’t seems to be loading. I was able to see it in the page source but it didn’t appeared when looking through the firefox debugger. Then I had a try using the Header and Footer Scripts plugin and I was able to see the script from the debugger. If you accessed the website earlier today, your code was in the header. Now you should find it easily into custom.js