-
AuthorPosts
-
December 9, 2017 at 10:59 am #886757
Hi,
I’ve found this post and changed the code in avia.js.
I see the download Link now, but when I click on it, the URL looks like thisDo I have to change anything to make it work?
And also, how can I make this change using a child theme?December 9, 2017 at 11:43 am #886785Hey tl_s180,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaDecember 9, 2017 at 2:13 pm #886824Hi,
at the moment the file themes/enfold/js/avia.js is modified but the download link doesn’t work and I’d prefer to have the modification in my child theme.
Access data is in Private ContentDecember 10, 2017 at 10:41 pm #887151Hi,
Create a js folder then place a avia.js file inside. Add this on the child theme’s functions.php:
function wp_change_aviajs() { wp_dequeue_script( 'avia-default' ); wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true ); } add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );
Best regards,
BasilisDecember 11, 2017 at 10:52 am #887273Thanks, it works. Modified avia.js is placed in child theme now and I see see download link.
In enfold-child/js/avia.js .. do I have to use the whole avia.js code, or can I remove everything except the section about // Ligthbox activation?
The download Link is displayed but there’s some error in the URL.
This Code
return '<a href = "'+encodeURIComponent(item.el.find("img").attr("src"))+'">Download</a>';
returns the URL like this http://www.mydomain.de/xyz/http%3A%2F%2Fwww.mydomain.de%2Fcontent%2Fuploads%2F2017%2F11%2FImage-705×441.jpgHow can I remove %2F in it?
December 11, 2017 at 11:20 am #887285Hi,
You need to add the whole avia.js code with the modifications (also take note of the modifications if ever there’s update on avia.js you can always update the code). Where does %2F appear? I tried to check on your site (link in private content), and clicked on the images and it works fine even if I open in new tab (2nd link in private content).
Best regards,
NikkoDecember 11, 2017 at 11:43 am #887294If I open the first image in Lightbox and hover over Download, the URL displayed in the bottom left corner of the browser contains %2F
See screenshot in private contentDecember 12, 2017 at 3:54 pm #887976Ahh im removed encodeURIComponent
This code outputs a working URL now
return '<a href = "'+item.el.find("img").attr("src")+'">Download</a>';
Next problem. The Download link opens the image in the browser instead of downloading it directly.
And it uses the “large” image instead of the original sized one.
I’ll try to modify the lightbox function to have a download link witch directly downloads the original version of the image.
If someone can give me a hint how to do that ..// ------------------------------------------------------------------------------------------- // Ligthbox activation // ------------------------------------------------------------------------------------------- (function($) { $.fn.avia_activate_lightbox = function(variables) { var defaults = { groups : ['.avia-slideshow', '.avia-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu'], autolinkElements: 'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]', videoElements : 'a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]', exclude : '.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"]', }, options = $.extend({}, defaults, variables), av_popup = { type: 'image', mainClass: 'avia-popup mfp-zoom-in', tLoading: '', tClose: '', removalDelay: 300, //delay removal by X to allow out-animation closeBtnInside: true, closeOnContentClick:false, midClick: true, fixedContentPos: false, // allows scrolling when lightbox is open but also removes any jumping because of scrollbar removal image: { titleSrc: function(item){ var title = item.el.attr('title'); if(!title) title = item.el.find('img').attr('title'); if(!title) title = item.el.parent().next('.wp-caption-text').html(); if(typeof title == "undefined") return ""; //return title; return '<a href = "'+item.el.find("img").attr("src")+'">Download</a>'; } }, gallery: { // delegate: options.autolinkElements, tPrev: '', tNext: '', tCounter: '%curr% / %total%', enabled: true, preload: [1,1] // Will preload 1 - before current, and 1 after the current image }, callbacks: { beforeOpen: function() { //add custom css class for different styling if( this.st.el && this.st.el.data('fixed-content') ) { this.fixedContentPos = true; } }, open: function() { //overwrite default prev + next function. Add timeout for crossfade animation $.magnificPopup.instance.next = function() { var self = this; self.wrap.removeClass('mfp-image-loaded'); setTimeout(function() { $.magnificPopup.proto.next.call(self); }, 120); } $.magnificPopup.instance.prev = function() { var self = this; self.wrap.removeClass('mfp-image-loaded'); setTimeout(function() { $.magnificPopup.proto.prev.call(self); }, 120); } //add custom css class for different styling if( this.st.el && this.st.el.data('av-extra-class') ) { this.wrap.addClass( this.currItem.el.data('av-extra-class') ); } }, imageLoadComplete: function() { var self = this; setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16); }, change: function() { if( this.currItem.el ) { var current = this.currItem.el; this.content.find( '.av-extra-modal-content, .av-extra-modal-markup' ).remove(); if( current.data('av-extra-content') ) { var extra = current.data('av-extra-content'); this.content.append( "<div class='av-extra-modal-content'>" + extra + "</div>" ); } if( current.data('av-extra-markup') ) { var markup = current.data('av-extra-markup'); this.wrap.append( "<div class='av-extra-modal-markup'>" + markup + "</div>" ); } } }, } }, active = !$('html').is('.av-custom-lightbox'); if(!active) return this; return this.each(function() { var container = $(this), videos = $(options.videoElements, this).not(options.exclude).addClass('mfp-iframe'), /*necessary class for the correct lightbox markup*/ ajaxed = !container.is('body') && !container.is('.ajax_slide'); for (var i = 0; i < options.groups.length; i++) { container.find(options.groups[i]).each(function() { var links = $(options.autolinkElements, this); if(ajaxed) links.removeClass('lightbox-added'); links.not(options.exclude).addClass('lightbox-added').magnificPopup(av_popup); }); } }); } })(jQuery);
December 28, 2017 at 11:21 pm #892308Hi,
I am sorry we took that much time, but seems that it goes outside of what our support can do.
However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for youHappy Holidays
Best regards,
Basilis -
AuthorPosts
- The topic ‘[enfold 4.2] Masonry Gallery / Add link to download’ is closed to new replies.