Skip navigation
pclinkcomputers
Currently Being Moderated

Picture slideshow

May 11, 2012 2:30 PM

Tags: #cs5.5 #dreamweaver #javascript #picture #slideshow #picture_slideshow

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.

 
Replies
  • Currently Being Moderated
    May 11, 2012 2:34 PM   in reply to pclinkcomputers

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 3:44 PM   in reply to pclinkcomputers

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 4:17 PM   in reply to pclinkcomputers

    You just need to remove the title attribute.

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 4:28 PM   in reply to pclinkcomputers

    In code, change

     

    title="caption for image1"

     

    to

     

    title="something more meaningful..."

     

    Glad you got it working. 

     

     

     

    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