A

Anonymous

Answered

HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????

Forum|Forum|15 years ago
September 8, 2010
3 replies
144117 views

I would like to have a slow fading slideshow of a few images relating to the web page that the user is on.

I have a seperate div tag, with the space 235 x 440 pixels allowed for the images. All I want is the slideshow to fade in and out of one another using 3 or 4 photos, no text, no control panel or thumbnails or any other frills, just basic good quality photos fading in a looped slideshow.

I just want that when the page loads up that the slideshow starts automatically and slowly loops continuously until the user changes page.

I have seen animated gifs from photoshop, which are no good because the image quality is awful, and in fireworks, where it comes with either thumbnails or a control panel for the user to navigate manually the images. I don't want that. Can it be done easily in flash? or does dreamweaver have an answer?

Surely there must be a simple and basic way in dreamweaver alone to just swap/fade an image with another image a few times and thats that? no?

If it can't be done in dreamweaver, PLEASE tell me which program it can be done in and how.

Many many many thanks in advance for anyone with an easily explained solution.

Ian.

This topic has been closed for replies.

Correct answer osgood_

Do this with jquery:

http://jquery.malsup.com/cycle/basic.html

Look at the pages source code below to see how it was achieved.

Basically you need to insert the below section of the code into the <head></head> section of your pages code and change '.slideshow' to the class name or id name of the <div> your images are in.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
     });
});
</script>

Pages Source Code

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
     });
});
</script>
</head>
<body>

     <div class="slideshow">
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
     </div>
</body>
</html>

I

iodress

Participant

thanks for the nice information.it help me a lot

<a href="http://www.vicyc.com/discount-mother-of-the-bride-dresses-c-84.html">discount Mother of The Bride Dresses</a>|<a href="http://www.vicyc.com/special-occasion-dresses-c-37.html">Special Occasion Dresses</a>

M

MagicToolbox

Participant

Dreamweaver does not have a built-in feature for this. You will need a JavaScript to do this. You could write one from scratch or use an existing one. This is an example using Magic Slideshow...

Place your images in a <div> with a class of MagicSlideshow.

For example:

<div class="MagicSlideshow">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>
<img src="example4.jpg"/>
</div>

Upload the Magic Slideshow JavaScript and CSS files to your website and reference them in the <head>.

For example:

<link rel="stylesheet" type="text/css" href="magicslideshow.css"/>
<script src="magicslideshow.js" type="text/javascript"></script>

Try the examples here:

http://www.magictoolbox.com/magicslideshow/

BenPleysier

Community Expert

There is an Adobe solution that can be used with any editor, but is particulaly useful when combined with DW CS5 http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2141543

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_Correct answer

Legend

Do this with jquery:

http://jquery.malsup.com/cycle/basic.html

Look at the pages source code below to see how it was achieved.

Basically you need to insert the below section of the code into the <head></head> section of your pages code and change '.slideshow' to the class name or id name of the <div> your images are in.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
     });
});
</script>

Pages Source Code

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
     });
});
</script>
</head>
<body>

     <div class="slideshow">
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
          <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
     </div>
</body>
</html>

O

osgood_

Legend

Although this will work you're accessing the jquery scripts from another server so I would get the scripts by browsing out to their location using the url address in the page code. Copy and paste them in a new Javascript file (which Dreamweaver will let you select when you create a new page) and save them to your site folder. Re-link the scripts in your page to the files in your site folder. You will now have the scripts under your control.

A

Anonymous

Thank you for your time in sending me your solution, but I'm quite new to all this and come from a design background rather than a coding background, and so I am struggling to understand any of this... sorry. I know it's probably a great way of doing and showing off the scripting knowledge, but I don't understand a thing of it.

Your way seems awfully complicated to me.

Is there not a simple way of doing this in Flash or something?

Thanks again though.

Ian.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded