Docs

[shortcoast]

Hi,
I’m looking for a way to have the photos that I’m using for the galleries on top of each portfolio item, made with imgs uploaded as attachments on the page and recalled via the Media Type > Gallery setting, to change automatically, instead of manually.

I found this previous thread: https://community.theme.co/forums/topic/portfolio-gallery-order/
and inserted on functions.php (child theme) the code suggested there:

add_action(‘wp_footer’, ‘x_add_sliding_effect’, 9999);

function x_add_sliding_effect() {
echo '<script type="text/javascript" charset="utf-8">
          jQuery(window).load(function() {
            jQuery(\'.x-flexslider\').flexslider({slideshow: true, slideshowSpeed: 7000, animationSpeed: 600 });
          });
        </script>';
}

but that seems not to work; see for instance here: http://www.vinodiretto.it/en/cantina/arpepe/

any clue on how to achieve that automatic sliding effect?

thanks!

[Rue Nel]

Hello There,

Please update your code and use this instead:

// Add Sliding effect 
// =============================================================================
add_action('wp_footer', 'x_add_sliding_effect', 9999);
function x_add_sliding_effect() { ?>
  
  <script type="text/javascript" charset="utf-8">
    (function($){
      $(window).on('load', function(){
        $('.entry-featured .x-flexslider-featured-gallery').flexslider({
          controlNav   : false,
          selector     : '.x-slides > li',
          prevText     : '<i class="x-icon-chevron-left" data-x-icon=""></i>',
          nextText     : '<i class="x-icon-chevron-right" data-x-icon=""></i>',
          animation    : 'fade',
          easing       : 'easeInOutExpo',
          smoothHeight : true,
          slideshow    : true
        });
      });
    })(jQuery);
  </script>

<?php }
// =============================================================================

After adding the changes, since you have installed a caching plugin W3 Total Cache, please clear your plugin cache first before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps.

[shortcoast]

Thanks!
at first I’ve added that code to the functions.php file in child’s theme but that was actually putting offline the site (!) …don’t know why.
Afterwards, I added the code in customizer > javascript field but changes seem not to take place on live page: http://www.vinodiretto.it/it/cantina/maso-grener/

I’ve also disable the w3 total cache plugin.

any thoughts?

cheers!

[shortcoast]

Hi again,
I actually found this thread here: https://community.theme.co/forums/topic/portfolio-questions-2/
and followed the instruction by adding the following javascript:

jQuery('.x-flexslider-featured-gallery').flexslider({
    controlNav   : false,
    selector     : '.x-slides > li',
    prevText     : '<i class="x-icon-chevron-left"></i>',
    nextText     : '<i class="x-icon-chevron-right"></i>',
    animation    : 'fade',
    easing       : 'easeInOutExpo',
    smoothHeight : true,
    slideshow    : true
  });

and this css bit to fix the behaviour on first slide on desktop:

@media (min-width: 980px) {

.x-flexslider-featured-gallery {
    min-height: 652px;
}

}

On front-end everything seems to work fine: http://www.vinodiretto.it/it/cantina/maso-grener/

Just to double-check, may I ask you if this other way is fine?

[Rue Nel]

Hello There,

Thanks for writing in! I have check your site and there seems nothing wrong. Everything works out fine and no errors is showing on the page. I guess you’ve got it correctly.

If there’s anything else, we can help you with, please let us know.

[shortcoast]

awesome! thanks a million! 🙂

[shortcoast]

Sorry, just a strange thing that I found out on smartphone view.

Basically, when a portfolio page like this one: http://www.vinodiretto.it/it/cantina/maso-grener/ is loaded on smartphone, the 1st gallery slide loaded appears to overlap the title (see below):

Then, if you wait some seconds or if you click on the arrows, the title is showing correctly without the gallery hiding it (see below):

To fix a similar issue on desktop I’m using the following code:

@media (min-width: 980px) {

.x-flexslider-featured-gallery {
    min-height: 450px;
}

}

Should I use something like this also for smartphone view?
Would you be able to assist me on this?

thanks!

[Rad]

Hi there,

If it’s working after clicking the arrow, then the issue could be related to re-rendering. Please add this code at Admin > Appearance > Customizer > Custom > Javascript.

jQuery ( function($) {

function re_render_everything() {

setTimout( function() { $(window).trigger('resize'); }, 500 );

}

re_render_everything();

$(document).ready( re_render_everything );
$(window).on('load', re_render_everything );

} );

Re-render actually happens on resize, or any element change. And we just need to trigger it upon the load. You may change the 500 value until you find the exact timing.

Hope this helps.

[shortcoast]

Hi,
I tried to add that javascript code but that seems to generate en error with a plugin (WP Google Maps) that is blocking the map to render (see below).

Is there a way to have the javascript code in and not generate that error, somehow?

thanks!

[Jade]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[shortcoast]

This reply has been marked as private.

[Rad]

Hi there,

There was a typo error in the code, please change it to this

jQuery ( function($) {

function re_render_everything() {

setTimeout( function() { $(window).trigger('resize'); }, 500 );

}

re_render_everything();

$(document).ready( re_render_everything );
$(window).on('load', re_render_everything );

} );

I checked that again and it’s working okay.

Thanks!

[shortcoast]

it looks like it’s working now, with the amended code, thanks! 🙂
may I just ask you how that “500” number works and, if changed to another number, what are the effects on the live site?

thanks!

[Rue Nel]

Hello There,

500 is the time in milliseconds. You can increase this if you want longer delays.
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[shortcoast]

perfect, thanks for clarifying.
have a nice one!

[Author]

Posts