|
|
| (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.
| |
