Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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 this

    http://www.mydomain.de/xyz/http%3A%2F%2Fwww.mydomain.de%2Fcontent%2Fuploads%2F2017%2F11%2FImage-705×441.jpg

    Do I have to change anything to make it work?
    And also, how can I make this change using a child theme?

    #886785

    Hey 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,
    Victoria

    #886824

    Hi,
    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 Content

    #887151

    Hi,

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

    #887273

    Thanks, 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.jpg

    How can I remove %2F in it?

    #887285

    Hi,

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

    #887294

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

    #887976

    Ahh 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);
    #892308

    Hi,

    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 you

    Happy Holidays

    Best regards,
    Basilis

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘[enfold 4.2] Masonry Gallery / Add link to download’ is closed to new replies.