This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

JQuery and Cycle for Carousel image slider

4 Posts 9860 Views

Vladas

Community Member, 17 Posts

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.

Vladas

Community Member, 17 Posts

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.

SSadmin

Community Member, 90 Posts

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?!

Chip Designs

Community Member, 15 Posts

25 June 2010 at 1:48pm

Edited: 25/06/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=287140

Cheers,
Rob

Return to top