Okay
  Public Ticket #387822
Testimonials
Closed

Comments

  • kyle started the conversation

    I've noticed on my testimonials page that the image associated with the testimonial is incorrect. When on full screen mode the correct image is applied to the testimonial but when i shrink down to tablet mode the images get shuffled. Can you please provide me a quick fix for this?

  •  296
    Paul replied

    Hi Kyle!

    Please open "/js/kose.js" file and do as following:

    1. Find this code:

    if (siteWidth > 1161) {
                                    
        // Apply custom z-index to make the first item's image on top
        var zIndex = 50;
        $(this).find('.uxb-tmnl-testimonial-item .uxb-tmnl-testimonial-thumbnail').each(function() {
            $(this).css('z-index', zIndex);
           zIndex -= 1;
        });
                                
    }

    Remove the "if" condition out so as a result it will be:

    // Apply custom z-index to make the first item's image on top
    var zIndex = 50;
    $(this).find('.uxb-tmnl-testimonial-item .uxb-tmnl-testimonial-thumbnail').each(function() {
        $(this).css('z-index', zIndex);
        zIndex -= 1;
    });

    2. Find another code (it is located a bit right below the above code):

    if (siteWidth > 1161) {
                                    
                                    // Reset custom z-index
                                    $(this).find('.uxb-tmnl-testimonial-item .uxb-tmnl-testimonial-thumbnail').each(function() {
        
                                        if ($('html').hasClass('touch')) {
                                            $(this).stop().animate({
                                                opacity : 0
                                            });
                                        } else {
                                            $(this).css({
                                                zIndex : '',
                                                display : 'none',
                                            });
                                        }
        
                                    });
        
                                    // Apply a new custom z-index to the next item's image that will be displayed
                                    var nextItem = data.items.visible;
        
                                    if ($('html').hasClass('touch')) {
                                        $(nextItem).find('.uxb-tmnl-testimonial-thumbnail').stop().animate({
                                            opacity : 1
                                        });
                                    } else {
                                        $(nextItem).find('.uxb-tmnl-testimonial-thumbnail').css({
                                            zIndex : 50,
                                            display : 'block',
                                        });
                                    }
                                
                                }

    Again, do the same as 1. to remove the "if" condition out of this code block.

    This should fix the bug. :)

    Regards,
    Paul