Hi,
Thank you for contacting us and I'd be happy to assist.
The flash of the the different sized image shows, because the image gets loaded first, but then adjusted according to the size of the enclosed slider container.
To improve this loading, I've added the following changes:
1. In all 3 views used on the homepage, I've wrapped the loop contents inside a special div container, for example:
<div class="slider-image-link" style="opacity: 0;">
<wpv-loop>
[wpv-post-body view_template="loop-item-in-home-page-upcoming-events" suppress_filters="true"]
</wpv-loop>
</div>
This way, the container of these slider images will be initially hidden, whenever the page loads or when the pagination results update.
2. In the JS editor of the view '*NEW - Home Page - Upcoming Events', I included the following script that makes those slider containers visible, when the page results are loaded, either through page loading or through pagination:
jQuery( document ).on( 'ready js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
jQuery('div.slider-image-link').css('opacity', '1');
});
3. In that same view's CSS styles, I included the following CSS code to accommodate the new slider container:
.slider-image-link {
display: inline-block;
width: 90%;
vertical-align: middle;
}
.slider-image-link a {
width: 30%;
display: block;
float: left;
margin: 0 1% 0;
}
I hope this helps and please let me know if you need further assistance.
regards,
Waqar
