21295 Posts in 5734 Topics by 2602 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 5751 Views |
-
JQuery and Cycle for Carousel image slider
18 February 2010 at 2:43am
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.
-
Re: JQuery and Cycle for Carousel image slider
18 February 2010 at 3:05am
Sorted.
It didn't work, because the div object had to have id property and fade set to #id property as well rather than class just in case someone else will have same problem in the future. Though I don't know why it didn't work when example works fine. -
Re: JQuery and Cycle for Carousel image slider
18 February 2010 at 4:29pm
think Jquery selector can aslo select the div class name. i have been used class name for quite long time, but havent met the problem before. you may try use $(".slideshow"), see if it still doesnt work?!
-
Re: JQuery and Cycle for Carousel image slider
25 June 2010 at 1:48pm Last edited: 25 June 2010 2:54pm
Hi Vladas,
I have tried the same jquery fade as you have below and I'm also getting the same problem you did. I am unsure of your solution, could you please post the code that you changed to make it work.
i have tried changing the <div class="slideshow"> to <div id="slideshow"> as well as
$("#slideshow").cycle({ plus the css, but this has not fixed anything.SOLVED
found a solution here http://silverstripe.org/general-questions/show/257964?showPost=287140Cheers,
Rob
| 5751 Views | ||
|
Page:
1
|
Go to Top |
