8 Replies Latest reply on Mar 10, 2010 8:26 AM by awothers

    Place a continuous slide show in a page

    awothers

      I wish to insert a continuously running slide show in a page. I am very much an amateur so wonder whether there is anything in DW CS4 that can assist in doing this. Thanks, Alan

        • 1. Re: Place a continuous slide show in a page
          osgood_ Level 8

          awothers wrote:

           

          I wish to insert a continuously running slide show in a page. I am very much an amateur so wonder whether there is anything in DW CS4 that can assist in doing this. Thanks, Alan

          Dw CS4 can't do that automatically for you but there are one or two sites out there where you can get the necessary scripts.

           

           

          Is this the kind of effect you want, where the images continuously change:

          http://www.malsup.com/jquery/cycle/basic.html

           

           

          You can read how to achieve the effect here.

          http://www.malsup.com/jquery/cycle/

           

           

          As a brief guide it requires the download of a couple of jquery scripts which you then link to your page. These scripts produce the effects.

          1 person found this helpful
          • 2. Re: Place a continuous slide show in a page
            awothers Level 1

            Thanks for the reply and links. Is there a guide as to how to

            use the cycle plugin - e.g. how/where to place the images; where to place the script of the plugin and how to call up the plugin?

             

            Alan

            • 3. Re: Place a continuous slide show in a page
              osgood_ Level 8

              awothers wrote:

               

              Thanks for the reply and links. Is there a guide as to how to

              use the cycle plugin - e.g. how/where to place the images; where to place the script of the plugin and how to call up the plugin?

               

              Alan

               

               

              First you need to download the jquery ‘Cycle Plugin’. There is a download link at the top left of the following page link:

               

              http://www.malsup.com/jquery/cycle/

               

              Next insert a <div> container into your page in Dreamweaver, give it an ‘id’ of ‘’slideshow’ and insert your images into the <div> (as below). It doesn’t matter what the images are named as.

               

              <div id=”slideshow”>
              i<img src=”images/one.jpg” width=”400” height=”400” alt=”“>
              <img src=”images/two.jpg” width=”400” height=”400” alt=”“>
              <img src=”images/three.jpg” width=”400” height=”400” alt=”“>
              <img src=”images/four.jpg” width=”400” height=”400” alt=”“>
              <img src=”images/five.jpg” width=”400” height=”400” alt=”“>
              <img src=”images/six.jpg” width=”400” height=”400” alt=”“>
              </div>

               

              Next link to your page the ‘jquery.cycle.all.2.72.js’ file which will be amongst those which were downloaded.
              .
              It’s best to create another folder within your site folder and name it ‘jquery’. Drag or copy the ‘‘jquery.cycle.all.2.72.js’  into it.

               

              Now link it to the page. Switch to code view in Dreamweaver, copy the line of code below from <script type=........to..........</script> and paste it directly before the closing </head> tag, which will be near to the top of the page.

               

              <script type="text/javascript" src="jquery/jquery.cycle.all.2.72.js"></script>

               

              Next copy the code below and paste that into your page after the link to the script above and before the closing </head> tag.

               

              <script type="text/javascript">
              $(document).ready(function() {
                  $('.slideshow').cycle({
                      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                  });
              });
              </script>

               

              Finally copy the code below and paste it into your page above the link to the first script.

               

              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

              • 4. Re: Place a continuous slide show in a page
                awothers Level 1

                Thanks. I have tried to follow your instructions but I think Ihave done something wrong. The contents of the code for the page follows:

                 















                $(document).ready(function() {


                $('.slideshow').cycle({


                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...


                });


                });






                 


                 


                i!”siteimages/one.jpg” width=”400” height=”400” alt=”“!


                ”“

                 

                 

                ”“

                 

                ”“








                 

                 

                Notes:

                1. The file I downloaded was named jquery.cycle.all.min.js so I changed the code you sent me.

                2. After I entered the script <div id="slideshow" ... I linked each icon on the page to the images (my images are in siteimages folder).

                3. I think I may have some of the code in the wrong place??

                 

                Thanks for your continuing help.

                 

                Alan

                • 5. Re: Place a continuous slide show in a page
                  osgood_ Level 8

                  awothers wrote:

                   

                  Thanks. I have tried to follow your instructions but I think Ihave done something wrong. The contents of the code for the page follows:

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                  $(document).ready(function() {


                  $('.slideshow').cycle({


                  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...


                  });


                  });

                   

                   

                   

                   

                   

                   

                   

                   


                  i!”siteimages/one.jpg” width=”400” height=”400” alt=”“!

                   

                  ”“

                   

                   

                  ”“

                   

                  ”“

                   

                   

                   

                   

                   

                   

                   

                   

                   

                  Notes:

                  1. The file I downloaded was named jquery.cycle.all.min.js so I changed the code you sent me.

                  2. After I entered the script <div id="slideshow" ... I linked each icon on the page to the images (my images are in siteimages folder).

                  3. I think I may have some of the code in the wrong place??

                   

                  Thanks for your continuing help.

                   

                  Alan

                  Your page code should look like below: assuming your images are in a folder in your site folder called 'siteimages' Also assuming they are named one.jpg, two.jpg, three.jpg etc. They dont have to be named one, two, three. You can call them something more descriptive if you want.

                   

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml">

                  <head>

                  <title>JQuery Cycle Plugin - Example Slideshow</title>

                  <style type="text/css">

                  .slideshow {

                  width: 400px;

                  height: 400px;

                  margin: 0 auto;

                  }

                  </style>

                  <!-- include jQuery library -->

                  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

                  <!-- include Cycle plugin -->

                  <script type="text/javascript" src="jquery.cycle.min.js"></script>

                  <!--  initialize the slideshow when the DOM is ready -->

                  <script type="text/javascript">

                  $(document).ready(function() {

                  $('.slideshow').cycle({

                  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

                  });

                  });

                  </script>

                  </head>

                  <body>

                  <div class="slideshow">

                  <img src="siteimages/one.jpg" width="400" height="400" alt"" />

                  <img src="siteimages/two.jpg" width="400" height="400" alt"" />

                  <img src="siteimages/three.jpg" width="400" height="400" alt"" />

                  </div>

                  </body>

                  </html>

                  • 6. Re: Place a continuous slide show in a page
                    awothers Level 1

                    Thanks very much - I have got it working. Just two more questions:

                     

                    1. How do I change the length of time each slide is on the screen?

                    2. Can I set such a slide show up where the visitor to the site can click on right or left arrows to proceed through the slideshow?

                     

                    Thanks again.

                     

                    Alan

                    • 7. Re: Place a continuous slide show in a page
                      osgood_ Level 8

                      awothers wrote:

                       

                      Thanks very much - I have got it working. Just two more questions:

                       

                      1. How do I change the length of time each slide is on the screen?


                      Add 'speed' and 'timeout' to the script in the head section of the page (as shown below) and play around with values 1000, 2000, 3000 etc.

                       

                      <script type="text/javascript">

                       

                      $(document).ready(function() {

                       

                      $('.slideshow').cycle({

                       

                      fx: 'fade',

                       

                      speed: 1000,

                       

                      timeout: 1000

                       

                      });

                       

                      });

                       

                      </script>

                       

                      awothers wrote:

                       


                      2. Can I set such a slide show up where the visitor to the site can click on right or left arrows to proceed through the slideshow?

                       


                      Yup, if you know your way around and are prepared to dig into the code: Take a look at the examples on this page:

                       

                      http://sorgalla.com/jcarousel/

                      1 person found this helpful
                      • 8. Re: Place a continuous slide show in a page
                        awothers Level 1

                        Thanks very much. I have changed the timing of teh slide show and will poke into the other site you suggested. Alan