3 Replies Latest reply: Jul 14, 2013 8:20 PM by Noradc RSS

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

    Noradc Community Member

      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.

        • 1. Re: What is the best software program to use to create or embed a slideshow into Dreamweaver CS6?
          Mike M Community Member

          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.

          • 2. Re: What is the best software program to use to create or embed a slideshow into Dreamweaver CS6?
            Nancy O. CommunityMVP

            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.

            • 3. Re: What is the best software program to use to create or embed a slideshow into Dreamweaver CS6?
              Noradc Community Member

              Thank you.  The information that you gave is exactly what I have been looking for to design my home page.