Knowledge Base & Support Center

Responsive Gallery Slider JavaScript Widget

The Property Gallery Slider allows you to configure a custom-sized gallery slider for any webpage, highlighting Featured Properties or properties from a Saved Search. You can define the number of rows or columns to display, as well as the gallery’s width.

Compliance note: The gallery slider cannot be used by clients in the Edmonton Real Estate Board (Alberta).


Featured Listings are listings which belong to the Agent/Broker, while Saved Searches are listings that come from a saved search which you create.

 

Two Row, Two Column Saved Search Slider

 

gallery slider

 

 

Featured Listings

In order to add a featured listings slider to your site, use the code below:


<script type="text/javascript" src="http://www.idxhome.com/site/listing/gallery/slider/CLIENT-ID"></script>

Saved Searches

To add a slider that displays listings from a Saved Search, use the code below and replace SAVED SEARCH ID with the Saved Search Page ID found in your account Control Panel (go to Listings –> Saved Search Pages).


<script type="text/javascript" src="http://www.idxhome.com/site/listing/gallery/slider/CLIENT-ID?hid=SAVED-SEARCH-ID"></script>


 
wpid18264-media_1346182086930.png

Define Column Width

Use the width= parameter to specify the overall width (if you do not enter these, the slider will be responsive and fit to the column). The columns and images will be sized to fit within the width specified. Here is an example of adding this parameter to increase the size of the slider column to be 400px:


<script type="text/javascript" src="http://www.idxhome.com/site/listing/gallery/slider/CLIENT-ID?hid=SAVED-SEARCH-ID&width=400"></script>

2. Rows & Columns

You can add grids rows & columns by using the rows= and columns= parameters. 

Here is an example which uses both parameters:


<script type="text/javascript" src="http://www.idxhome.com/site/listing/gallery/slider/CLIENT-ID?hid=SAVED-SEARCH-ID&rows=2&columns=2"></script> 

3. Effects & Advancing

Opt for a fade effect instead of the standard scroll by adding effect=fade to the widget javascript. If you’d like the listings to be manually advanced only, add auto=false.

Here is an example which uses the fade effect and allows for manual advance only:


<script type="text/javascript" src="http://www.idxhome.com/site/listing/gallery/slider/CLIENT-ID?hid=SAVED-SEARCH-ID&effect=fade&auto=false"></script>

 

4. Maximum Results

For better performance you can include the maxResults parameter. This allows you to limit the quantity of listings downloaded for the slider to a specified number of results. Limitting the quantity of listings can greatly in improve the load time of a page that includes the slider, especially if the slider contains a saved search that includes tens or hundreds of listings.

Here is an example which sets the maximum results to 25 listings:


<script type="text/javascript" src="http://www.idxhome.com/site/listing/gallery/slider/CLIENT-ID?hid=SAVED-SEARCH-ID&maxResults=25"></script>

Did you find this article helpful?