-
AuthorPosts
-
October 28, 2022 at 1:22 pm #1370555
Hello, I’m trying to make the following solution work, but unfortunately it seems it’s not working anymore.
https://kriesi.at/support/topic/code-snippet-inline-post-content-popup-magnific-popup-shortcode/I’m able to open a page inside a lightbox by adding ?iframe=true at the end of a custom link, but there are are 2 problems :
– it’s not smooth and very long to load this way (several seconds before showing the content inside the lightbox)
– the content is showed but with the header and footer. I could setup the target page to not show the header and footer, but then it’s becoming a problem for SEO, as I want the content of the page to be crawled by search engines, and so if someone finds it and goes to the page he won’t see the navigtion and footer…The final objective is to be able to open portoflio items content inside a fullscreen lightbox instead of loading another page (the ajax portfolio functionnality doesn’t open in fullscreen unfortunately)
I hope I’m clear enough in my explanations. Could you please give me the updated best practice to achieve this?
- This topic was modified 2 years, 1 month ago by maxgorelkine.
October 28, 2022 at 10:03 pm #1370608if you are referring to those older articles – you should know that some commands on jQuery are deprecated.
so have a look to f.e.
jQuery(window).load(function( ){ // it is now: jQuery(window).on('load', function( ){
same with :
element.on('click', function( ){
October 29, 2022 at 10:16 am #1370616Hello, thanks for you input, unfortunately after applying changes it still doesn’t work…
October 29, 2022 at 12:28 pm #1370627can you post your inline popup snippet here ( please use the code tag – to better inspect the code) ?
besides that – your suggestion to solve the problem with inline popup – seems to be misleading.
What do you think you’re going to accomplish by having a page/portfolio page that exists on your website run in a lightbox? As you already mentioned, it would be better for SEO reasons to simply call the page normally. – Or are they external pages?November 1, 2022 at 3:10 pm #1370916/*------------------------------------------------------------------------------- ENFOLD INLINE POP-UP ENABLER -------------------------------------------------------------------------------*/ function inline_popup_enabler(){ ?> <script> /*! * JavaScript Cookie v2.2.0 * https://github.com/js-cookie/js-cookie * * Copyright 2006, 2015 Klaus Hartl & Fagner Brack * Released under the MIT license */ !function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}return function n(t){function o(n,r,i){if("undefined"!=typeof document){if(arguments.length>1){"number"==typeof(i=e({path:"/"},o.defaults,i)).expires&&(i.expires=new Date(1*new Date+864e5*i.expires)),i.expires=i.expires?i.expires.toUTCString():"";try{var c=JSON.stringify(r);/^[\{\[]/.test(c)&&(r=c)}catch(e){}r=t.write?t.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var f="";for(var a in i)i[a]&&(f+="; "+a,!0!==i[a]&&(f+="="+i[a].split(";")[0]));return document.cookie=n+"="+r+f}for(var p={},u=function(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)},s=document.cookie?document.cookie.split("; "):[],d=0;d<s.length;d++){var l=s[d].split("="),C=l.slice(1).join("=");this.json||'"'!==C.charAt(0)||(C=C.slice(1,-1));try{var g=u(l[0]);if(C=(t.read||t)(C,g)||u(C),this.json)try{C=JSON.parse(C)}catch(e){}if(p[g]=C,n===g)break}catch(e){}}return n?p[n]:p}}return o.set=o,o.get=function(e){return o.call(o,e)},o.getJSON=function(){return o.apply({json:!0},arguments)},o.remove=function(n,t){o(n,"",e(t,{expires:-1}))},o.defaults={},o.withConverter=n,o}(function(){})}); (function($){ $( document ).ready( function(){ $( document ).on('ready' function(){ var popup_link = $('.inline_popup'); var delay = popup_link.data( 'delay'); var cookieName = 'MfpHasDisplayedPopup'; $('.inline_popup').magnificPopup({ type:'inline', midClick: true }); if( typeof Cookies.get( cookieName ) === 'undefined' && typeof delay !== 'undefined' ){ setTimeout( function(){ Cookies.set( cookieName , '1' ); $('.inline_popup').magnificPopup('open'); }, parseInt( delay ) * 1000 ) } } ); })(jQuery); </script> <?php } add_action('wp_footer', 'inline_popup_enabler'); /*------------------------------------------------------------------------------- ENFOLD SHORTCODE - INLINE POST CONTENT POP-UP [mfp_post_popup post_slug_id="" popup_id="" link_text="" custom_class="" popup_delay=""] -------------------------------------------------------------------------------*/ function mfp_post_popup_shortcode( $atts ){ //default values $atts = shortcode_atts( [ 'post_slug_id' => '', 'popup_id' => '', 'link_text' => 'hello', 'mfp_hide' => 'mfp-hide', 'custom_class' => 'mfp_popup_content', 'popup_delay' => false, ], $atts ); //get post content $pop_slug = get_post( $atts['post_slug_id'] ); $content = apply_filters( 'the_content', $pop_slug->post_content ); //output post content into the footer before the closing body tag - content is hidden add_action('wp_footer', function() use( $content, $atts ) { echo sprintf( '<div id="%s" class="%s %s main_color">%s</div>', $atts['popup_id'], $atts['mfp_hide'], $atts['custom_class'], $content ); }); //output popup link return sprintf( '<a class="inline_popup" %s href="#%s">%s</a>', ( $atts['popup_delay'] ) ? 'data-delay="' . esc_attr( $atts['popup_delay'] ) . '"' : '' , $atts['popup_id'], $atts['link_text'] ); } add_shortcode( 'mfp_post_popup', 'mfp_post_popup_shortcode' );
November 3, 2022 at 12:10 pm #1371213Hi,
This is the link to the GitHub Gist: WordPress-Kriesi-Enfold-Page-Pop-Up, a user HuxburyQuinn created this, this is not an Enfold function.
But I see that your main concern is the load time of the iframe, you will have the same issue when you try to show a page in a lightbox, this delay is the time it takes for your server to serve the page. Another issue would be showing an entire page in a lightbox because a lightbox is small and showing the header and footer again seems to take valuable space, I believe it is better to only show specific content instead of the whole page.
If you want to show content in a lightbox the best option is to hide the content on your page and then show it in a lightbox, this will be very fast.
Please see this example, or this exampleBest regards,
MikeNovember 5, 2022 at 4:36 pm #1371455as you said that ?iframe=true works – why don’t you use that to establish a f.e. button to open that page in an iframe.
Buttons do have a drop down to choose the post/page they will open.
If you gave to the button a custom-class f.e. iframe-openfunction button_opens_iframe() { ?> <script type="text/javascript"> (function($){ window.addEventListener("DOMContentLoaded", function () { $('.iframe-open a').each(function() { var Link = $(this).attr('href').replace(/\/$/, ''); $(this).attr('href', Link + '?iframe=true'); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'button_opens_iframe');
I can’t say that this takes very long, – but what remains is that the complete page – and not only the content is shown – but you should be able to do that with css.
November 5, 2022 at 6:04 pm #1371459if you use the ajax option on magnific popup – it is possible to filter DOM Content shown in lightbox – but some events of the source page/post are not transfered on that.
f.e.: a custom class to a button as described above: ajax-popup-link
function ajax_popup_posts() { ?> <script type="text/javascript"> (function($){ $(window).on('load', function () { $('.ajax-popup-link').find('a').addClass('no-scroll'); $('.ajax-popup-link a').magnificPopup({ type:'ajax', ajax: { settings: { url: $( this ).attr( 'href' ), type: 'POST' } }, callbacks: { parseAjax: function(mfpResponse) { mfpResponse.data = $(mfpResponse.data).find('#main'); }, } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ajax_popup_posts', 9999);
see example page above – but then the toggler f.e. will not work – filtering will work – only #main container goes to the lightbox.
November 5, 2022 at 6:54 pm #1371471here is – i think the best solution – with iframe :
(by using custom-class: iframe-popup-link )function iframe_popup_posts() { ?> <script type="text/javascript"> (function($){ $(window).on('load', function () { if (top === self) { } else { $('#header, #footer, #socket, .sidebar').hide(); $('#main').css('padding-top', '0'); $('.container .av-content-small').css('width', '100%'); $('.content').css('border-right', 'none'); }; $('.iframe-popup-link').find('a').addClass('no-scroll'); $('.iframe-popup-link a').magnificPopup({ type:'iframe', closeOnContentClick: false, }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'iframe_popup_posts', 999);
see again right side button: https://enfold.webers-webdesign.de/popup-posts/
November 8, 2022 at 6:31 pm #1371789Thanks you very much Guenni007 for your precious help !
You are right, the iframe popup link which allows to hide the header and footer ONLY in the lightbox but not on the single page seems to be the best one!
I will try to implement it and tell you how it’s going.
Thanks again very much ! -
AuthorPosts
- You must be logged in to reply to this topic.