Automate the Diverse Solutions dsIDXPress IDX Listings Widget Slideshow

Diverse Solutions dsIDXPress Listings WidgetI posted about how to automate the Diverse Solutions dsIDXPress Property Slideshow Widget yesterday. As of this writing, the Property Slideshow widget is designed to limit the listings to a city, state, and/or zip code, but it doesn’t allow the listings to be limited to a particular office. My client wanted a slideshow that included only her office’s properties.

Enter the Diverse Solutions dsIDXPress IDX Listings widget. The Listings widget does allow the listings to be limited to those of an agent or an office, but the slideshow it comes with is not automated, either, so I wrote a little script to automate it. Read on for how to implement the automation yourself.

The developers at Diverse Solutions designed the IDX Listings widget’s slideshow so that it has previous and next buttons, but it doesn’t loop automatically like the Property Slideshow widget. Once a user gets to the end, they have to reverse through the listings. I could have written the script to “rewind” the listings to the beginning, but for simplicity’s sake, I just reversed through the listings the way a user would have to if the slides weren’t automated, then once the first slide is reached, the automation advances through to the last slide again.

Step One

Save the following as “idxpress_listings_automate.js” and upload it to a “js” folder in your child theme‘s folder.

jQuery(document).ready(function() {
	var idxlistingsslideTimer, idxlistingssliderimages, idxlistingsslideTime = 5000, idxlistingsimageId = 0, idxlistingsslidedirection = 'down', idxlistingsslidelimit;
	
	idxlistingssliderimages = jQuery('.dsidx-slideshow ul li.featured-listing');
	idxlistingsslidelimit = (idxlistingssliderimages.length - 1);
	
	idxlistingsslideTimer = setInterval(idxlistingsrunSlides, idxlistingsslideTime);
	
	function idxlistingsrunSlides() {
		switch(idxlistingsimageId) {
			case 0:
				idxlistingsslidedirection = 'down'
			break;
			case idxlistingsslidelimit:
				idxlistingsslidedirection = 'up';
			break;
		}
		jQuery('.dsidx-move-' + idxlistingsslidedirection).click();
		switch(idxlistingsslidedirection) {
			case 'down':
				idxlistingsimageId++;
			break;
			case 'up':
				idxlistingsimageId--;
			break;
		}
	}
	
	jQuery('body').on('mouseenter', '.featured-listing', function () { 
		clearInterval(idxlistingsslideTimer); 
	});
	
	jQuery('body').on('mouseleave', '.featured-listing', function () { 
		idxlistingsslideTimer = setInterval(idxlistingsrunSlides, idxlistingsslideTime); 
	});
});

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_listings_automate',  $path  . '/js/idxpress_listings_automate.js', array('jquery'), '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'your_scripts' );

Note: If you’re automating both the Diverse Solutions dsIDXPress Property Slideshow widget using the code in my previous post and the dsIDXPress Listings widget slideshow, the code you’d use would look like this instead:

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' );
	wp_enqueue_script( 'idxpress_listings_automate',  $path  . '/js/idxpress_listings_automate.js', array('jquery'), '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'your_scripts' );

Step Three

Next, add the dsIDXPress Listings widget to the widget position where you want to use it and configure the settings to suit your site. If you want to show the newly automated Listings slideshow by default, be sure to select the “Show slideshow details by default” option in the widget settings.

Clear any caching plugin you’re using as well as your browser cache, and you should be good to go.