|
|
| (18 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/flexslider/
| |
|
| |
|
| 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
| |
| | |
| | |
| *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.
| |
| | |
| 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 at Beds24 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.
| |
| | |
| <pre>
| |
| <div class="flexslider">
| |
| <ul class="slides">
| |
| <li><img src="" /></li>
| |
| <li><img src="" /></li>
| |
| <li><img src="" /></li>
| |
| </ul>
| |
| </div>
| |
| </pre>
| |
| | |
| 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.
| |