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   10377 Views

Avatar
squap

Community Member, 9 Posts

7 April 2009 at 10:08pm

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

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 [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

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
banal

Community Member, 901 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