Hello,
I'm trying to implement an image slider into SilverStripe.
I'm using http://malsup.com/jquery/cycle/ .
I've searched through this forum, but couldn't find the right answer.
I've used this as a basic example for me to kickstart.
So in my themes/blackcandy/templates/Page.ss I've added this to the <head></head>:
<script type="text/javascript" src="/themes/blackcandy/js/jquery.js"></script>
<script type="text/javascript" src="/themes/blackcandy/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
Then in the body:
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
Then in the themes/blackcandy/css/layout.css
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
Now what it does, it shows me the picture as in the example, but it doesn't do anything. Just shows one image and stays with it without changing. What the problem could be? This is very weird.