Jump to content

Placing jQuery Cycle Plugin into CSS


StaticElectricityMan

Recommended Posts

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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,
   });
});

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...