You can easily create slideshows to display images, text slides or videos in your website.


 General Instructions

From the admin menu select Media / Images > Manage Slideshows [br][br] 

The overview video below will cover the basics in creating and configuring a slideshow.[br][br]

If you are creating a header slideshow we recommend you pre load images through add / crop slides prior to creating (or amending) your header slideshow. [br][br]

Dynamic Rooms Pages

It is now possible to add slideshows to your dynamic rooms pages for single property websites, and to directory and property pages for multi property websites as shown below:

rooms&RatesPage

 

Previously you were only able to have one image per room type for these pages, as the photos are coming from your iBex account. However you can now create slideshows for each room type from within your website. [br]

If you wish to have a slideshow for each room type for mobiles, then you will need to create a separate ‘mobi’ slideshow for each room. Otherwise you can leave the default iBex image for each room for mobiles, which will use less data on your guests mobile device when viewing these pages.

[br]

Slideshow instructions have been separated into the same ‘tab’ areas as in the Slideshow Settings.

Images

  • Go to Media / Images > Manage Slideshows from your dashboard menu.
  • Click on the Add New button.
  • Add the name of your new slideshow into the Enter Titkle Here field. We would recommend this to be the room ID from iBex, and if you are creating a slideshow for mobiles then you can name it the room ID – Mobile.
  • You will then need to add in any room images to the slideshow:
    – You can drag images into this area from your computer,
    – Click the Select Files button to upload new images from your computer,
    – Or you can click on the ‘Click Here To Insert Images From Other Sources’ button, which will allow you to select images from your websites media library.
  • Once the images have uploaded you are able to click and drag on the images to rearrange the order if you wish:
    orderImages

 

[br]

[br]

  • You can add in a Caption, Title, and Alt Text for each image by clicking in the blue information icon above each image.
  • Once you have finished adding images you will need to click on the Config tab at the top of the page.

[br] [br]  [br]

Config

You may experiment with the Config settings if you wish to alter the  slideshow appearance, however for best results we recommend the settings below: [br]

Slider Theme – Base [br]

Slider Dimensions:

  • For Mobile slideshows we recommend 600 x 400 px.
  • For Desktop slideshows we recommend 800 x 600 px. [br]

Slider Transition:

  • We recommend Scroll Horizontal or Fade. [br]

Slider Transition Duration – 7000 ms. [br]

Slider Transition Speed – 1000 ms. [br]

Slider Position – None. [br]

Slider Gutter – None. [br]

Caption Position – Bottom. [br]

Caption Transition Delay – 0 ms. [br]

Autostart Slider – We would recommend to have this option unticked, as it could look quite ‘busy’ on the page having all slideshows auto scrolling. [br]

Show Slider Arrows – This option will give you Arrow buttons to control the slider, which work best especially if you are using captions on your images. [br]

Show Slider Control Nav – This option will give you coin/circle icons to control slideshow. [br]

Show Pause/Play Controls – Leave this option unticked [br]

Pause On Hover – Leave this option unticked [br]

Pause On Navigation – Leave this option unticked [br]

Enable Mousewheel Navigation – Leave this option unticked [br]

Loop Slider – Leave this option ticked [br]

Randomize Slider – Leave this option unticked [br]

Enable Keyboard Navigation – Leave this option ticked [br]

Use CSS Transitions – Leave this option ticked [br]

Use Adaptive Height – Leave this option ticked [br]

Set Dimentions On Images – Leave this option unticked [br]

Crop Images In Slider – Leave this option ticked [br]

Slider Delay – 0 ms. [br]

Start On Slide – Set as 0. [br]

ARIA Live Value – Polite. [br]

 

Mobile

Follow the settings below:

mobileSettings

 

 

Thumbnail

Enable Slider Thumbnails?

We recommend to leave this option unticked.

 

Misc

The only option you will need to change here is to amend the Slider Slug. This is what will automatically set this slideshow onto the correct room type on your Rooms & Rates page. [br]

For Desktop Slideshows: [br] 

This needs to be the iBex room ID, which you can get from going to Search/Maintain Room Types in iBex and the ID for the room will be on the left in red.

desktopSlug

 

 

[br]

For Mobile Slideshow: [br] 

This needs to be the iBex room ID prefixed with ‘mobi’, you can get the ID from going to Search/Maintain Room Types in iBex and the ID for the room will be on the left in red. [br]

mobileSlug

 

 

[br]

You can now click to blue Update button to save the slideshow. You may need to clear your website cache by going to ZenCache from your dashboard menu, and clicking the Clear button. [br]

You can now go to view your Rooms & Rates page, and your slideshow should be showing for the correct room type.

 

