8 Replies Latest reply: May 11, 2012 4:28 PM by Nancy O. RSS

    Picture slideshow

    pclinkcomputers

      Hey everyone,

       

      So first off, let me just say that I know next to nothing about web design.  I've been following a Dreameaver CS5.5 how-to guide from thesitewizard.com, which was actually very helpful.  I've got the site up and running (it's basic but it works), and I've decided that I want to add a picture slideshow on a couple of the pages. 

       

      From all my Googling, I've gathered that Dreamweaver is not really intended to design these, so I did some searching on thesitewizard and found several links to free Javascript photo scripts that will help setup a slideshow.  Problem is, it requires working with code and the documentation is either nonexistent or geared toward those who already know what they're doing.

       

      An example of one such script would be http://usuaris.tinet.cat/mark/mis/

       

      From what little I gleaned, there was something about putting some code in the header, and adding some sort of tag in the body and...I dunno.  I got lost pretty quick.  If anyone can provide some noob-friendly advice, I'd really appreciate it.

       

      On a sidenote, I discovered in Dreamweaver's Insert menu the Media | SWF option, which initially was fantastic and seemed to solve my problem, but I then realized that iOS doesn't support flash.  The slideshow needs to be compatible with iOS devices.

       

      Anyway, thanks for reading.

        • 1. Re: Picture slideshow
          Nancy O. MVP

          Log-in to the Adobe Exchange with your Widget Browser:  http://labs.adobe.com/technologies/widgetbrowser/

           

          Grab one of the these jQuery & Ajax Slide show Widgets.

              * jQuery Cycle Widget

              * Lightbox Gallery Widget

              * Spry Content Slideshow

              * Spry Image Slideshow

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          http://alt-web.blogspot.com/

          • 2. Re: Picture slideshow
            pclinkcomputers Community Member

            Nancy, I love you for responding so quickly...thank you.

             

            So I used the Widget Browser and downloaded the jQuery Cycle Widget.  I opened the widget in the browser, configured it the way I want, then used the drag and drop function to put it into Dreamweaver. 

             

            At this point, I have no idea what to do.  I tried inserting the images into the blue blox that came up, but they just showed up as individual pictures.  Also, there are several sample pictures that came with it.  Can I delete those? 

             

            Sorry, remember I'm a total amateur.

             

            Ok scratch all that.  I started over, tried it again and it works.  Now I have another fun little problem.  I'm using the Dreamweaver "Synchronize sitewide" command which has been working beautifully, but now I'm getting an error message.  It skips the jQuery scripts every time, says there's some kind of error. 

             

            Ideas?

            • 3. Re: Picture slideshow
              pclinkcomputers Community Member

              Ok, not sure why Synchronize Sitewide wasn't working.  I ended up trying Site | Put, and it worked.  Thanks again Nancy.

              • 4. Re: Picture slideshow
                Nancy O. MVP

                To do advanced things in DW, you must de-mystify code by popping the hood.

                 

                Below is the relevant HTML.  Swap images with your own.

                 

                <div id="slideshow">

                        <!--All elements inside this will become slides-->

                        <img src="images/beach1.jpg" width="100" height="100" title="caption for image1" />

                        <img src="images/beach2.jpg" width="300" height="300" title="caption for image2" />

                        <img src="images/beach3.jpg" width="200" height="200" title="caption for image3" />

                        <div title="sample title"> you can add blocks of text instead!</div>

                        <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" />

                        <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" />

                       

                    </div>

                 

                Then upload page, scripts and images to your remote server.

                 

                 

                Nancy O.

                • 5. Re: Picture slideshow
                  pclinkcomputers Community Member

                  Well fortunately, I was able to accomplish that without going into the code.  Deleting the sample images locally and adding my own, then inserting them via Dreamweaver worked the second time around.  I must have inadvertently screwed something up the first time.

                   

                  Maybe I can push my luck with one last question.  When I hover the mouse over the slideshow, a little dialogue pops up with "caption for image x," where x is whatever number picture is being displayed.  I'd really prefer for nothing to display at all, but I would settle for at least being able to customize the pop-up to something specific.

                   

                  Other than that, it's working great.  Thank you again.

                  • 6. Re: Picture slideshow
                    John Waller MVP

                    You just need to remove the title attribute.

                     

                    What's the link to your website so we can take a look in our browsers?

                    • 8. Re: Picture slideshow
                      Nancy O. MVP

                      In code, change

                       

                      title="caption for image1"

                       

                      to

                       

                      title="something more meaningful..."

                       

                      Glad you got it working. 

                       

                       

                       

                      Nancy O.