Knowledge Base & Support Center

Gallery Slider (Optima IDX)

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.

The next two steps provide JavaScript examples on how to feature different listings within the slider. Featured Listings are listings which belong to the Agent/Broker, while Saved Searches are listings that come from a saved search which you create.

The gallery slider is not permitted for clients in the Edmonton Real Estate Board.

 

Featured Listings

wpid13446-media_1346181416319.png

In order to add a featured listings slider to your site, use the code below and replace CLIENT_ID with your actual client ID:

 

 

<div id="ihf_property_gallery"></div>
<script type="text/javascript" src="http://www.idxre.com/idx/listingWidget_js.cfm?ClientID=CLIENT_ID"></script>

 

 

Saved Searches

wpid13447-media_1346182086930.png

In order to add a Saved Search (aka Hot Sheet) slider to your site, use the code below and replace CLIENT_ID with your own client ID, andHOTSHEET_ID with the ID found in your iHF Control Panel next to your Saved Search Page name under Listings > Saved Search Pages:

 

 

<div id="ihf_property_gallery"></div>
<script type="text/javascript" src="http://www.idxre.com/idx/listingWidget_js.cfm?clientid=CLIENT_ID&hid=HOTSHEET_ID"></script>

 

 

Customizing Your Slider

Note: When using any example code below you will want to ensure you have replaced CLIENT_ID with your actual client ID.

 

 

1. Define Column Width

wpid13448-media_1346183035404.png

Use the &width= parameter to specify the overall width. 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:

 

 

<div id="ihf_property_gallery"></div>
<script type="text/javascript" src="http://www.idxre.com/idx/listingWidget_js.cfm?clientid=CLIENT_ID&width=400"></script>

 

 

2. Rows & Columns

wpid13449-media_1346183422454.png

You can add grid’s rows & columns by using the &rows=and &columns= parameters. Please note that you will need to utilize the &width= attribute as well to accomodate for any extra columns added.

Here is an example which uses both parameters:

 

 

<div id="ihf_property_gallery"></div>
<script type="text/javascript" src="http://www.idxre.com/idx/listingWidget_js.cfm?clientid=CLIENT_ID&width=450&rows=2&columns=2"></script>

 

 

3. Effects & Advancing

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

 

 

 

 

<div id="ihf_property_gallery"></div>
<script type="text/javascript" src="http://www.idxre.com/idx/listingWidget_js.cfm?clientid=CLIENT_ID&width=700&columns=3&effect=fade"></script>

 

 

4. Customizing with CSS

If you are using a Optima IDX package, you can further customize the appearance of the Property Slider by adding CSS into your Control Panel under Setup > Design & Branding > CSS.

Did you find this article helpful?