Skip to main content

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

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

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 Cycle Lite Plugin and SilverStripe


Go to End


14 Posts   11986 Views

Avatar
squap

Community Member, 9 Posts

7 April 2009 at 10:08pm

Hi,

I'm trying to use the jQuery Cycle Lite Plugin in SilverStripe.
I'm going to describe the steps I took. Maybe someone can tell me what I missed.

1. put jquery.cycle.lite.js and jquery-1.3.2.js in mysite/javascript
2.

		Requirements::javascript("mysite/javascript/jquery-1.3.2.js"); 
		Requirements::javascript("mysite/javascript/jquery.cycle.lite.js"); 

in Page_Controller
3. in Page.ss put
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow1').cycle();
});
</script>

in the Header
4. in the Body:
	<div id="slideshow1" class="pics">
	<img style="display: block; z-index: 3; opacity: 1;" src="themes/BrightSide1/images/madrid1.jpg" width="820" height="120" />
	<img style="display: none; z-index: 2; opacity: 0;"src="themes/BrightSide1/images/madrid2.jpg" width="820" height="120" />
	<img style="display: none; z-index: 1; opacity: 0;"src="themes/BrightSide1/images/madrid3.jpg" width="820" height="120" />
	</div>

As a result the first picture is shown, but the images are not "cycled".

Thanks.

Avatar
Invader_Zim

Community Member, 141 Posts

8 April 2009 at 7:10am

Edited: 08/04/2009 7:10am

Hi,

i think you are including your scripts twice.

If you use Requirements::... in your Page_Controller, it's imho unnecessary to include jquery-1.3.2.js and jquery.cycle.lite.js in Page.ss again.

Maybe that's the problem...

Cheers,
Christian

Avatar
squap

Community Member, 9 Posts

9 April 2009 at 5:17am

Thanks for the answer, but that was not it.

I tried using the Requirements:: in Page_Controller OR included them in Page.ss head, but it still doesn't work.

Any other suggestions ?

If I try it without SilverStripe in an isolated HTML file it works fine ...

Avatar
squap

Community Member, 9 Posts

9 April 2009 at 10:31pm

So I let it run through Firebug and it looks as if all the "imports" work fine and it fails to find :

<div id="slideshow"

Firebug says:
$("#slideshow") is null
http://localhost/silverstripe/?flush=1
Line 8

That is weird because I do exactly the same as in an isolated HTML file ...

Here is my Page.ss : http://pastebin.com/m4c06e28e
Here is the working HTML : http://pastebin.com/m11de72ec

Hopefully someone sees what I'm missing ...

Avatar
Invader_Zim

Community Member, 141 Posts

9 April 2009 at 11:59pm

Hmm, strange...

I once had a problem with the jquery thickbox plugin.
It worked on a static site, but not in SilverStripe (SS v 2.2.3) with exactly the same code.

Then somebody told me to blame the ContentNegotiator and to disable it by adding ContentNegotiator::disable(); to mysite/_config.php, and everything was ok...

Cheers,
Christian

Avatar
squap

Community Member, 9 Posts

10 April 2009 at 1:44am

Thanks, but it still doesn't work. I tried both ContentNegotiator::disable(); and ContentNegotiator::enable();

I am still getting :

$("#slideshow") is null 

although it definitely exists.

Avatar
bummzack

Community Member, 904 Posts

10 April 2009 at 1:58am

Hm. Try the following, just for testing:

jQuery(document).ready(function () {
    jQuery('#slideshow').cycle();
});

Avatar
squap

Community Member, 9 Posts

10 April 2009 at 2:53am

Thanks very much, that was it !
Why does it not work like this ? (just being curious):

$(function() {
$('#slideshow1').cycle();
}); 

Go to Top