A

Anonymous

Beantwortet

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

Forum|Forum|15 years ago
September 8, 2010
3 Antworten
144117 Ansichten

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.

Dieses Thema wurde für Antworten geschlossen.

Beste Antwort von 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_Antwort

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!

S

salliyahg

Participating Frequently

salliyahg wrote:
Sort of, I was mainly hoping to be able to use the one that osgood posted--I will have to re-watch it later since I am at work, and can't turn the volume up.
Thanks!

Hi salliy

Copy the code below from <!DOCTYPE html> - </html> and save it to a new Dreamweaver document and then view it in the browser.

All you need to do is change the img src link in the 'slideshow' <div> to that of your own. So if your images are in a folder named 'websiteslideshow' you would change the lines that look like below:

to:

(obviously replace beach.jpg with the name of your image and enter the correct size in width and height).

<!DOCTYPE html>

<html>

<head>

<title>JQuery Cycle Plugin - Basic Demo</title>

.slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }

.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

</style>

$(document).ready(function() {

$('.slideshow').cycle({

fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

});

</script>

</head>

<body>

</div>

</body>

</html>

Then change the height and width values in the slideshow css selector to match that of your image size.

.slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }

should i also change this:

Thanks!

Anmelden

Login über soziales Netzwerk

Willkommen

Login über soziales Netzwerk

Scanne Datei nach Viren

Diese Datei kann nicht heruntergeladen werden