Automate the Diverse Solutions dsIDXPress Property Slideshow Widget

Diverse Solutions' dsIDXPress Property Slideshow WidgetOne of my clients is a real estate broker who uses the Diverse Solutions dsIDXPress plugin to display MLS listings on her site.

One of the things I like about Diverse Solutions’ dsIDXPress plugin is that it uses Internet Data Exchange to display the MLS data instead of using a frame like so many other MLS plugins.

Unfortunately, at the time of this writing, the Property Slideshow Widget is not automated, and it doesn’t offer much in the way of configuration options.

In the process of working with the client to get the site looking the way she wanted it, I spent a little time automating the Property Slideshow Widget, and thought I’d share the way I did it.

To automate the Property Slideshow Widget, I came up with a short-and-sweet jQuery script using javascript timer functions that would simulate the user clicking the arrow to advance the slideshow. Typically, I’d narrow the scope of the event handler as much as possible, but in the sample code below, I used the “body” tag to accommodate any theme you might be using.

Step One

Save the following code as “idxpress_slideshow_automate.js” in a “js” folder for your child theme. (You are using a child theme, aren’t you?)

jQuery(document).ready(function() {
    var idxslidesslideTimer, idxslidesslideTime = 5000;
    idxslidesslideTimer = setInterval(idxslidesrunSlides, idxslidesslideTime);
     
    function idxslidesrunSlides() { 
        jQuery('.gallery_big_right_arrow').click();
    }
     
    jQuery('body').on('mouseenter', '.dsidx-widget-slideshow', function () { 
        clearInterval(idxslidesslideTimer); 
    });
     
    jQuery('body').on('mouseleave', '.dsidx-widget-slideshow', function () { 
        idxslidesslideTimer = setInterval(idxslidesrunSlides, idxslidesslideTime); 
    });
});

Step Two

Add the code below to the functions.php of your child theme to add your new script to your site with jQuery as a dependency:

function your_scripts() {
  $path = get_stylesheet_directory_uri();
  wp_enqueue_script( 'idxpress_slideshow_automate',  $path  . '/js/idxpress_slideshow_automate.js', array('jquery'), '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'your_scripts' );

Step Three

Next, add the Property Slideshow Widget to the widget position where you want to use it and configure the settings to suit your site.

CSS Tweak

I made a number of CSS tweaks to the Property Slideshow Widget for my client’s site, including changing the images used for the directional arrows, but the one CSS tweak that you might want to include on your site is the following, which should center the Property Slideshow Widget in its parent element:

.dsidx-widget-slideshow table {
   margin: 0px auto !important;
}

That’s it! Clear your cache and you should find that the Property Slideshow Widget is now changing slides every five seconds. When the user hovers their cursor over the Widget, the automation stops. Once their cursor leaves the Widget, the automation resumes.