Difference between revisions of "Add a Picture Slider to the Booking Page"
| Line 34: | Line 34: | ||
*Step 2 | *Step 2 | ||
| − | Copy the following HTML to the position you want the slider to appear. It can be any HTML content setting area for the booking page. If you want to add the slider in the header go to SETTINGS->BOOKING PAGE->PAGE DESIGN "Header" if you want to add a slider to the room descriptions go to SETTINGS->BOOKING PAGE ->ROOMS. You will need to set the editor to "Source" (click on the icon) and enter the links of the pictures you want to use. | + | Copy the following HTML to the position you want the slider to appear. It can be any HTML content setting area for the booking page. If you want to add the slider in the header go to SETTINGS->BOOKING PAGE->PAGE DESIGN -> CONTENT "Header" if you want to add a slider to the room descriptions go to SETTINGS->BOOKING PAGE ->ROOMS. CONTENT You will need to set the editor to "Source" (click on the icon) and enter the links of the pictures you want to use. |
| Line 67: | Line 67: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| + | </pre> | ||
| + | |||
| + | Step 3 | ||
| + | |||
| + | Add the following code to SETTINGS->BOOKING PAGE->DEVELOPERS "Custom CSS": | ||
| + | |||
| + | <pre> | ||
| + | .flexslider { | ||
| + | z-index: 1; | ||
| + | } | ||
| + | |||
| + | .ui-datepicker table { | ||
| + | z-index: 1000; | ||
| + | } | ||
</pre> | </pre> | ||
Revision as of 16:53, 20 July 2015
This page explains how to add a picture slider to your booking page. To do this you need knowledge of HTML, CSS and Javascript
Requires: Knowledge of HTML, CSS (Javascript)
Add a picture slider to show a gallery of pictures one at a time
The system supports flexslider 2 by http://www.woothemes.com/flexslider/
The pictures can be uploaded to the system using the PICTURES menu or hosted on your own server. Very Important is that they are hosted securely using https: if they are not security warning about insecure content will be shown in the browser.
The slider can be shown in any position of the booking page which allows user HTML content.
Instructions
- Step 1
Copy and save the following script to the "Insert in HTML <HEAD>" setting on the BOOKING PAGE->DEVELOPERS menu.
<link rel="stylesheet" href="include/flexslider/2.0/flexslider.css" />
<script defer src="include/flexslider/2.0/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function(){$('.flexslider').flexslider({directionNav: false});})
</script>
You can change the flexslider javascript options, see http://flexslider.woothemes.com for more information about flexslider
- Step 2
Copy the following HTML to the position you want the slider to appear. It can be any HTML content setting area for the booking page. If you want to add the slider in the header go to SETTINGS->BOOKING PAGE->PAGE DESIGN -> CONTENT "Header" if you want to add a slider to the room descriptions go to SETTINGS->BOOKING PAGE ->ROOMS. CONTENT You will need to set the editor to "Source" (click on the icon) and enter the links of the pictures you want to use.
It is very important to enter the HTML using source mode of the built in editor otherwise the HTML may not save correctly.
Change the SRC value of the IMG tags to the URL of pictures you want to display. If the pictures are hosted with us you will find the URL in the PICTURES menu. You can choose the number and order of the pictures. If the pictures are different sizes you can use WIDTH and HEIGHT settings in the image tags to standardise them.
<div class="flexslider"> <ul class="slides"> <li><img src="" /></li> <li><img src="" /></li> <li><img src="" /></li> </ul> </div>
The pictures will display individually without a slider in the control panel SETTING editor but should now be displaying properly in a slider on your booking page.
The size of your pictures should be optimised to the size of your slider for best performance and fast page loading times. If the picture file sizes are large the booking page will be slower to open.
The default slider still works if it is displayed in a hidden element, for example "offer 1more details" but some slider options may not work and the size of the containing div may need to be specified so the slider can render at the correct size when it opens. For example use something like the following to force a fixed size.
<div class="flexslider" style="width:240px;height:180px"> <ul class="slides"> <li><img src="" /></li> <li><img src="" /></li> <li><img src="" /></li> </ul> </div>
Step 3
Add the following code to SETTINGS->BOOKING PAGE->DEVELOPERS "Custom CSS":
.flexslider {
z-index: 1;
}
.ui-datepicker table {
z-index: 1000;
}
