Viewing 5 posts - 1 through 5 (of 5 total)
-
Posts
-
Hi,
I have, on a website, some content that id loaded by ajax in a magnific popup (to be more specific, it is a custom post type in a content masonry). I would like to have the option to have a content slider in there, but even though all the html markup is loaded, the slider itself doesn’t work ; the picture are not visible, not are the arrows, etc. But it works fine when viewing the post through ‘normal’ loading.
Other clue : the arrow links do not have an event associated with them. So Ì suspect that when the post is loaded by ajax, the js that make the slider work is not loaded.
Is there a way to accompish this ?Here is ma ajax call code :
function popup_post_inline_with_no_scroll() { ?> <script> (function($) { $(document).on('click', '.type-oeuvre', function() { if($(this).hasClass('navigation-link')) {var currentmasonryoeuvre = $('#'+$(this).attr('data-linkcurrentmasonryid')).find('#'+ $(this).attr('data-linkcurrentmasonryid') + '-item-' + $(this).attr('data-av-masonry-item'));} else {var currentmasonryoeuvre = $(this);} var currentmasonryid = currentmasonryoeuvre.parents('.av-masonry').attr('id'); var currentoeuvreid = currentmasonryoeuvre.attr('data-av-masonry-item'); var previousoeuvre = currentmasonryoeuvre.prevAll('.type-oeuvre:not([style*="display: none"])').eq(0); if (previousoeuvre.length != 0) {var previousoeuvreid = previousoeuvre.attr('data-av-masonry-item');} else {var previousoeuvreid = '';} var nextoeuvre = currentmasonryoeuvre.nextAll('.type-oeuvre:not([style*="display: none"])').eq(0); if (nextoeuvre.length != 0) {var nextoeuvreid = nextoeuvre.attr('data-av-masonry-item');} else {var nextoeuvreid = '';} console.log(currentmasonryid); console.log(previousoeuvre); console.log(previousoeuvreid); console.log(nextoeuvre); console.log(nextoeuvreid); console.log(currentoeuvreid); $.ajax({ url: '<?php echo admin_url('admin-ajax.php'); ?>', method: 'POST', dataType: 'json', data: { action: 'fetch_oeuvre_content', masonry : currentmasonryid, poeuvre : previousoeuvreid, oeuvre: currentoeuvreid, noeuvre : nextoeuvreid, nonce: '<?php echo wp_create_nonce('ajax_nonce'); ?>' }, success: function(response) { $.magnificPopup.open({ items: { src: response.content, type:'inline', midClick: true, showCloseBtn: true, callbacks: { beforeOpen: function () { $('body').css("overflow-y", "hidden"); }, close: function() { $('body').css("overflow-y", "auto"); }, }, } }); } }); }); })(jQuery); </script> <?php } add_action("wp_head", "popup_post_inline_with_no_scroll");I have read that magnific popup has a callback for that purpose, like so :
ajaxContentAdded: function() { jQuery('.bxslider').bxSlider(); },(I found that on the web, for another slider that had the same issue). Could that be a way to make it work ? I would really like to use the content slider.
Best
For your information, here is the code for the content fetching :
function fetch_oeuvre_content() { // Check nonce for security check_ajax_referer('ajax_nonce', 'nonce'); $oeuvreId = sanitize_text_field($_POST['oeuvre']); $previousoeuvreId = sanitize_text_field($_POST['poeuvre']); $nextoeuvreId = sanitize_text_field($_POST['noeuvre']); $masonryId = sanitize_text_field($_POST['masonry']); $post = get_post($oeuvreId); if (!empty($post)) { $post_id = $post->ID; $content = do_shortcode("[jmpeynetoeuvre pid='".$post_id."' previous_id='".$previousoeuvreId."' next_id='".$nextoeuvreId."' masonry_id='".$masonryId."']"); // Get the content and apply content filters // Prepare and send JSON response wp_send_json(array( 'content' => $content )); } else { echo 'Definition not found.'; } wp_die(); // This is required to terminate immediately and return a proper response } add_action('wp_ajax_fetch_oeuvre_content', 'fetch_oeuvre_content'); add_action('wp_ajax_nopriv_fetch_oeuvre_content', 'fetch_oeuvre_content');And the shortcode that is used :
function shortcode_jmpeynetoeuvre( $atts ){ global $post; $post_id = $post->ID; $atts = shortcode_atts( [ 'pid' => $post_id, 'previous_id' => '', 'next_id' => '', 'masonry_id' => '', ], $atts ); $pid = $atts['pid']; $previousid = $atts['previous_id']; $nextid = $atts['next_id']; $masonryid = $atts['masonry_id']; $classpopup = ''; $classpopupbonus = ''; $oeuvretitle = get_the_title($pid); if (get_the_post_thumbnail_url($pid, "full")) {$oeuvreimagethumb = get_the_post_thumbnail_url($pid, "full");$oeuvreimagethumbid = attachment_url_to_postid($oeuvreimagethumb);} else {$oeuvreimagethumb = '';$oeuvreimagethumbid = '';} if (get_field("oeuvre_annee", $pid)) {$oeuvredate = esc_html(get_field( "oeuvre_annee", $pid ));} else {$oeuvredate = '';} if (get_field("oeuvre_technique", $pid)) {$oeuvretechnique = esc_html(get_field( "oeuvre_technique", $pid ));} else {$oeuvretechnique = '';} if (get_field("oeuvre_legende", $pid)) {$oeuvrelegende = get_field( "oeuvre_legende", $pid );} else {$oeuvrelegende = '';} $oeuvreportaitpaysage = get_field("oeuvre_portait_paysage", $pid); if (get_field("oeuvre_image", $pid)) {$oeuvreimage = get_field( "oeuvre_image", $pid );$oeuvreimageurl = wp_get_attachment_url( $oeuvreimage );$classpopup = 'oeuvre-image '.$oeuvreportaitpaysage;} else {$oeuvreimage = '';} if (get_field("oeuvre_flipbook_v2", $pid)) {$oeuvreflipbook = get_field( "oeuvre_flipbook_v2", $pid );$classpopup = 'oeuvre-flipbook';} else {$oeuvreflipbook = '';} if (get_field("oeuvre_son", $pid)) {$oeuvreson = get_field( "oeuvre_son", $pid );$classpopup = 'oeuvre-son';} else {$oeuvreson = '';} if (get_field("oeuvre_video", $pid)) {$oeuvrevideo = get_field( "oeuvre_video", $pid );$classpopup = 'oeuvre-video';} else {$oeuvrevideo = '';} if (get_field("oeuvre_citation", $pid) == 'oui') {$oeuvrecitation = get_field( "oeuvre_citation", $pid );$classpopup = 'oeuvre-citation';} else {$oeuvrecitation = '';} $oeuvrelien = get_post_permalink($pid); $oeuvreslug = get_post_field( 'post_name', $pid ); $lienetoilee = __( 'Cliquez ici pour un supplément d’âme', 'peynet'); $output = ''; $output .= '<div id="'.$oeuvreslug.'" class="popup-oeuvre-principale '.$classpopup.' ">'; $output .= '<div class="avia-section main_color avia-section-default avia-no-border-styling el_after_av_one_full el_before_av_section avia-bg-style-scroll av-minimum-height av-minimum-height-100 av-height-100 container_wrap fullsize"><div class="container av-section-cont-open"><div class="template-page content av-content-full alpha units"><div class="post-entry post-entry-type-page "><div class="entry-content-wrapper clearfix jmcustompopupcontainer">'; // Bloc titre, date, technique $output .= '<div class="titredatetechniquecontainer">'; $output .= '<div class="titredatetechnique">'; $output .= '<p class="oeuvre-titre">'.$oeuvretitle.'</p>'; if (get_field("oeuvre_annee", $pid)) {$output .= '<p class="oeuvre-annee">'.$oeuvredate.'</p>';} if (get_field("oeuvre_technique", $pid)) {$output .= '<p class="oeuvre-technique">'.$oeuvretechnique.'</p>';} if (get_field("oeuvre_legende", $pid)) {$output .= '<p class="oeuvre-legende">'.$oeuvrelegende.'</p>';} $output .= '</div></div>'; // Bloc contenu principal $output .= '<div class="contenuprincipaloeuvrecontainer">'; $output .= '<div class="contenuprincipaloeuvre">'; if (get_field("oeuvre_image", $pid)) { $output .= '<div class="contenuprincipaloeuvreimage">'; $output.= do_shortcode ("[av_image src='".$oeuvreimageurl."' attachment='".$oeuvreimage."' attachment_size='full' src_dynamic='' copyright='' caption='' image_size='' styling='' box_shadow='none' box_shadow_width='10' box_shadow_color='' align='center' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' link='' link_dynamic='' target='' animation='no-animation' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' hover='' blur_image='' grayscale_image='' fade_image='' appearance='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' transform_perspective='' transform_rotation=',,,' transform_scale=',,' transform_skew=',' transform_translate=',,' av-desktop-transform_perspective='' av-desktop-transform_rotation=',,,' av-desktop-transform_scale=',,' av-desktop-transform_skew=',' av-desktop-transform_translate=',,' av-medium-transform_perspective='' av-medium-transform_rotation=',,,' av-medium-transform_scale=',,' av-medium-transform_skew=',' av-medium-transform_translate=',,' av-small-transform_perspective='' av-small-transform_rotation=',,,' av-small-transform_scale=',,' av-small-transform_skew=',' av-small-transform_translate=',,' av-mini-transform_perspective='' av-mini-transform_rotation=',,,' av-mini-transform_scale=',,' av-mini-transform_skew=',' av-mini-transform_translate=',,' mask_overlay='' mask_overlay_shape='blob' mask_overlay_size='contain' mask_overlay_scale='100%' mask_overlay_position='center center' mask_overlay_repeat='no-repeat' mask_overlay_rotate='' mask_overlay_rad_shape='circle' mask_overlay_rad_position='center center' mask_overlay_opacity1='0' mask_overlay_opacity2='1' mask_overlay_opacity3='' title_attr='' alt_attr='' img_scrset='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' sc_version='1.0' admin_preview_bg=''][/av_image] "); $output .= '</div>';} if (get_field("oeuvre_flipbook", $pid)) { $output .= '<div class="contenuprincipaloeuvreflipbook">'; // $output .= do_shortcode ("[real3dflipbook pdf='".$oeuvreflipbook."']"); $output .= do_shortcode (' [dflip id="'.$oeuvreflipbook.'"][/dflip]'); $output .= '</div>';} if (get_field("oeuvre_son", $pid)) { $output .= '<div class="contenuprincipaloeuvreson">'; $output .= do_shortcode ("[sc_embed_player fileurl='".$oeuvreson."']"); $output .= '</div>';} if (get_field("oeuvre_video", $pid)) { $output .= '<div class="contenuprincipaloeuvrevideo">'; $output .= do_shortcode ("[av_video src='".$oeuvrevideo."']"); $output .= '</div>';} if (get_field("sliderimages", $pid)) { $output .= '<div class="contenuprincipaloeuvreslider">'; $output.= do_shortcode ("[jmpeynetslider bonus='non' pid='".$pid."']"); $output .= '</div>';} $output .= '</div></div>'; // Bloc lien vers bonus $output .= '<div class="bonuslinkcontainer">'; if (get_field("oeuvre_bonus", $pid) == 'oui') { $output .= '<div class="bonuslink open-popup-bonus-link" datalink="#bonus-'.$oeuvreslug.'">'; $output .= $lienetoilee; $output .= '</div>'; } $output .= '</div>'; // Closing the main container $output .= '</div></div>'; $output .= '<div class="peynetmasonry-navigation-container">'; if($previousid) {$output .= '<a href="#" class="type-oeuvre navigation-link" data-av-masonry-item="'.$previousid.'" data-linkcurrentmasonryid="'.$masonryid.'"> < </a>';} $output .= '<div style="width:5px;"></div>'; if($nextid) {$output .= '<a href="#" class="type-oeuvre navigation-link" data-av-masonry-item="'.$nextid.'" data-linkcurrentmasonryid="'.$masonryid.'"> < </a>';} $output .= '</div>'; $output .= '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'; $output .= '</div></div></div>'; $output .= '</div>'; return $output; } add_shortcode('jmpeynetoeuvre', 'shortcode_jmpeynetoeuvre');I know it’s a lot, but I wanted to give you all the necessary elements. The ‘jmpeynetslider’ shortcode creates a content slider from an ACF WYSIWYG field filled with multiple pictures.
Best
Hi,
Thank you for the inquiry.
The content slider is activated using the AviaSlider function. You’ll find this in the enfold/js/shortcodes.js file around line 205. You may need to use the same function to re-initialize the slider inside the lightbox container.
//content slider $( '.avia-content-slider-active', container ).aviaSlider({wrapElement: '.avia-content-slider-inner', slideElement: '.slide-entry-wrap', fullfade: true});The AviaSlider function can be found in the enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow.js file.
Best regards,
IsmaelHi,
Thanks for your reply ! I managed to make it work. For those who want to know, the way I did it was to add in the ajax call success something like :
if(response.content.indexOf('avia-content-slider-active') > -1) { $( '.avia-content-slider-active' ).aviaSlider({wrapElement: '.avia-content-slider-inner', slideElement: '.slide-entry-wrap', fullfade: true}); }I had to get rid of the container variable because it was not defined, and some things don’t seem to work (like the custom class on the slider, theorically inserted through the custom_class parameter of the shortcode, but that doesn’t really matter).
Just out of curiosity, is there other elements like this that have an ‘activation function’ ? If so, is there somewhere a list of them ?
Best,
Viewing 5 posts - 1 through 5 (of 5 total)
- You must be logged in to reply to this topic.