A

Anonymous

Answered

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

Forum|Forum|15 years ago
September 8, 2010
3 replies
144116 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>

S

salliyahg

Participating Frequently

Hi Osgood, sorry for being so slow with dreamweaver--but I am still not able to use your slideshow! I'm not quite sure what class, ID or <div> means but i did save the code into a new javascript file and i changed the source to the name of that new file. i also changed "Slideshow" to "websiteslideshow" because that is the name of the file my images are saved under, and I assumed that's what <div> meant. ANy help for me?

Thanks!

O

osgood_

Legend

okay so significant progress!!! it now works except the images are still cut off. also, in regards to the redundat coding, it just looks like this:

</span>

<p class="style45">As a pediatrician, you can play an important role in issues around global immunizations.</p>

to me, so I didn't delete anything

salliyahg wrote:
okay so significant progress!!! it now works except the images are still cut off. also, in regards to the redundat coding, it just looks like this:

Do you have any css other than the below which is controlling the width/height of the 'slideshow' <div>?

If your images are 509px in height and 529px wide they should sit correctly in the 'slideshow' <div>

.slideshow {

height: 509px;

width: 529px;

margin: auto;

position: relative;

}

salliyahg wrote:
</span>
<p class="style45">As a pediatrician, you can play an important role in issues around global immunizations.</p>
to me, so I didn't delete anything

You don't need the two </span> tags in the code below:

</span>

<p class="style45">As a pediatrician, you can play an important role in issues around global immunizations.</p>

</span>

<p class="style45">As a pediatrician, you can play an important role in issues around global immunizations.</p>

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