Skip navigation
Currently Being Moderated

What is the best software program to use to create or embed a slideshow into Dreamweaver CS6?

Jul 11, 2013 10:00 PM

Tags: #photoshop #flash #bridge #dreamweaver #slideshow #slideshare

Hello.  I have the following software programs... Keynote, Bridge, Flash, Dreamweaver, Photoshop.  And I have uploaded a files to slideshare, youtube, and flickr.  I would like the slideshow to contain no words nor titles as it plays in the browser.  For it to have arrows at the right and left sides to click on would be fine.  I tried using Bridge's slideshow feature, but it didn't appeal to me visually in the browser.  I tried another internet program, but it would display its company name when the slideshow played. 

 

I thought that I could organize the files in Bridge, insert them into Keynote and somehow embed the file into Dreamweaver, but I haven't come across any information that tells me how to do so. But even if I could use Keynote, how would I then put the arrows into the slideshow?  Or can the images be inserted individually and easily create the arrows to click on in Dreamweaver?  I thought about using Adobe Flash and creating the arrows for to click on.  But how does it get inserted?  I've uploaded an animation to Vodpod (lockerz) but its embed code is for Wordpress only.  I would appreaciate knowing the step by step process of creating and inserting or embedding the slideshow into Dreamweaver.  Thank you.

 
Replies
  • Currently Being Moderated
    Jul 11, 2013 10:26 PM   in reply to Noradc

    Keynote tells me you're on a Mac. Usually if I want to do what you're describing, I do the presentation in PowerPoint and then run it through Captivate to make an SWF file. While Powerpoint IS available for Mac... Captivate is strictly Windows. On top of that, because Flash doesn't work with smartphones, I'm really trying to avoid integrating it in pages unless it can't be done.

     

    Fancybox does "slideshow" or image gallery display, but it adds mousewheel functionality and is customizable with CSS.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 11:22 AM   in reply to Noradc

    Look at Cycle2 -- a jQuery plugin.

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

     

    This quick example has prev / next buttons.  Simply replace the default images with your own.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Cycle2</title>
    
    <!--helpf 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 Plugin-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    
    <style>
    
    /**SLIDESHOW STYLES**/
    .cycle-slideshow {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    }
    .cycle-slideshow img { width: 400px }
    
    /* prev / next links */
    .cycle-prev, .cycle-next {
    position: absolute;
    top: 0;
    width: 30%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 800;
    height: 100%;
    cursor: pointer;
    }
    .cycle-prev {
    left: 0;
    background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
    }
    .cycle-next {
    right: 0;
    background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
    }
    .cycle-prev:hover, .cycle-next:hover {
    opacity: .7;
    filter: alpha(opacity=70)
    }
    /**END SLIDESHOW STYLES**/
    </style>
    </head>
    <body>
    
    <!--begin slideshow-->
    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        >
    <!-- prev/next links -->
    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>
    
    <!--insert your images below-->
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
    <p>Mouse over image for previous / next links</p>
    </div><!--end slideshow-->
    
    </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