9 Replies Latest reply: May 25, 2013 2:27 PM by Nancy O. RSS

    Slide Show

    stanberk

      I forgot how to create a slide show using Dreamweaver alone. I remember using "insert media" and editing the swf file in the "flash elements" panel but that panel seems to be gone.

       

      stan@stangraphics.com

        • 1. Re: Slide Show
          Ken Binney CommunityMVP

          Hi Stan -

           

          Flash-based slideshows have been pretty much left in the past, as most popular hand held devices can't view Flash.

           

          There are a bunch of great slideshow techniques using Javascript tools like JQuery.

          • 2. Re: Slide Show
            Nancy O. CommunityMVP

            That feature was deprecated from DW quite a while ago (CS3 I think).  As Ken said, jQuery is a better option because, unlike Flash, it works in all modern web devices.

             

            jQuery Plugins

             

            Cycle 2

            http://jquery.malsup.com/cycle2/

             

            Fancybox

            http://fancybox.net/

             

            Wow slider

            http://wowslider.com/

             

            Primer for using jQuery Plugins

            http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html

             

             

            Nancy O.

            • 3. Re: Slide Show
              mhollis55 Community Member

              First of all, Don't put your email address in your question. It will invite tons of spam.

               

              Second, Ken is absolutely correct. You could create a wonderful slide show using Dreamweaver CS3 and I would never be able to see it on my iPad or my iPhone. And many of the Android devices that have Flash do such a horrid job of displaying it that it is not worthwhile.

               

              Flash is on its way out, so if you plan to have the website up for more than a year or two, you might as well get started with a decent jQuery slide show.

               

              Here is one that is simple and easy to use.You can download the plugin from the website, but that means you'll need jQuery. You can download the latest version of jQuery from the jQuery website. I recommend that you use version 1.9 and not 2.0 as 2.0 does away with support of Internet Exploder versions 7, 8 and 9, which might be a problem for you.

               

              I generally put jQuery and other JavaScript plugins for it, as well as large amounts of JavaScript code into their own folder in my defined website that I call /js.

               

              So, in your <head> area, you'll need to call jQuery and then the library thusly:

               

              <script type="text/javascript" src="js/jquery19.js"></script> // this is jQuery 1.9, which works with most browsers.

              <script type="text/javascript" src="js/cycle.js"></script> // assumes you are using the cycle plugin

               

              Now, if you are going to use Mr. Alsup's Cycle plugin, the code is on one of his example pages, but I'm going to lay it all out for you here, assuming you just want to use the fade transition type:

               

              Again, in your <head> area, do this:

               

              <script type="text/javascript">

              $(document).ready(function() {

                  $('#slide').cycle({

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

                        });

              });

              </script>

               

              Now, you need to define a div ID called slide and that can be very simple in your CSS:

               

              #slide{

                   background-image:url("../images/slide/slide01.jpg");

                   height: 200px;

              }

               

              This assumes the height of your images is 200 pixels. You want to define your div with the height of your images you want to have in your slide show.

               

              Now, in our HTML document, we create the div and then we put the slides in it:

               

              <div id="slide">

                <img src="images/slide/slide01.jpg" />

                <img src="images/slide/slide02.jpg" />

                <img src="images/slide/slide03.jpg" />

                </div><!--end Slide -->

               

              There you are, all set.

               

              This means you're going to have to write some code that Adobe wrote for you in Dreamweaver CS3. But if you do it a few times, you'll find it's pretty easy.

               

              -Mark

              • 4. Re: Slide Show
                Nancy O. CommunityMVP

                Mark,

                Have you tried Cycle2 yet?  It's superb.  I highly recommend it.

                http://jquery.malsup.com/cycle2/ 

                • 5. Re: Slide Show
                  mhollis55 Community Member

                  I thought that was what I was pointing him to.

                   

                  Frankly, for the last project I used Cycle-Lite, which is a lot less code than the full version. Same author, did he fork a new version?

                  • 6. Re: Slide Show
                    Nancy O. CommunityMVP

                    Mr. Alsup introduced Cycle 2 about 6 months ago.  The main difference between the old Cycle and Cycle2 is you can invoke it with HTML instead of JavaScript. 

                     

                    <div class="cycle-slideshow"

                        data-cycle-fx="scrollHorz"

                        data-cycle-pause-on-hover="true"

                        data-cycle-speed="200"

                        >

                        <img src="http://malsup.github.com/images/p1.jpg">

                        <img src="http://malsup.github.com/images/p2.jpg">

                        <img src="http://malsup.github.com/images/p3.jpg">

                        <img src="http://malsup.github.com/images/p4.jpg">

                    </div>

                     

                    Out of the box, Cycle2 is Responsive and supports pre-loaders, prev & next buttons, carousels, titles and more... 

                    http://jquery.malsup.com/cycle2/demo/

                     

                     

                    Nancy O.

                    • 7. Re: Slide Show
                      stanberk Community Member

                      Nancy,

                       

                      Thank you for your help. I'm really new to all this so I don't know how

                      plug-ins work. How do I associate something like Cycle of jquery to

                      DreamWeaver? Or, do I just create the code and then paste it into my DW

                      Web page?

                      • 8. Re: Slide Show
                        mhollis55 Community Member

                        You need to write the code.

                         

                        In the answer I gave you, I placed the appropriate code into my reply. That uses Cycle. Nancy is suggesting Cycle2, which came out 6 months ago and does not require JavaScript; instead it lets you put in the data-cycle stuff she details in her answer.

                         

                        But, since we have, essentially, written the code for you, all you have to do is copy and paste it.

                         

                        Try either my example or Nancy's example and, if you are still having problems, put your page on a web server so we can look at it and help you edit the code.

                         

                        As I said in my answer, do this once or twice and you'll have it down.

                         

                        -Mark

                        • 9. Re: Slide Show
                          Nancy O. CommunityMVP

                          Below is a tutorial on how to work with jQuery plugins.

                          http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html

                           

                          Cycle 2 is extremely simple.   Copy and paste this code into a new document.  Add your own images and captions & you'll be up and running in less than a minute. 

                           

                          <!doctype html>
                          <html>
                          <head>
                          <meta charset="utf-8">
                          <title>jQuery Cycle Demo</title>
                          
                          <!--HTML5 help for older IE browsers-->
                          <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                          
                          <!--Latest jQuery Core Library-->
                          <script src="http://code.jquery.com/jquery-latest.min.js">
                          </script>
                          
                          <!--Cycle2 Slideshow-->
                          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
                          
                          
                          <style>
                          /**Slideshow**/
                          .cycle-slideshow {
                               margin:0;
                               padding:0;
                               border: 1px solid silver;
                               margin: 0 auto;
                          }
                          /**captions**/
                          .cycle-slideshow h4 {
                              margin:0;
                              padding: 6px ;
                              font-size: 22px;
                              color: #FFF;
                              background: #333;
                          }
                          </style>
                          
                          </head>
                          <body>
                          
                          <!--begin slideshow-->
                          <div class="cycle-slideshow"
                              data-cycle-fx="swipe"
                              data-cycle-pause-on-hover="true"
                              data-cycle-speed="2200"
                                          data-cycle-slides="> div"
                              >
                          <div>
                          Insert Image One
                          <h4>caption 1</h4>
                          </div>
                          
                          <div>
                          Insert Image Two
                          <h4>caption 2</h4>
                          </div>
                          
                          <div>
                          Insert Image Three
                          <h4>caption 3</h4>
                          </div>
                          
                          <!--end slideshow-->
                          </div>
                          
                          </body>
                          </html>
                          

                           

                           

                           

                           

                           

                          Nancy O.