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.

General Questions

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

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

jQuery Cycle Lite Plugin and SilverStripe


Go to End
Reply

14 Posts   10127 Views

Avatar
squap

7 April 2009 at 10:08pm Community Member, 9 Posts

Hi,

I'm trying to use the [url=http://malsup.com/jquery/cycle/lite/]jQuery Cycle Lite Plugin[/url] 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

8 April 2009 at 7:10am (Last edited: 8 April 2009 7:10am), Community Member, 141 Posts

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

9 April 2009 at 5:17am Community Member, 9 Posts

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

9 April 2009 at 10:31pm Community Member, 9 Posts

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

9 April 2009 at 11:59pm Community Member, 141 Posts

Hmm, strange...

I once had a problem with the [url=http://jquery.com/demo/thickbox/]jquery thickbox[/url] 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

10 April 2009 at 1:44am Community Member, 9 Posts

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
banal

10 April 2009 at 1:58am Community Member, 901 Posts

Hm. Try the following, just for testing:

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

Avatar
squap

10 April 2009 at 2:53am Community Member, 9 Posts

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

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

Go to Top