Previously you were only able to have one image per room type for these pages, as the photos are coming from your iBex account. However you can now create slideshows for each room type from within your website. [br]

Slideshow instructions have been separated into the same ‘tab’ areas as in the Slideshow Settings. [br]

Images

  • Go to Media / Images > Manage Slideshows from your dashboard menu.
  • Click on the Add New button.
  • Add the name of your new slideshow into the Enter Titkle Here field. We would recommend this to be the room ID from iBex, and if you are creating a slideshow for mobiles then you can name it the room ID – Mobile.
  • You will then need to add in any room images to the slideshow:
    – You can drag images into this area from your computer,
    – Click the Select Files button to upload new images from your computer,
    – Or you can click on the ‘Click Here To Insert Images From Other Sources’ button, which will allow you to select images from your websites media library.
  • Once the images have uploaded you are able to click and drag on the images to rearrange the order if you wish:

orderImages
[br] [br]  [br] [br]  [br]  [br]

  [br]  [br]  [br]

Config

You may experiment with the Config settings if you wish to alter the  slideshow appearance, however for best results we recommend the settings below: [br]

Slider Theme – Header (white) [br]

Slider Dimensions:

  • We recommend 600 x 400 px.[br]

Slider Transition:

  • We recommend Scroll Horizontal. [br]

Slider Transition Duration – 5000 ms. [br]

Slider Transition Speed – 1000 ms. [br]

Slider Position – None. [br]

Slider Gutter – None. [br]

Caption Position – Top. [br]

Caption Transition Delay – 0 ms. [br]

Autostart Slider – We would recommend to have this option unticked, as it could look quite ‘busy’ on the page having all slideshows auto scrolling. [br]

Show Slider Arrows – We recommend to have this option ticked for Room Slideshows, and Unticked for Property Directory Slideshows [br]

Show Slider Control Nav – Leave this option unticked [br]

Show Pause/Play Controls – Leave this option unticked [br]

Pause On Hover – Leave this option unticked [br]

Pause On Navigation – Tick this option. [br]

Enable Mousewheel Navigation – Leave this option unticked [br]

Loop Slider – Leave this option ticked [br]

Randomize Slider – Leave this option unticked [br]

Enable Keyboard Navigation – Leave this option ticked [br]

Use CSS Transitions – Leave this option ticked [br]

Use Adaptive Height – Leave this option ticked [br]

Set Dimentions On Images – Leave this option unticked [br]

Crop Images In Slider – Leave this option ticked [br]

Slider Delay – 0 ms. [br]

Start On Slide – Set as 0. [br]

ARIA Live Value – Polite. [br]

Mobile

Follow the settings below:

Screen Shot 2015-08-31 at 7.04.26 AM

 

Lightbox

We recommend the settings below for your slider lightbox:

Enable Lightbox – Tick this option. [br]

Lightbox Theme – Base. [br]

Lightbox Title Position – Over. [br]

Enable Lightbox Arrows – Tick this option. [br]

Enable Keyboard Navigation – Tick this option. [br]

Enable Mousewheel Navigation – Leave this option unticked. [br]

Keep Aspect Ratio – Tick this option. [br]

Loop Lightbox Navigation – Tick this option. [br]

Lightbox Transition Effect – Fade. [br]

Load Videos In Lightbox – Tick this option. [br]

Enable Lightbox Thumbnails – Leave this unticked. [br]

Lightbox Thumbnails Width – 75 px. [br]

Lightbox Thumbnails Height – 50 px. [br]

Lightbox Thumbnails Position – Bottom. [br]

Thumbnails

Follow the settings below for Property Directory Slideshows, and leave all unticked for Rooms Slideshows for best results: [br]

Screen Shot 2015-08-31 at 7.14.57 AM

 

 

Misc

The only option you will need to change here is to amend the Slider Slug. This is what will automatically set this slideshow onto the correct room/property. [br]

For Property Directory Slideshows: [br] 

This needs to be the iBex property ID prefixed with ‘prop’. You can get the property ID from going to Search/Maintain Properties in iBex, slect the property and the ID for the property will be at the top of the page.

Screen Shot 2015-08-31 at 7.19.39 AM

For Room Slideshows

This needs to be the iBex room ID prefixed with ‘room’. You can get the room ID from going to Search/Maintain Room Types in iBex and the ID for the room will be on the left in red. [br]

Screen Shot 2015-08-31 at 7.19.51 AM

 

You can now click to blue Update button to save the slideshow. You may need to clear your website cache by going to ZenCache from your dashboard menu, and clicking the Clear button. [br]

You can now go to view your Property Directory pages, and your slideshow should be showing for the correct room/property type.