# Slideshow PRO Module

### Overview

<p class="callout success">**This is an extra paid module available for Business Package, can be also purchased separately.** </p>

This module showcases the listings in a slideshow format. Users can see the image along with the title of the listing.

Slideshow PRO Module upon activation is seen as follows on the pages:

[![obraz.png](https://wiki.comdev.eu/uploads/images/gallery/2024-02/scaled-1680-/XSyobraz.png)](https://wiki.comdev.eu/uploads/images/gallery/2024-02/XSyobraz.png)

**Screen 1: Slideshow Module on front page**

### Editing Slideshow Module

To edit the module, click on the module link or select the check box next to the module name, and then click **Edit**.

The following image shows the module edit screen.

[![obraz.png](https://wiki.comdev.eu/uploads/images/gallery/2024-03/scaled-1680-/u0gobraz.png)](https://wiki.comdev.eu/uploads/images/gallery/2024-03/u0gobraz.png)

**Screen 2: Module tab**

Provide the options as per the following table.

<div id="bkmrk-count-number-of-list"><table style="width: 100%; height: 1204.1px;"><tbody><tr style="height: 35.4px;"><td style="width: 14.8331%; height: 35.4px;">**Count**

</td><td style="width: 85.1669%; height: 35.4px;">Number of listings for which images need to be shown in the slideshow

</td></tr><tr style="height: 57.8px;"><td style="width: 14.8331%; height: 57.8px;">**Number of characters**

</td><td style="width: 85.1669%; height: 57.8px;">Number of characters from the description that will be shown in the slideshow.

</td></tr><tr style="height: 102.6px;"><td style="width: 14.8331%; height: 102.6px;">**Image Format**

</td><td style="width: 85.1669%; height: 102.6px;">The format for the thumbnail listing image.   
1:1 = Image will be unchanged.   
4:3 = image will be resized to 4:3 format.   
10:9 = Image will be resized to 10:9 format.

</td></tr><tr style="height: 35.4px;"><td style="width: 14.8331%; height: 35.4px;">**Featured**

</td><td style="width: 85.1669%; height: 35.4px;">Enable to show only featured listings.

</td></tr><tr style="height: 35.4px;"><td style="width: 14.8331%; height: 35.4px;">**Show Address**

</td><td style="width: 85.1669%; height: 35.4px;">Enable to show the address of the listing.

</td></tr><tr style="height: 57.8px;"><td style="width: 14.8331%; height: 57.8px;">**Show Description**

</td><td style="width: 85.1669%; height: 57.8px;">Enable to show the description up to the character limit set.

</td></tr><tr style="height: 93.45px;"><td style="width: 14.8331%; height: 93.45px;">**Category**

</td><td style="width: 85.1669%; height: 93.45px;">Select either of the following options.

- Current Browse (auto) – Automatically displayed based on the category.
- Selected Below – Listings belonging to only these categories are shown.

</td></tr><tr style="height: 57.8px;"><td style="width: 14.8331%; height: 57.8px;">**Choose Category**

</td><td style="width: 85.1669%; height: 57.8px;">If Selected Below is selected for the above field, select the required category.

</td></tr><tr style="height: 162.65px;"><td style="width: 14.8331%; height: 162.65px;">**Sort Options**

</td><td style="width: 85.1669%; height: 162.65px;">Select how the displayed listings should be sorted by.

- Latest
- Most Viewed
- Alphabetically
- Updated
- Most Rated DESC
- Most Rated ASC

</td></tr><tr style="height: 35.4px;"><td style="width: 14.8331%; height: 35.4px;">**Use Listings IDs**

</td><td style="width: 85.1669%; height: 35.4px;">Enable to make the next set of settings work.

</td></tr><tr><td style="width: 14.8331%;">**IDs CSS Item Styling**

</td><td style="width: 85.1669%;">Provide comma separated IDs in this field. Such as, 21, 22 and so on.

</td></tr><tr><td style="width: 14.8331%;">**Use IDs for the CSS Classes**

</td><td style="width: 85.1669%;">If set to yes, to each Caption, CSS Class ID will be added e.g. .jd-slide-title21 where 21 is ID of the listing.

Listing ID can be found under JomEvents Listing View in Table - Column ID. It works best with **Use Listings ID's** setting

You can select individual listings and promote them with different captions.

<div data-hasbody="true" data-macro-name="note">  
</div>If set to No, the default CSS will be used for all captions.

</td></tr></tbody></table>

</div>#### Slider Module Tab

This tab controls the layout where the map panel is to be displayed on the screen.

[![obraz.png](https://wiki.comdev.eu/uploads/images/gallery/2024-03/scaled-1680-/Vm1obraz.png)](https://wiki.comdev.eu/uploads/images/gallery/2024-03/Vm1obraz.png)

**Screen 3: Slider Module tab**

<table id="bkmrk-ids-css-item-styling"><tbody><tr><td>Slider Width

</td><td>Slider width in pixels

</td></tr><tr><td>Slider Height

</td><td>Slider height in pixels

</td></tr><tr><td>Slide Delay (seconds)

</td><td>Slideshow delay in seconds

</td></tr><tr><td>Full Width

</td><td>Enable to cover the entire width of the slideshow image.

</td></tr><tr><td>Slide Transition

</td><td>Select from the following options.

- Random
- Fade
- Boxslide
- Slotzoom-horizontal
- Slotzoom-vertical
- Curtain-1
- Curtain-2
- slideup

</td></tr><tr><td>Slide Navigation

</td><td>Select from the following options.

- Bullet
- Thumb
- None

</td></tr><tr><td>Autoplay

</td><td>Start slider when page loaded

</td></tr></tbody></table>

#### Menu Assignment tab

This tab controls where the module should be displayed. You can decide if it should be displayed on all pages for the site or just selective pages.

[![YVJobraz.png](https://wiki.comdev.eu/uploads/images/gallery/2024-03/scaled-1680-/yvjobraz.png)](https://wiki.comdev.eu/uploads/images/gallery/2024-03/yvjobraz.png)

**Screen 4: Menu Assignment tab**

Select the required menu for module assignment. The available options are:

- On all pages
- No pages
- Only on the pages selected
- On all pages except those selected