[jQuery] mediocre css skills combined with noob to jquery and .cycle

[Nate Heldman]

so, i found this while looking for a non-flash method of doing
hyperlinked slideshows for our website.

i have gotten the basic function to work, but i'm having some issues
with setting this up the way i'd like to.  because we will eventually
have more than one slideshow on certain pages, i made slideshow a
class thinking we could call versions of the class and name them for
the various shows.  e.g. .slideshow.wedding
and .slideshow.churchinstall, etc.

i'm having two issues.  i could not seem to make that work, first of
all.  second, i cannot figure out how to pass the various code like
timeout/delay/etc for each specific slideshow.

for now i have dumbed myself down as much as possible and have one
slideshow.  our site is through Volusion, which may have something to
do with it.  they give us a template page inside which all other pages
fall.

here's the code i have in the head section:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/
malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp,
shuffle, etc...
        });
});
</script>

i also call the .css file here.


here's the code from the page:

<h3>test</h3>

        <div class="slideshow">
                <a 
href="http://www.midweststereo.com/Roland_Shoulder_Synthesizer_p/
roland-ax-synth.htm"><img src="/v/vspfiles/assets/images/
axsynth_2.jpg"></a>
                <a href="http://www.midweststereo.com/Amplifiers_s/75.htm";><img
src="/v/vspfiles/assets/images/amps_man.jpg"/></a>
                <a href="http://www.midweststereo.com/
Pioneer_Professional_Multimedia_Player_p/pioneer-mep-7000.htm"<img
src="/v/vspfiles/assets/images/mep7000-2.jpg"/></a>
                <a 
href="http://www.midweststereo.com/Samson_Portable_PA_System_p/
samson-xp308i.htm"><img src="/v/vspfiles/assets/images/
samson_revised.jpg"/></a>
        </div>



here's the .css code:

.slideshow {

     height: 22px;
     width: 575px;
     padding: 0px;
     margin: 0px;
}

.slideshow img {

     padding: 0px;
     border: none;
     background-color: #ffffff;
     width: 575px;
     height:  225px;
     top: 0px;
     left: 0px;
}


and here's the url to the test page.

https://www.midweststereo.com/Articles.asp?ID=170


i am getting the .slideshow img section to work.  i can play with it
and it does whatever i do.  however, if i make any adjustments to
the .slideshow section it doesn't seem to do anything.

and i guess my big question regarding the timing for fadeout, etc
is...can i put that into the .css file so that i can have different
parameters for each slideshow?  or is there a way to put that in the
html code?  and how do i pass that info?  i'm reading like crazy,
found this google group, and am still out on the web looking for
answers.  i greatly appreciate any help.

sorry for the sort of long post.