Fading images slideshow

I am looking to create a fading image slideshow to use in Dreamweaver. I created in flash but having problems viewing in internet explorer. Wanted to know if there was an easier way to do this.

Yes. 
Flash is a very bad idea on the web because the world's most popular mobile & tablet devices don't support it.  And for those that do, Flash makes mobile device batteries run down in seconds rather than minues.   So don't use Flash.
Cycle2 is a nice jQuery fading slideshow that's very easy to implement and works in X-browsers.
Simply copy & paste the following code into a new, blank document.  SaveAs test.html.  Change images to your own.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Plugin Script-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
.cycle-slideshow, .cycle-slideshow{
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
width:45%; /**adjust width as required**/
.cycle-slideshow img {width: 100%;}
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>
<!--begin slideshow-->
<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="700"
>
<!--your images go here-->
<img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
<img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
<img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
<img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
<img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">
<!--end slideshow-->
</div>
</body>
</html>
Nancy O.

Similar Messages

  • Slideshow with Fading Images

    Is there a tutorial around on creating a slideshow with
    fading images. I want to drop my images into a folder. 01.jpg,
    02.jpg etc. and then have an actionscript automatically fade them
    in and out.
    Does someone know how to do this dynamically. I know it can
    be done. I want all of the .jpg images to reside in a folder and
    then I want the images to load and play automatically using an .XML
    file.
    Thanks

    I would do it with this code:
    on frame 1:
    mc = function() {
    num = (Math.round(Math.random()*27));
    //----------------------------------------- 27 being the
    number of images i have (name them from 0.jpg to 26.jpg
    totalfilename = num + ".jpg";
    _root.picLoader.loadMovie("
    http://www.yoursite/yourimageFolder/"
    + totalfilename);
    //----------------------------------------picLoader being my
    empty movie clip where the pictures are loaded
    mc();
    clearInterval(mc.intID);
    mc.intID = setInterval(mc, 20000);
    // ----------------------------------------------- every 20
    sec the picture will change randomly
    then on the emptyMovieClip ad this code:
    // this will fade the image in
    onClipEvent (load)
    this._alpha = 0;
    onClipEvent (enterFrame)
    if (this._alpha < 100)
    this._alpha = this._alpha + 5;
    } // end if
    if (this._alpha >= 100)
    this._alpha = 100;
    } // end if
    I hop this helped

  • Flash Image slideshow help

    Hello,
    I am trying to make a image slideshow for my companies new website.
    I used the Flash Image Viewer plugin from Dreamweaver, but it doesn't contain the transitional effect desired.
    Every tutorial I find talks about advancing the images through an interactive control, I just want the images to change by themselves and do a fade transitional effect between images.
    Can anyone please point me to a tutorial that has this w/o the intractive buttons?  I have been looking on the internet for hours and can only find tutorials / example w/ the intractve controls.
    Thank You for any positive direction in this.

    Hmm... no luck so far.  Thank You though for your suggestion.
    I am really "green" to flash and was only confused by the template provided by Flash.
    All I need to do is have images fade in and out of each other and then repeat over and over.
    I know this isn't too hard.  I found a tutorial that showed how, but my Firefox decided to close and I lost the page and haven't been able to find it since.  Tried the history log, but no luck.
    I will keep searchin...I know it's out there.

  • Spry Image Slideshow does not work in Explorer

    My spry image slideshow works fine in Safari and Firefox, but does not work in Explorer.
    A small box shows up in IE 8, and absolutely nothing shows up in IE 7.
    www.epaaudio.com
    Any Suggestions?

    How did you get your slideshow to play in Internet Explorer? I'm using the same slideshow on my new website and it plays fine in everything but IE versions. Here's a test page I'm working on... http://4034.sandbox.i3dthemes.net/oceankayakbanzai.html
    I looked at the code for your page and didn't notice anything different on mine. But yours works... Let me know if you have any suggestions. Thanks!

  • SPRY Image Slideshow, compatibility problems with IE

    Hello, i recently used the Spry image slideshow in my website. All works great in every browser except IE. I could actually get it to work when i changed the DOCTYPE from: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> TO: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    BUT,
    that totally skrewed the rest of my content. also i added the meta tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >  and that fixed the slideshow, but again skrewed my content.
    Has anyone found a solution? i looked through past discussions but couldnt find one.

    mdr4win wrote:
    i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
    I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
    I have noticed that you ignored my solution; your document still shows two bodies.
    Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
    How did you determine that the slideshow was not working correctly in IE and which versions of IE?
    Grumps

  • Spry UI Image Slideshow preview in IE8

    Hello, sorry to re-ask a tired question, but I've scoured the forums and can't get  a handle on the answer.
    My issue: I have inserted the Spry Image Slideshow 7.1 widget in my dreamweaver (CS5) doc (thank you Widget Browser!), and made the necessary modifications. It shows up perfectly when previewing in Firefox and Opera. In IE8, the images display but in unordered list form only.
    Things to note: I have NOT uploaded anything to the server yet, neither docs nor images, so unfortunatley I can't lead you to live view. Also, actually it is 2 slideshow widgets set side by side using a 2 column table. This might sound messy, but it did work in PREVIEW for all other browsers.
    Here is the Spry-UI1.7 code:
    @charset "utf-8";
    /* SpryImageSlideShow.css - version 0.1 - Spry Pre-Release 1.7 */
    /* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
    .ImageSlideShow {
        position: relative;
        width: 274px;
        height: 200px;
        overflow: hidden;
        border: 0px solid black;
    .ImageSlideShow .ISSClip {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: black;
    .ImageSlideShow .ISSView {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    .ImageSlideShow .ISSSlide {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;     /* FIX FOR IE6/7 */
        height: 100%;     /* FIX FOR IE6/7 */
    .ImageSlideShow .ISSControls {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    .ImageSlideShow .ISSFirstButton, .ImageSlideShow .ISSLastButton {
        display: none;
    .ImageSlideShow .ISSPreviousButton, .ImageSlideShow .ISSNextButton, .ImageSlideShow .ISSPlayButton {
        position: absolute;
        top: 0;
        display: block;
        height: 100%;
        opacity: 0;
        filter: alpha(opacity=0);
        background-repeat: no-repeat;
        text-indent: -10000em;
    .ImageSlideShow .ISSPreviousButton {
        left: 0;
        width: 30%;
        background-image: url(ImageSlideShow/iss-back.gif);
        background-position:  left center;
    .ImageSlideShow .ISSPreviousButtonHover, .ImageSlideShow .ISSNextButtonHover, .ImageSlideShow .ISSPlayButtonHover {
        opacity: 0.5;
        filter: alpha(opacity=100);
    .ImageSlideShow .ISSNextButton {
        right: 0;
        width: 30%;
        background-image: url(ImageSlideShow/iss-forward.gif);
        background-position:  100% 50%;
    .ImageSlideShow .ISSPlayButton {
        left: 30%;
        width: 40%;
        background-image: url(ImageSlideShow/iss-play.gif);
        background-position:  center center;
    /* If the slide show is busy, show the busy icon in the view. */
    .ImageSlideShow.ISSBusy .ISSView {
        background-image: url(ImageSlideShow/iss-busy.gif);
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
        filter: alpha(opacity=100);
    /* If the slide show is playing, change the play button image to "pause" */
    .ImageSlideShow.ISSPlaying .ISSPlayButton {
        background-image: url(ImageSlideShow/iss-pause.gif);
    /* Don't show the player controls if the slide show is busy! */
    .ImageSlideShow.ISSBusy .ISSPreviousButton,
    .ImageSlideShow.ISSBusy .ISSNextButton,
    .ImageSlideShow.ISSBusy .ISSPlayButton
        display: none;
    If anyone sees anything outlandish sticking out to them, please let me know. I am super excited about the look of these widgets on our home page- thank you Spry & Dreamweaver teams!! Sorry again for not having a live view for you at this time.
    Matt G.

    Hello, sorry to re-ask a tired question, but I've scoured the forums and can't get  a handle on the answer.
    My issue: I have inserted the Spry Image Slideshow 7.1 widget in my dreamweaver (CS5) doc (thank you Widget Browser!), and made the necessary modifications. It shows up perfectly when previewing in Firefox and Opera. In IE8, the images display but in unordered list form only.
    Things to note: I have NOT uploaded anything to the server yet, neither docs nor images, so unfortunatley I can't lead you to live view. Also, actually it is 2 slideshow widgets set side by side using a 2 column table. This might sound messy, but it did work in PREVIEW for all other browsers.
    Here is the Spry-UI1.7 code:
    @charset "utf-8";
    /* SpryImageSlideShow.css - version 0.1 - Spry Pre-Release 1.7 */
    /* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
    .ImageSlideShow {
        position: relative;
        width: 274px;
        height: 200px;
        overflow: hidden;
        border: 0px solid black;
    .ImageSlideShow .ISSClip {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: black;
    .ImageSlideShow .ISSView {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    .ImageSlideShow .ISSSlide {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;     /* FIX FOR IE6/7 */
        height: 100%;     /* FIX FOR IE6/7 */
    .ImageSlideShow .ISSControls {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    .ImageSlideShow .ISSFirstButton, .ImageSlideShow .ISSLastButton {
        display: none;
    .ImageSlideShow .ISSPreviousButton, .ImageSlideShow .ISSNextButton, .ImageSlideShow .ISSPlayButton {
        position: absolute;
        top: 0;
        display: block;
        height: 100%;
        opacity: 0;
        filter: alpha(opacity=0);
        background-repeat: no-repeat;
        text-indent: -10000em;
    .ImageSlideShow .ISSPreviousButton {
        left: 0;
        width: 30%;
        background-image: url(ImageSlideShow/iss-back.gif);
        background-position:  left center;
    .ImageSlideShow .ISSPreviousButtonHover, .ImageSlideShow .ISSNextButtonHover, .ImageSlideShow .ISSPlayButtonHover {
        opacity: 0.5;
        filter: alpha(opacity=100);
    .ImageSlideShow .ISSNextButton {
        right: 0;
        width: 30%;
        background-image: url(ImageSlideShow/iss-forward.gif);
        background-position:  100% 50%;
    .ImageSlideShow .ISSPlayButton {
        left: 30%;
        width: 40%;
        background-image: url(ImageSlideShow/iss-play.gif);
        background-position:  center center;
    /* If the slide show is busy, show the busy icon in the view. */
    .ImageSlideShow.ISSBusy .ISSView {
        background-image: url(ImageSlideShow/iss-busy.gif);
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
        filter: alpha(opacity=100);
    /* If the slide show is playing, change the play button image to "pause" */
    .ImageSlideShow.ISSPlaying .ISSPlayButton {
        background-image: url(ImageSlideShow/iss-pause.gif);
    /* Don't show the player controls if the slide show is busy! */
    .ImageSlideShow.ISSBusy .ISSPreviousButton,
    .ImageSlideShow.ISSBusy .ISSNextButton,
    .ImageSlideShow.ISSBusy .ISSPlayButton
        display: none;
    If anyone sees anything outlandish sticking out to them, please let me know. I am super excited about the look of these widgets on our home page- thank you Spry & Dreamweaver teams!! Sorry again for not having a live view for you at this time.
    Matt G.

  • Image slideshow in FCE project - output for a computer monitor

    Hi
    I tried using iPhoto to export a QT file of an image slideshow. I thought it'd be a quick and dirty way to get an image slideshow for a short film. Rather too dirty, though. I guess there is heavy compression used, because the image quality is poor.
    Also, I'm getting some kind of interlacing issues (flickering). I know I should be viewing on a TV, but this project is for output on a computer display.
    I tried download StillLife, but this is also giving me poor quality images. I think of myself as having a fairly good grasp of resolution issues, but I can't quite get my head around what I need to do. Do I have to simply import each JPEG into FCE and add keyframed movement manually? Will this help resolution/output issues?
    Many thanks

    .. I tried using iPhoto to export a QT file of an image slideshow....
    I would start here to play on the knobs&sliders ..
    what were your settings for export? "QT file" => that is many dozends of options of compression, codecs, resolutions, etc. pp ...
    the consumer apps FCE and iM are meant for TV display only => reduced res + reduced colors, quality reduced due to interlace (due to TV standards) ...-
    a Full Res, h264 encoded qt.mov should display your photos in shining quality ...

  • Spry Image Slideshow Thumbnail's do not show properly

    Hello World!
    This is my first time using the forums here at Adobe.
    My problem is that I have inserted a Basic Spry Image slideshow like so:
    The size is ~ 250px by 200px
    And once I go into live view, the slide show only displays the top right corner and not the whole image itself. I tried downsizing the image in design view to "look" like the same size of the thumbtails below but that did not do anything.
    In my local file(not sure if you can see to the left) my images are saved in a file called 'images', and thumbs in a subfolder called 'thumbs'. (I read that images need to have same scr and link names?)
    If anyone can help me out that would be great!! Thanks guys!

    Okay, so I found my error, my Link photo was super duper big!
    I played around with the resizing and it fitted better.

  • Center Spry Basic Image Slideshow on the webpage in Dreamweaver Cs6   ?

    Hi, I'm working on a Website for a client in Dreamweaver CS6: northstarconservancy.org. How do I center the Spry Basic Image Slideshow on the pages? I've tried a few options and nothing has been effective, anyone? Thanks, Amanda

    It would be easier to give you exact instructions if we could see your page. Do you have a link you could share?
    In general, place a div on your page and give it the basic css for centering...
    #divid {
         width:800px; (you can change the 800 to whatever width your slideshow uses)
         margin:auto;
    Then place your slideshow within that div in your html...
    <div id="divid"> all your spry slideshow info </div>
    As long as you haven't used APDivs, or position:absolute on your site, which you should never do unless absolutely necessary (pun kindof intended), the div that the slideshow resides in will be centered within it's container.

  • How to create an image slideshow?

    Hello,
    I am a beginner in web design and I need your help somewhere.
    Please look at the follwoing website: www.safaribig5.com
    Considering the image slideshow at the top of the home page, how do I add it to a webpage that I'm currently desiging in Dreamweaver?
    I also want to know how to add links to images in the slideshow.
    Your help in this matter would really be appreciated.
    Thanks.

    I personally like Nivo and Wowslider.
    I've never used the one I posted above. As far as I can tell, that's the one that was used in the example given by the OP.

  • Single Thumbnail activate multiple page(image) slideshow?

    I want to be able to have a single thumbnail from a lightbox slideshow visible on a webpage. That when clicked activates a slideshow with multiple images...not mulitple images on a single page like in the tutorial where the social network icons pop up, but rather that triggers an independent multipage slideshow.
    Whenever I add an image it adds a thumbnail. I want one thumbnail to be seen for a 7 image slideshow. I can't figure out how to do this with the triggers. The tutorial also doesn't seem to address this.
    Right now what I'm doing is creating a lightbox slideshow, turning all the thumbnails in all states transparent, then hiding the collection of thumbnails behind an image (the image being the single thumbnail I want displayed) but this is getting cumbersome with some many transparent lightboxes next to each other.
    Is there a easier way. Its for a portfolio site, and each thumbnail should trigger a new project slideshow.

    I am having the exact same issue as englishm87. I would like to have a portfolio page with a grid of theumbnails. Each thumbnail will then trigger the multipage slideshow. There is an example on the Adobe Muse website here:
    http://www.adobe.com/products/muse/eliana-t-stein.html
    I don't quite understand how you can nest the composition widget with the slideshow widget...
    Could you provide more of a step by step answer?
    Thanks!

  • Why is the Spry image slideshow not showing all of the thumbnails?

    Hi, I have a problem with the Spry image slideshow with filmstrip.  I downloaded it and inserted all of my pictures and thumbnails.  When I load it up in Firefox and IE seems to work perfectly.
    However when one scrolls through the images, some of the thumbnails are not displaying.  Also, sometimes some of the images won´t display at all. I have double checked the files and they are
    all the correct size (100x100 for the thumbnails) and they are all available in the proper slideshow folder on my webpage.  I am at a loss as to what the problem is, since it works fine for the other
    images. Here is a link to the site:
    http://priental-solar.de/referenzen.htm
    Any help would be greatly appreciated.  Thanks

    All working OK here. All thumbnails and fullsize images appear OK.

  • Why are my Spry Image Slideshow slide titles not appearing sometimes?

    I inserted a Spry Image Slideshow with Filmstrip Basic widget using 3 photos to try it out. It is working fine except for the slide titles.The slide titles appear in Firefox and in Opera, but not in Safari. Haven't tried it in IE browsers yet.
    Any idea why the titles are not showing up all of the time?
    Thanks.

    All working OK here. All thumbnails and fullsize images appear OK.

  • Spry Image Slideshow with Filmstrip not showing online

    I just put up an image slideshow. It works locally, but online the spinning wheel spins all the time. The viewport does not show any image. The filmstrip does show the thumbnails, and the navigation works. My guess is that the images I used for the viewport (a href) are too large? Their size is generally 700x580 and mostly above 90KB - are they too big??
    Here's the link: http://webdesign.mpcc.edu/KenShobe/DaphneM/WebII/lane_photography/submenu/flora.html
    I greatly appreciate your help!

    Well, the images were not too big - resolution wise. What I did was I checked my remote server files and made sure that it was identical to my local files for my website. And I found out that Dreamweaver did not upload the images (the ones that go into the a href tag) into my remote server, though I "put the entire site." SO I had to upload them. And then when I checked it worked.
    Hope this is helpful.

  • Spry Image Slideshow with Filmstrip controls showing ABOVE images?

    Hi all,
    I've never used these forums before and apologise in advance for my first discussion being a request for help!
    I recently added the Spry Image Slideshow with Filmstrip to a page and am not sure which property I need to modify to get the controls to show on top of the image. I think this is an issue with the two column layout I'm using but am not knowledgeable in the least about code and would appreciate your help.
    http://gailspantry.com/testindex.
    Many many thanks!
    Rune

    Hi folks, any ideas re this issue? Really hope someone can help.

Maybe you are looking for

  • How can i see the callers special information like Job Title, Company name, and may be notes?

    I need to see the caller's  special infos in call screen.  Like Company name, Job Title? Please dont say me, "put these info to name&surname field", because that, i'm useing Outlook Contact and i cannot change it. I tried some special programs like (

  • Fix background image within div

    Hello I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far. I'm trying to make the background image within a div to be fixed when i scroll vertically. Have a template made, in which the only e

  • W700 Number pad Not working

    W700 Windows 7 Pro x64 The full 10 key pad is working.  It does not work if you try to use it to login but right when windows starts, it will work for about 3-4 keystrokes and then stop working.  When it stops working, nothing.  No arrow movement or

  • Mac Pro flashing power light (unresponsive)

    Hello, Twice this week a Mac Pro Quad 2.66 has become unresponsive after being left unattended. I have revived the computer by resetting the System Management Controller (http://support.apple.com/kb/HT1806). It's obvious this is not normal. Should I

  • How do I move Photoshop Elements and PS Premier bundle to new computer

    I bought a new computer and would like to  move Photoshop Elements and PS Premier bundle to the new computer. What is the procedure? Thanks, Jimmy