Because our software provides access to both the <head> and <body> sections of the code on both a page-specific basis and site-wide basis, you have a lot of flexibility with what you can do. This tutorial will show you how to implement a typical jquery plugin such as this Owl Carousel using Amazon S3.
As per our support instructions, we cannot troubleshoot custom code, so only experienced web developers should attempt to set this up.
1. In your Amazon S3 account, create a bucket that you will use for this purpose. We named ours "asf-assets-example". As with any new bucket, you will need to add a bucket policy in the Properties section so that the files are publicly accessible. It should look something like this:
{
"Version": "2008-10-17",
"Id": "Policy1372452730098",
"Statement": [
{
"Sid": "Stmt1372452721393",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:*",
"Resource": "arn:aws:s3:::asf-assets-example/*"
}
]
}
NOTE: You will need to change the highlighted part to your bucket name.
You may also need to add "Everyone" as a Grantee in the PERMISSIONS section.
If for any reason your files are expiring or are not publicly available, there may be some other things you need to do, so you'll need to review Amazon S3's documentation or contact their support.
2. Within that bucket, create a folder which will contain your plugin. In our example case, we'll call ours "jquery-plugins". We gave this a general name as this might be where we house all of our jquery plugins.
3. Unzip the plugin folder, and upload the entire "owl-carousel" folder. Not the contents of the folder, but the folder itself and all its contents. As you will see later, this folder name is being called within the HTML, so it is necessary to have it in place.
4. Now, within the site manager, add a new Standard Page (or, edit the existing page you would like to implement this on). You should now be on the screen where you are editing the page.
5. On the SCRIPTS tab, enter in the proper js code into the <head> section as per the plugin's instructions, and dont forget to update the reference URL's (we updated ours as seen in the highlighted areas below). Note that we don't need to install jQuery, because jQuery is already installed, as specified in our Information for Developers. In our case, this is:
<!-- Basic stylesheet -->
<link rel="stylesheet" href="https://s3.amazonaws.com/asf-assets-example/owl-carousel-plugin/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="https://s3.amazonaws.com/asf-assets-example/owl-carousel-plugin/owl-carousel/owl.theme.css">
<!-- Include js plugin -->
<script src="https://s3.amazonaws.com/asf-assets-example/owl-carousel-plugin/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel();
});
</script>
6. Then, on the CONTENT tab, go ahead and edit the source of the WYSIWYG Editor, and enter in your html code. In our case, this is:
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
7. Click SAVE. You should see the plugin working.