Hey ibrahimsyed132755,

Are you overriding header.php or footer.php on a child theme? If so, then please try to replace those files with the parent theme files, then add your customisations back in after that.

Best regards,
Rikard

Hi,
Thanks for sharing Guenni007, I see this working on your site, but on my site, it was opening the overlay but not the image, but I didn’t get any error messages.
But thanks to you I was able to use some of your code to adjust mine and get it working to use the hotspot tooltip as the lightbox title.

function popup_tooltips_with_links() { 
?>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('#top.page-id-1386 .av-image-hotspot_inner').each(function () {
   	var toolTip = $(this).closest('.av-image-hotspot').attr('data-avia-tooltip');
        var cleanTitle =  $(toolTip).text();
   $(this).attr('title', cleanTitle );
$(this).magnificPopup({
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
});
})(jQuery);
});
</script>
<?php }
add_action('wp_footer', 'popup_tooltips_with_links');

In the above code you’ll see that I added window.addEventListener('DOMContentLoaded', function() { }); this is because on my test site I’m loading the scripts in the header before jQuery, I included it here should someone in the future be loading jQuery in the footer.
I also added a page ID so it will only work on my test page.
I also wanted to remove the tags from the titles so I added another variable var cleanTitle = $(toolTip).text();

Best regards,
Mike

Hi,
Thanks for the feedback, your approach seems fine, another way would be to add the page ID to the title attribute lines like this:

function custom_hotspot_title_script() { ?>
  <script>
(function($){
$('#top.page-id-1 .av-image-hotspot-1 a').attr('title','hotspot-1');
$('#top.page-id-1 .av-image-hotspot-2 a').attr('title','hotspot-2');
$('#top.page-id-1 .av-image-hotspot-3 a').attr('title','hotspot-3');
$('#top.page-id-1 .av-image-hotspot-4 a').attr('title','hotspot-4');
$('#top.page-id-1 .av-image-hotspot-5 a').attr('title','hotspot-5');
$('#top.page-id-1 .av-image-hotspot-6 a').attr('title','hotspot-6');
$('#top.page-id-1 .av-image-hotspot-7 a').attr('title','hotspot-7');
$('#top.page-id-1 .av-image-hotspot-8 a').attr('title','hotspot-8');

$('#top.page-id-2 .av-image-hotspot-1 a').attr('title','hotspot-1');
$('#top.page-id-2 .av-image-hotspot-2 a').attr('title','hotspot-2');
$('#top.page-id-2 .av-image-hotspot-3 a').attr('title','hotspot-3');
$('#top.page-id-2 .av-image-hotspot-4 a').attr('title','hotspot-4');
$('#top.page-id-2 .av-image-hotspot-5 a').attr('title','hotspot-5');
$('#top.page-id-2 .av-image-hotspot-6 a').attr('title','hotspot-6');
$('#top.page-id-2 .av-image-hotspot-7 a').attr('title','hotspot-7');
$('#top.page-id-2 .av-image-hotspot-8 a').attr('title','hotspot-8');
$('#top.page-id-2 .av-image-hotspot-9 a').attr('title','hotspot-9');
$('#top.page-id-2 .av-image-hotspot-10 a').attr('title','hotspot-10');
$('#top.page-id-2 .av-image-hotspot-11 a').attr('title','hotspot-11');
$('#top.page-id-2 .av-image-hotspot-12 a').attr('title','hotspot-12');
$('#top.page-id-2 .av-image-hotspot-13 a').attr('title','hotspot-13');
$('#top.page-id-2 .av-image-hotspot-14 a').attr('title','hotspot-14');
$('#top.page-id-2 .av-image-hotspot-15 a').attr('title','hotspot-15');
$('#top.page-id-2 .av-image-hotspot-16 a').attr('title','hotspot-16');
$('#top.page-id-2 .av-image-hotspot-17 a').attr('title','hotspot-17');

$('#top.page-id-3 .av-image-hotspot-1 a').attr('title','hotspot-1');
$('#top.page-id-3 .av-image-hotspot-2 a').attr('title','hotspot-2');
$('#top.page-id-3 .av-image-hotspot-3 a').attr('title','hotspot-3');
$('#top.page-id-3 .av-image-hotspot-4 a').attr('title','hotspot-4');
$('#top.page-id-3 .av-image-hotspot-5 a').attr('title','hotspot-5');
$('#top.page-id-3 .av-image-hotspot-6 a').attr('title','hotspot-6');
$('#top.page-id-3 .av-image-hotspot-7 a').attr('title','hotspot-7');
$('#top.page-id-3 .av-image-hotspot-8 a').attr('title','hotspot-8');

$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_hotspot_title_script');

but I can’t say that one way is better than the other, I guess it’s just preference.

Best regards,
Mike

Hi,
Thanks for the feedback, your server doesn’t have the PHP ZipArchive Extension activated,

you should be able to active this in the cPanel under PHP Selector it probably says Zip like in this screenshot

I see that you are using PHP v8.1.5, on my server PHP v8+ didn’t have the same PHP setting active by default and I had to manually compare them to PHP v7.4, your server may have the other extensions activated as in my screenshot, but if you still have trouble try switching to PHP v7.4 and then try importing again, if it then works you can always switch back to PHP v8.1.5, if you like.
I disabled all of your plugins to ensure there was no conflict in the demo import, please try like this.

Best regards,
Mike

Hi,
Thank you for the feedback, I examined closer on my demo site and found that by entering the image URL directly the WordPress media library meta fields are not called like they are when a gallery element is, so I don’t see a way to get the title from the link.
But the following script will allow you to add specific titles to each hotspot and show it in the lightbox.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_hotspot_title_script() { ?>
  <script>
(function($){
$('.av-image-hotspot-1 a').attr('title','hotspot-1');
$('.av-image-hotspot-2 a').attr('title','hotspot-2');
$('.av-image-hotspot-3 a').attr('title','hotspot-3');
$('.av-image-hotspot-4 a').attr('title','hotspot-4');
$('.av-image-hotspot-5 a').attr('title','hotspot-5');
$('.av-image-hotspot-6 a').attr('title','hotspot-6');
$('.av-image-hotspot-7 a').attr('title','hotspot-7');
$('.av-image-hotspot-8 a').attr('title','hotspot-8');
$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_hotspot_title_script');

and adjust the titles to suit, for example for hotspot 1, change $('.av-image-hotspot-1 a').attr('title','hotspot-1'); to $('.av-image-hotspot-1 a').attr('title','custom title for hotspot 1');
I assume that this is your only hotspot element on your site, if not them we can make this script work on this one page only by adding page IDs to it.

Best regards,
Mike

Hey Eleina,
Thanks for your question, for this example I created long team member descriptions and used css to make them hidden (the borders are only for reference):

this is the css for the lightbox popup and to hide the team member descriptions:

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}
.white-popup .team-social {
    border: 7px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    font-size: 19px;
    background: #fff;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    border-radius: 3px;
}
.avia-team-member .team-member-description {
	visibility:hidden;
}

Then I added this code to the end of my child theme functions.php file in Appearance ▸ Editor:

function clone_team_member_to_lightbox_popup() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('.avia-team-member').each(function () {
        var copyTeam = $(this).clone().html();
$(this).magnificPopup({
    items: {
        src: $('<div class="white-popup">'+copyTeam+'</div>'),
    },
    type: 'inline'
});
});
})(jQuery);
});
  </script>
  <?php
}
add_action('wp_footer', 'clone_team_member_to_lightbox_popup');

