I have read the installation instructions but it still seems a little vague. Can anyone please help explain the process to setting this up?
Regards
DS
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
So far I have added this to my header:
<!-- jQuery library (served from Google) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- bxSlider Javascript file --><script src="/assets/js/bxslider/jquery.bxslider.min.js"></script><!-- bxSlider CSS file --><link href="/assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />
I then added the following html:
<ul class="bxslider">
<li><img src="/assets/images/730_200/tree_root.jpg" title="Funky roots" /></li>
<li><img src="/assets/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
<li><img src="/assets/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
I uploaded the 2 js files to assets/js folders and added the two images to assets/images folder as per the css. It's step 3 I don't understand. How do I make the call and where do I put it?
Step 3: Call the bxSliderCall .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!$(document).ready(function(){ $('.bxslider').bxSlider();});
Regards,
DS
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
Thanks Shonna. I downloaded the full document, but it did not state how/where to upload other than the php files. But at least one (manifest.php) and 2 vehicle files are not uploaded anywhere, I figured they were only neede for the download process?
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
Your CSS file is not where you are referencing it: href="/assets/css/bxslider/jquery.bxslider.css"
Try it: sub.domain.com/assets/css/bxslider/jquery.bxslider.css
Obviously changing "sub.domain.com" for the real url
Well something seems to not be working....I have a basic template to work to as was testing the slider, here is the full code anyway:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="[[*meta-keywords]]" />
<meta name="description" content="[[*meta-description]]" />
<title>[[*pagetitle]]</title>
<style type="text/css" media="all">
@import url("[[++base_url]]assets/templates/Pawsforwildlife/css/layout.css");
</style>
[[*Pawsforwildlife-css]]
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[[++site_url]][[~16]]" />
[[*Pawsforwildlife-js]]
<base href="[[!++site_url]]" />
<!-- jQuery library (served from Google) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- bxSlider Javascript file --><script src="/assets/js/bxslider/jquery.bxslider.min.js"></script><!-- bxSlider CSS file --><link href="/assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxslider();
});
</script>
</head>
<body>
<div id="wrapper">
[[$Pawsforwildlife-banner]]
[[$Pawsforwildlife-navigation]]
<ul class="bxslider">
<li><img src="/assets/images/Eulemur-mongoz---male-(7).jpg" title="Funky roots" /></li>
<li><img src="/assets/images/Eulemur-mongoz---male-(7).jpg" title="The long and winding road" /></li>
<li><img src="/assets/images/Eulemur-mongoz---male-(7).jpg" title="Happy trees" /></li>
</ul>
<div id="content">
[[*content]]
</div>
[[$Pawsforwildlife-footer]]
</div>
</body>
</html>
If anyone can spot any daft errors please let me know as I can't get the slider working (I am aware all images are the same). It just shows the three images one on top the other? (verticallt aligned)
Regards,
DS
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
Will that be the same for all the images, etc?
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
You don't need the "/" before assets - you are using the base href tag
You are cross mixing HTML5 with XHTML - HTML5 is not downwards compatible
<!-- jQuery library (served from Google) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- bxSlider Javascript file --><script src="revolution.pawsforwildlife.co.uk/assets/js/bxslider/jquery.bxslider.min.js"></script><!-- bxSlider CSS file --><link href="revolution.pawsforwildlife.co.uk/assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxslider();
});
</script>
Have just amended my code to this, still no change. I have little to no knowledge of JS so appreciate the help
DS
www.PawsForWildlife.co.uk
www.Borntobrick.co.uk
