Difference between revisions of "Add a Picture Slider to the Booking Page"
Jump to navigation
Jump to search
Markkinchin (talk | contribs) (Created page with "Category:How to 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...") |
Markkinchin (talk | contribs) |
||
| Line 15: | Line 15: | ||
*Step 1 | *Step 1 | ||
| − | Copy the following to the "Insert in HTML <HEAD>" setting on the BOOKING PAGE >> ADVANCED menu. | + | 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" /> | <link rel="stylesheet" href="include/flexslider/2.0/flexslider.css" /> | ||
<script defer src="include/flexslider/2.0/jquery.flexslider-min.js"></script> | <script defer src="include/flexslider/2.0/jquery.flexslider-min.js"></script> | ||
| Line 23: | Line 24: | ||
$(window).load(function(){$('.flexslider').flexslider({animation: "slide", start: function(slider){$('body').removeClass('loading');}});}); | $(window).load(function(){$('.flexslider').flexslider({animation: "slide", start: function(slider){$('body').removeClass('loading');}});}); | ||
</script> | </script> | ||
| − | </ | + | </pre> |
| + | |||
You can change the flexslider javascript options, see http://flexslider.woothemes.com for more information about flexslider | You can change the flexslider javascript options, see http://flexslider.woothemes.com for more information about flexslider | ||
Revision as of 21:09, 30 September 2013
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.
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.
<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>
You can change the flexslider javascript options, see http://flexslider.woothemes.com for more information about flexslider