Then on click the team member element opens in a lightbox with the team member description showing.

*recommended css thanks to Guenni007 to have the team member image to the left and content to the right instead of below

.mfp-content {
  display: inline-flex !important;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
}

.white-popup .team-img-container {
  max-width: 300px;
  float: left;
  margin: 0 20px 10px 0
}

.white-popup .team-member-name,
.white-popup .team-member-job-title,
.white-popup .team-member-description  {
  width: 100%;
}

Best regards,
Mike

• This reply was modified 3 years, 8 months ago by Mike.

Hi Tim,

Please try to update enfold\config-woocommerce\config.php with the content of

https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_0/config-woocommerce/config.php

This should now show responsive images or the “large” image (if theme option Responsive Images For Lightbox is disabled). You can change the default lightbox image size with filter avf_avia_builder_helper_lightbox_size.

@guenni007

If you set ratio to > 1 @2x is added.

If theme option Responsive Images For Lightbox is disabled I get “Image could not be loaded” (because I do not have such a file uploaded), with option enabled I get the correct image responsive image (without @2x).

Best regards,
Günter

Hi,

@Steve thanks for the login, I copied your page to a test server but the buttons on the Fullwidth Easy Slider are working correctly, I saw that you had a custom avia.js in your child theme so I tried enabling your parent theme and disabling some of your plugins but it didn’t help on your site.
I also see that we are using the same PHP version: 7.4.29 so I’m not sure what could be causing this but I couldn’t reproduce.

@thinkjarvis thanks for the link to your site, I created a page with the Fullwidth Easy Slider and the Fullscreen Slider and tested buttons with page links, post links, manually links but I couldn’t reproduce your error.

Best regards,
Mike

Hi,

Thank you for the info.

We adjusted the code in the functions.php file but it doesn’t seem to be taking effect. Is there some kind of server or hosting cache for the site?

Please include the FTP login details in the private field so that we can edit the files properly. This is the adjusted code in the functions.php file.

function ava_search_filter_get_posts($query) {
    $terms = is_page( 110 ) ? 13 : 12;

    if ( ! $query->is_search ) return $query;

    $tax_query = $query->get( 'tax_query' ) ? : array();

    $tax_query[] = array(
        'taxonomy' => 'portfolio_entries',
        'terms'    => $terms,
    );

    $query->set( 'tax_query', $tax_query );
}
add_action( 'pre_get_posts', 'ava_search_filter_get_posts' );

Best regards,
Ismael

Hi,

In addition to @Guenni007:

If you only modify class-avia-masonry.php you can copy the original file to “$template_url.’/shortcodes/'” and your copy will be loaded before the original file preventing loading this.

There is no need for a directory structure.

Only in case you need control which modified files in your child theme must be loaded before other files you can create a directory structure but must add this structure e.g.

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes_1/', $template_url.'/shortcodes_2/' );

  return $paths;
}

and then file inside shortcodes_1 are loaded before files in shortcodes_2.

Best regards,
Günter