|
|
| (20 intermediate revisions by 2 users not shown) |
| Line 2: |
Line 2: |
| [[Category:Booking Page]] | | [[Category:Booking Page]] |
|
| |
|
| '''Add a picture slider to show a gallery of pictures one at a time'''
| |
|
| |
|
| Beds24 supports flexslider 2 by http://www.woothemes.com/
| |
|
| |
|
| The pictures can be uploaded to Beds24 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.
| | Note: This function in built into the responsive version of the booking page. Please see these [[Responsive_Booking_Page|instructions]]. |
| | |
| 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 >> ADVANCED menu.
| |
| | |
| | |
| <pre>
| |
| <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({animation: "slide", start: function(slider){$('body').removeClass('loading');}});});
| |
| </script>
| |
| </pre>
| |
| | |
| | |
| You can change the flexslider javascript options, see http://flexslider.woothemes.com for more information about flexslider
| |