jQuery plugin won't run properly

Question

I'm designing a webpage and I'm using a jQuery Cycle code. Thing is, there are three I want the code to run in, but it just runs with one, while the others are like they weren't "programmed for that". I don't know what I'm doing wrong. I'm also using the same text in the three info boxes and will change them once the code's working.

Here's my HTML:

<div class="body"><!--BODY BEGINS-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript">
$('#slideshow').cycle ({ timeout: 7000, cleartype: 1, speed: 400 });

</script>


<div class="promobod"><!--PROMOBOD BEGINS-->
<div id="slideshow">
<div>

    <div class="promtext">Praga y Budapest</div>
    <div class="precioth">$575
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>3 visitas</p></div>
   <div class="disclaimer">Duración de 11 días.</div>
</div>

<div>
    <div class="promtext">Italia Espectacular</div>
    <div class="precioth">$915
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>Visitas Panorámicas, 2 comidas</p></div> 
<div class="disclaimer">Duración de 8 días.</div>
</div>
</div><!--END OF PROMOBOD-->


<div class="promobod2"><!--PROMOBOD BEGINS-->
<div id="slideshow">
<div>

    <div class="promtext">Praga y Budapest</div>
    <div class="precioth">$575
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>3 visitas</p></div>
   <div class="disclaimer">Duración de 11 días.</div>
</div>

<div>
    <div class="promtext">Italia Espectacular</div>
    <div class="precioth">$915
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>Visitas Panorámicas, 2 comidas</p></div> 
<div class="disclaimer">Duración de 8 días.</div>
</div>
</div><!--END OF PROMOBOD-->




  <div class="promobod3"><!--BEGINS PROMOBOD3-->
<div id="slideshow">
<div>

    <div class="promtext">Praga y Budapest</div>
    <div class="precioth">$575
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>3 visitas</p></div>
   <div class="disclaimer">Duración de 11 días.</div>
</div>

<div>
    <div class="promtext">Italia Espectacular</div>
    <div class="precioth">$915
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>Visitas Panorámicas, 2 comidas</p></div> 
<div class="disclaimer">Duración de 8 días.</div>
</div>



  </div><!--END OF PROMOBOD3-->


</div></div></div>
</div>
</div><!--END OF BODY-->

And my CSS:

.body{
    height: 515px;
    width: 1050px;
    margin: auto;
}

.promobod{
    width: 308px;
    height: 276px;
    position: absolute;
    left: 179px;
    top: 427px;
    background-image: url(../etc/info%20bar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.promobod2{
    width: 308px;
    height: 276px;
    position: absolute;
    left: 341px;
    top: 0px;
    background-image: url(../etc/info%20bar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.promobod3{
    width: 308px;
    height: 276px;
    position: absolute;
    left: 337px;
    top: 0px;
    background-image: url(../etc/info%20bar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.promtext{
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    font-family: "Microsoft PhagsPa";
    position: absolute;
    left: 0px;
    top: 14px;
    width: 308px;
}

.precio{
    text-align: center;
    font-family: "Microsoft PhagsPa";
    font-size: 95pt;
    font-weight: bold;
    margin-top: -25px;
    letter-spacing: -15px;
    margin-right: 10px;
    margin-left: 10px;
    float: left;    
}

.cents{
    text-align: right;
    font-family: "Microsoft PhagsPa";
    font-weight: bold;
    margin-top: 10px;
    font-size: 30pt;
    position: absolute;
    height: 63px;
    left: 244px;
    top: 21px;
    width: 36px;
    letter-spacing: -2px;
}

.USD{
    text-align: right;
    font-family: "Microsoft PhagsPa";
    font-weight: bold;
    margin-top: 10px;
    font-size: 21pt;
    position: absolute;
    height: 63px;
    left: 248px;
    top: 82px;
    width: 36px;
    letter-spacing: -2px;
}



.promodet{
    text-align: center;
    font-size: 10pt;
    position: absolute;
    left: -1px;
    top: 180px;
    height: 76px;
    line-height: 3px;
    width: 309px;
}

.disclaimer{
    position: absolute;
    left: -1px;
    top: 238px;
    font-size: 8pt;
    text-align: center;
    width: 310px;
    height: 26px;
}


.precioth{
    text-align: center;
    font-family: "Microsoft PhagsPa";
    font-size: 95pt;
    font-weight: bold;
    letter-spacing: -15px;
    float: left;
    position: absolute;
    left: 5px;
    top: 23px;
}

I greatly appreciate your help and forgive my English.

Answer 1

You are including jQuery 1.5, but the notes on the cycle library state "The Cycle Plugin is supported on jQuery v1.7.1 and later." You really should update to a newer version of jQuery -- 1.5 is about 2 years old.

The div for each slideshow should be closed before the next promobod begins; you're closing them AFTER what you have identified as the final closing promobod-tag. Your indendation and spacing hide some of this -- you might want to run the code through either a beautifier, or an IDE that does some formatting/cleanup. That can help reveal errors of this kind. (Once I tried to indent the code, I found that the second promobod was a child of the first, due to the unclosed-div. With proper indentation it was visually obvious).

You assign the slideshow to the id "slideshow", but you have multiple elements with that ID.

<div class="promobod"><!--PROMOBOD BEGINS-->
<div id="slideshow">
[....]
<div class="promobod2"><!--PROMOBOD BEGINS-->
<div id="slideshow">
[....]
<div class="promobod3"><!--BEGINS PROMOBOD3-->
<div id="slideshow">
[...]

ID can be used for only one element; the subsequent uses are ignored (as they are invalid). So only the first "#slideshow" is affected.

How about changing those to a class, instead of an ID?

$('.slideshow').cycle ({ timeout: 7000, cleartype: 1, speed: 400 });

<div class="promobod"><!--PROMOBOD BEGINS-->
<div class="slideshow">
[....[
<div class="promobod2"><!--PROMOBOD BEGINS-->
<div class="slideshow">
[....]
<div class="promobod3"><!--BEGINS PROMOBOD3-->
<div class="slideshow">

I've thrown this into a jsfiddle -- al[though, really, you should have done so earlier. With a 500-ms timeout, I can see the slideshows transitioning more rapidly. The css seems off, but I'm not digging into the css. There are enough other issues to deal with.