Skip navigation
stanberk
Currently Being Moderated

Slide Show

May 24, 2013 7:19 PM

Tags: #dreamweaver_cs5

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

 
Replies
  • Currently Being Moderated
    May 25, 2013 6:59 AM   in reply to stanberk

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 11:59 AM   in reply to stanberk

    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.h tml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 12:14 PM   in reply to stanberk

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 12:18 PM   in reply to mhollis55

    Mark,

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

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 12:29 PM   in reply to Nancy O.

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 12:53 PM   in reply to mhollis55

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 2:06 PM   in reply to stanberk

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 2:27 PM   in reply to stanberk

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

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

     

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points