Smart Sites Carousel Widget

Transcription

1 Smart Sites Carousel Widget Powered by: Support: / Mon. Fri. 8:30 AM 9:00 PM Sat. & Sun. 10:00 AM 3:00 PM

2 Smart Sites - Working With The Flexible Jump Search Carousel Widget All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form of by any means, electronic, mechanical, photocopying, and recording or otherwise, without the prior written permission of California Regional Multiple Listing Service, Inc California Regional Multiple Listing Service, Inc. 5/2/2012 Page 1 Copyright Real Estate Digital & CRMLS, Inc. All rights reserved. 5/3/2012

3 Smart Sites Working With The Flexible Jump Search Carousel Widget Overview This document describes how to use the new flexible jump search carousel widget to create widgets for your agents and offices to select from in the widget token generator. The following features are now supported in the new carousel widget: Ability to include multiple widgets on the same page Support for vertical or horizontal carousels Support for grid based display formats (such as 2x2, 4x4, etc) Template system for customizing the appearance of items displayed in the carousel Detailed Steps 1) Login to Admin 2) Click Content 3) Click Articles 4) Click Add New Article 5) Enter Left Navigation Title, Main Article URL, and remaining fields as shown a. Enter Sequence, since a required field, but won t be applicable b. Do not check Show LeftNav on the following web sites c. Click Check Availability to ensure this URL has not been used 6) In the RAD Editor, create the HTML for your carousel widget a. You can copy and paste from the examples shown below by switching from the Design to HTML mode in the content editor Page 2 Copyright Real Estate Digital & CRMLS, Inc. All rights reserved. 5/3/2012

4 7) Click Preview to view your new carousel 8) Click Publish to save and make available in the list of widgets Page 3 Copyright Real Estate Digital & CRMLS, Inc. All rights reserved. 5/3/2012

5 Using the Carousel with Default Functionality The following examples demonstrate how to use the new carousel widget using an HTML markup snippet. The snippets are entered directly into the content page editor available on the Admin site. <div id="my-carousel" data-widget="carousel" data-visible="3" data-jumpsearchid="10001"></div> Specifying a Grid Layout for Carousel Items The following examples demonstrate how to specify a grid layout with a 2x2 appearance: <div id="my-carousel-grid" data-widget="carousel" data-visible="4" data-jumpsearchid="10001" data-rows="2"></div> Customizing the Appearance of Carousel Items using a jquery Template The appearance of carousel items can be customized using either JavaScript or a jquery client-side template. <div id="my-carousel-temp" data-widget="carousel" data-visible="3" data-jumpsearchid="10001" data-itemtemplate="myitemtemplate"></div> <script id="myitemtemplate" type="text/x-jquery-tmpl"> <a data-imageurl="${imagefilename}" href="${listingurl}"> <i></i> <div class="rwlc-citystate">${city}, ${state}</div> <div class="rwlc-address">${address}</div> <div class="rwlc-price">${price}</div> <div class="rwlc-bedbath">${bedsbaths}</div> </a> </script> Page 4 Copyright Real Estate Digital & CRMLS, Inc. All rights reserved. 5/3/2012

6 Widget Attributes Attribute id data-widget data-jumpsearchid data-visible data-rows Description The HTML element ID (Required). Value must be set to carousel The ID of the Jump Search to display (Required). The number of items to display (Default is 3) (Optional). The number of rows to divide the visible items by (Optional) (Default is 1). This property is useful for displaying the carousel items in grid format. Examples: 2x2 grid: visible = 4, rows = 2 4x4 grid: visible = 8, rows = 2 data-scroll data-itemtemplate The number of items to scroll past (Optional). The jquery template ID to use for customizing the item s appearance. Refer to section entitled Jump Search Listing Object Model for list of available tokens to use (Optional). Page 5 Copyright Real Estate Digital & CRMLS, Inc. All rights reserved. 5/3/2012

7 Jump Search Listing Object Model Property address city state price imagefilename listingurl bedsbaths Description Address of listing City State Price of listing Listing image URL Listing detail page URL Comma separated list of beds and baths Page 6 Copyright Real Estate Digital & CRMLS, Inc. All rights reserved. 5/3/2012