Placing jQuery Cycle Plugin into CSS

[StaticElectricityMan]

Kind of a generic question...I have a plugin that falkencreative recommended (and works great, btw) to cycle images on a website. Right now, I have the "coding" on each individual html file. I should be able to put this into my CSS sheet, right? I can't seem to get it to work/load properly when I put it into the CSS sheet.

 

This is what I'm using on each individual html file and what I'd like to just put into my master CSS:

 

 

When I remove the "style" portions of the code, it starts to stack the images but the script never runs properly. I'm still a noob at this, so go easy please. I'm trying to be a responsible CSS'er

[falkencreative]

You should just be able to put this section into your CSS file:

 

.bandal { 
float:left;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
height: 225px; width: 362px;

}
.bandal img { padding: 0; border: 0; background-color: #1A82B7; }

 

Everything else (javascript includes) you can leave alone, and the empty "" you can just delete.

 

Were you maybe including "" within your CSS file? That could cause it not to work correctly.

[StaticElectricityMan]

I had removed the

Edited February 24, 2010 by StaticElectricityMan

[virtual]

Maybe you didn't understand what Ben meant, the Script sections must stay in the html file NOT in the css file.

[StaticElectricityMan]

Virtual, thanks...that makes sense, and it works now. I was just trying to cut down on some time/text. I was hoping to put the script functions for fade speed, type, etc in the CSS for a global way to change everything, but it looks like I'll have to do that per page.

[Susie]

Are you planning to have different effects on each page or will all your slideshows have the same fade type, speed, etc.? Regardless, you should put that info in the

section of your page.

[StaticElectricityMan]

I have various "slideshows", sometimes multiple per page, but each type is standardized for all the effects, speeds, etc.

[falkencreative]

I have various "slideshows", sometimes multiple per page, but each type is standardized for all the effects, speeds, etc.

 

You could put this section of code within a .js file, and simply include that file instead.

 

$(document).ready(function() {
   $('.bandal').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
       speed: 2000,
   });
});

 

Then, for example, you could add to the file like so for each of the different pages:

 

$(document).ready(function() {
   // page 1
   $('.bandal').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
       speed: 2000,
   });

  // page 2
  $('.bandal2').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
       speed: 2000,
   });
});

[StaticElectricityMan]

falkencreative, that way I would have only 1 file for all the various "slideshows" and include just the 1 file per page. Good idea, thanks!

[falkencreative]

falkencreative, that way I would have only 1 file for all the various "slideshows" and include just the 1 file per page. Good idea, thanks!

Basically, yes. Though you'd need three include files total -- the link to jquery, the jquery plugin, and then the .js file that creates all of the slideshows.

[PicnicTutorials]

falkencreative' date=' that way I would have only 1 file for all the various "slideshows" and include just the 1 file per page. Good idea, thanks![/quote']

Basically, yes. Though you'd need three include files total -- the link to jquery, the jquery plugin, and then the .js file that creates all of the slideshows.

 

with my last project I had tons of document readys to fire each js thingy. I just put each document ready it's corrisponding main js file. So, you could just place that document ready at the end of the main script and then you'd only have two componets - the one script and the css.