Jump to content
Stef's Coding Community
StaticElectricityMan

Placing jQuery Cycle Plugin into CSS

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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.

Share this post


Link to post
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...