Auto slideshow

How do you make a slide show play automatically?
(within a photo in a page - not a separate slide show window!)
I've seen a few sites where this works well and I know there's a lot of posts on the subject... can anyone clarify this for me?
Thanks, Sam.

How do you make a slide show play automatically?
(within a photo in a page - not a separate slide show
window!)
You can't, the closest you can get to is something like this, which uses a completely different method:
http://hac.95mb.com/lightbox/Arts.html
arrow right -> next slide
arrow left -> prev slide
space bar -> start/stop autorun

Similar Messages

Auto slideshow with progressive image load

Hello everyone,
Does anyone know of a good autoplay slideshow script that
starts with the
first image on page load and then downloads the additional
images when
called? In other words, if there are 20 images in the
slideshow, it doesn't
load all 20 images before displaying the first.
I have just a couple of specific requirements.
I don't need any controls (pause, forward, etc) on it.
Most of the javascript slideshows I've looked at in Google or
have in my
snippet list have the image name hardcoded in the script.
Image1.jpg, image2.jpg, etc, which won't work.
I'll be feeding the images dynamically depending on the
category the user
chooses and the image names are variable.
I'm currently using javascript that automatically shows and
hides divs with
the same class name by changing the display style from none
to block and
back to none as it loops through them.
This works well as I can dynamically write as many divs as
needed by looping
through all the items in a category.
But alas, this one still doesn't start to run until all the
images are
downloaded.
You can see it here:
http://www.onelongfellowsquare.com/
There's actually 3 "slideshows", stacked one on top of the
next, using this
in the "Featured" section.
Thank you for any help or ideas.
Take care,
Tim

Thanks, Jeff.
That's the functionality I was looking for.
I just need to figure out the best way to dynamically fill
the array with
image names from a database.
Take care,
Tim
"Jeff" <[email protected]> wrote in message
news:[email protected]...
> <head>
> <script language="JavaScript1.1">
> 
> </script>
> </head>
>
> <body>
> <a href="javascript:gotoshow()"><img
src="image1.JPG" alt="" name="slide"
> width="400" height="271" border=0
style="filter:blendTrans(duration=3)">
>
> <script language="JavaScript1.1">
> 
> </script>
> </body>
>
> Jeff
>
>
>
> ----- Original Message -----
> From: "TC2112" <[email protected]>
> Newsgroups: macromedia.dreamweaver
> Sent: Saturday, January 31, 2009 7:04 PM
> Subject: Auto slideshow with progressive image load
>
>
>> Hello everyone,
>>
>> Does anyone know of a good autoplay slideshow script
that starts with the
>> first image on page load and then downloads the
additional images when
>> called? In other words, if there are 20 images in
the slideshow, it
>> doesn't load all 20 images before displaying the
first.
>>
>> I have just a couple of specific requirements.
>> I don't need any controls (pause, forward, etc) on
it.
>> Most of the javascript slideshows I've looked at in
Google or have in my
>> snippet list have the image name hardcoded in the
script.
>> Image1.jpg, image2.jpg, etc, which won't work.
>> I'll be feeding the images dynamically depending on
the category the user
>> chooses and the image names are variable.
>>
>>
>> I'm currently using javascript that automatically
shows and hides divs
>> with the same class name by changing the display
style from none to block
>> and back to none as it loops through them.
>> This works well as I can dynamically write as many
divs as needed by
>> looping through all the items in a category.
>> But alas, this one still doesn't start to run until
all the images are
>> downloaded.
>> You can see it here:
>>
http://www.onelongfellowsquare.com/
>> There's actually 3 "slideshows", stacked one on top
of the next, using
>> this in the "Featured" section.
>>
>> Thank you for any help or ideas.
>>
>>
>> Take care,
>>
>> Tim
>>
>>
>
> "TC2112" <[email protected]> wrote in message
> news:[email protected]...
>> Hello everyone,
>>
>> Does anyone know of a good autoplay slideshow script
that starts with the
>> first image on page load and then downloads the
additional images when
>> called? In other words, if there are 20 images in
the slideshow, it
>> doesn't load all 20 images before displaying the
first.
>>
>> I have just a couple of specific requirements.
>> I don't need any controls (pause, forward, etc) on
it.
>> Most of the javascript slideshows I've looked at in
Google or have in my
>> snippet list have the image name hardcoded in the
script.
>> Image1.jpg, image2.jpg, etc, which won't work.
>> I'll be feeding the images dynamically depending on
the category the user
>> chooses and the image names are variable.
>>
>>
>> I'm currently using javascript that automatically
shows and hides divs
>> with the same class name by changing the display
style from none to block
>> and back to none as it loops through them.
>> This works well as I can dynamically write as many
divs as needed by
>> looping through all the items in a category.
>> But alas, this one still doesn't start to run until
all the images are
>> downloaded.
>> You can see it here:
>>
http://www.onelongfellowsquare.com/
>> There's actually 3 "slideshows", stacked one on top
of the next, using
>> this in the "Featured" section.
>>
>> Thank you for any help or ideas.
>>
>>
>> Take care,
>>
>> Tim
>>
>>
>
>

Why do auto-slideshows stop playing after a button linking to a URL is pressed?

I have several folio overlays in a presentation I am creating that simply loop through a series of images (slideshows).
In the presentation I also have a button that opens up a URL in a new window. If I do this, then return to the application, none of the the slideshows will be working; they will be stuck on whatever image they were on last!
All of this is using Adobe Content Viewer, any ideas?

Is there any word on this? I'm disappointed that I'm still living with bugs I first encountered two months ago.

Web Module Auto Slideshow

Does any know if you can have a slide show you create in the web module, start automatically when the page is loaded?
Thanks
Scott

Depends on the slideshow you're using, what sorts of options it supports and how you have it configured.

Jquery Slideshow problem in IE

I have a Jquery slideshow on my page and it works alright in FireFox but in Internet Exploer 8, the transaction between the JPEG photos are not smooth. Can someone help me out as to what coding i would need to make the slideshow smooth in IE8 or lower. I am new to coding and i created the below coding using tutorial and reading thread on Dreamweaver forum. I very much apperciated if you can help me out and let me know where to out the coding.
The slideshow DIV (class="slideshow") is in another DIV tag (class="slideShow"). I have position the slideShow using CSS to flote to the right with box width 610px, height 500px.
I have copied all my coding i have for the slideshow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<style type="text/css">
.slideshow {
     width: 610px;
     height: 500px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
.slideshow img {
     padding: 5px;
     border: 1px solid #ccc;
     background-color: #CCC;
     height: 400px;
     width: 580px;
</style>

<script type="text/javascript" src="jquerySlideshow/jquery.min.js"></script>

<script type="text/javascript" src="jquerySlideshow/jquery.cycle.all.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx:    'fade',
speed: 2000,
timeout: 1000
</script>
</head>
<body>
<div class="slideShow">
    <div class="slideshow">
    <img src="_images/home/3d view roof.JPG" width="580" height="400" />
          <img src="_images/home/Bridge.png" width="580" height="400" />
          <img src="_images/home/Haz Restaurant, St Pauls, London.JPG" width="580" height="400" />
          <img src="_images/home/Isometric view.JPG" width="580" height="400" />
          </div>
    </div>
</body>

i2008 wrote:
The slideshow DIV (class="slideshow") is in another DIV tag (class="slideShow").
Although browsers normally treat class and ID names as case-sensitive, you cannot rely on it 100%. It's also very bad practice to use the same name for different purposes and rely on the difference between uppercase and lowercase in just one letter to distinguish between them. Even if browsers get the case-sensitivity right, it's likely to confuse you. Give them distinctive names such as slideshow and slideshowWrapper.
The other bad practice you have adopted is the use of spaces in file names. For example, you have this:
Haz Restaurant, St Pauls, London.JPG
Shorten the name, and use underscores to separate words. It's also a good idea to use lowercase for the filename extension (.jpg instead of .JPG).
Haz_Restaurant.jpg
Fixing those points might solve the jerkiness in IE, but you'll probably also need to experiment with the slideshow settings.
$(document).ready(function() {
    $('.slideshow').cycle({
        fx:      'fade',
        speed:   2000,
        timeout: 1000
Try changing the value of speed to 2500 (2.5 seconds) or 3000 (3 seconds). The timeout value might need changing, too.
JavaScript dynamic effects are dependent not only on the browser, but also the processing capability of the computer. Some browsers are more efficient than others. IE's JavaScript processing capability is known to be less efficient in many cases, although this should improve with IE9.

Photo page and slideshow

is there a way to make the slide show automatically appear when a viewer clicks on the album instead seeing all of the pictures first?

You can't because the slideshow gets the images from the photo page and require photo page to be opened while the slideshow is playing.
And the only way to have auto slideshow is to disable browser popup windows (most people do block popup)

Slideshow works great on local server, won't run on remote

Have a Javascript driven auto slideshow that works just great viewed in IE, Firefox, and Safari from
local server. When files uploaded to remote host, everything works properly (Google Maps; etc.), but not the slideshow.
File structures appear to be the same in local and remote servers.
Any ideas?

Yes:
www.nelswrites.com
Thanks!

Slideshow and Multi-Projects

Windows 7 and CS4 Production Premium, LR3 and Acrobat X.
Encore CS4 :
Project "A": Slideshow to DVD. Set up the project (Encore CS4) with a main selection menu to allow the DVD viewer to either select manual advance or the complete set (all). I have been able to have one project for manual and one project for all but not as one project. For the "manual" selection, a timed menu is displayed explaining use of the remote's chapter buttons (|<<- and ->>|) to change slides and a return to the main selection menu is done with the title remote button. For the "all" selection the complete slide show begins directly from the main menu. Again title returns to this menu. When running the "all" operations, each slide may have a different required duration.
Q1: Any suggestions on how to do a one project for both?
Project "B": As per "A" but need to assign different audio clips on a slide basis. Some slides are group photographs. It is impractical to try to overlay a text description of the group individuals on the image. Need to provide an audio description of the individuals at the start of the slide and either cut it off on manual next/previous slide advance or have the slide duration equal audio length for the "all" main menu selection. The ideal support would be not only have the ability to have each slide have its own audio clip but to have another audio track to play the entire show length with ability to tone down or stop the full show audio track when a slide's audio clip plays.
QB1: Does not appear any Adobe product supports this function for slideshows (Encore or Lightroom). Have I missed something?
QB2: If I have not missed something (QB1), anyone have any suggestions on a product to use?
Project "C": This is a general one for either slideshows or video DVD presentations. Say I have two slideshow projects: one has its own selection "Main" menu to select "auto" advance in a travel slide sequence and the other, a menu to select manual advance for a scrapbook set of pages (each page a slide). Then say one video project with its own "main" menu to select chapters and/or subtitles for that sequence. Each project runs about 4 or 5 minutes.
QC1: Is there any way to have a "master" menu to allow a DVD viewer to select the first menu of each project? This would be nice since it permits more efficient use of the DVD media.

I'm not sure I understand, but I'll give you some reactions.
Project "A": Slideshow to DVD. Set up the project (Encore CS4) with a main selection menu to allow the DVD viewer to either select manual advance or the complete set (all). I have been able to have one project for manual and one project for all but not as one project. ...Q1: Any suggestions on how to do a one project for both?
I do not see an option other than making the slideshow twice, and including both in the same project. One is set to manual advance, one is set to auto. U Unless the slideshow is very long, this should not be a problem.
Project "C": This is a general one for either slideshows or video DVD presentations. Say I have two slideshow projects: one has its own selection "Main" menu to select "auto" advance in a travel slide sequence and the other, a menu to select manual advance for a scrapbook set of pages (each page a slide). Then say one video project with its own "main" menu to select chapters and/or subtitles for that sequence. Each project runs about 4 or 5 minutes.
QC1: Is there any way to have a "master" menu to allow a DVD viewer to select the first menu of each project? This would be nice since it permits more efficient use of the DVD media.
This is similar (assuming I understand what you are looking for). Make a menu with 3 buttons. One button goes to the video menu, one to the auto-slideshow, one to the scrapbook show. However, I don't see why you need the separate slideshow menus. The common method is a main menu in which you select the "play video", a bu tton for the video scene selections, a button for slideshow one, and a button for slideshow two.
Project "B": As per "A" but need to assign different audio clips on a slide basis. Some slides are group photographs. It is impractical to try to overlay a text description of the group individuals on the image. Need to provide an audio description of the individuals at the start of the slide and either cut it off on manual next/previous slide advance or have the slide duration equal audio length for the "all" main menu selection. The ideal support would be not only have the ability to have each slide have its own audio clip but to have another audio track to play the entire show length with ability to tone down or stop the full show audio track when a slide's audio clip plays.
QB1: Does not appear any Adobe product supports this function for slideshows (Encore or Lightroom). Have I missed something?
QB2: If I have not missed something (QB1), anyone have any suggestions on a product to use?
I do not see an option for per slide audio. Also keep in mind that a DVD can only play one audio track at a time. For example, when a "commentary" track is "added" to the audio from a movie, the DVD is playing back a single track - one that had to be specially edited with the original movie and the commentary. Your primary option is to create the slideshow in Premiere, adding what audio you want, but this will not allow manual advance. I don't know about other options.

HTML Slideshow Code

I am trying to write a code to make a slideshow. I used html and jquery to do it, but it's not working. Here's the code I came up with:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title> The Justice League of America </title>
<style>
#slideshow {
width: 900px;
height: 304px;
margin: 10px auto 0 auto;
#slideshow .Wrapper-slideshow {
width: 900px;
height: 304px;
float: left;
#slideshow .Content-slideshow {
height: 304px;
#Nav-slideshow {
width: 600px;
height: 30px;
margin: -30px 0 0 10px;
#Nav-slideshow a {
width: 10px;
height: 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
color: #666;
background: #666;
border: 1px solid #ccc;
display: block;
margin: 0 10px;
float: left;
#Nav-slideshow a.activeSlide{
background: #222;
border: 3px solid #eee;
-moz-border-radius: 8px;
margin: -2px 8px;
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("#Content-slideshow").cycle({
fx: 'fade',
pager: '#Nav-slideshow'
</script>
</head>
<body>
<div id="slideshow">
<div class="Wrapper-slideshow">
<div id="Content-slideshow" class="Content-slideshow">
<div class="featureItem"><a href=""><img src="http://cdn.bleedingcool.net/wp-content/uploads/2011/03/justice-league-logo.jpg" title="Justice League"
alt="Justice League Logo" /></a></div>
<div class="featureItem"><a href=""><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTd8_Ht69tA0Pmv5CHSJU2WEhX6xonffl3AZFNnvZI0YGbj5tiT" title="Batman"
alt="Bruce Wayne" /></a></div>
<div class="featureItem"><a href=""><img src="https://dailypop.files.wordpress.com/2012/03/justice-league-doom-superman.jpg" title="Superman"
alt="Clark Kent" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette3.wikia.nocookie.net/dcanimated/images/f/f5/Wonder_Woman.png/revision/latest?cb=20090407084402"
title="Wonder Woman" alt="Princess Diana of Themyscira/Diana Prince" /></a></div>
<div class="featureItem"><a href=""><img src="http://statici.behindthevoiceactors.com/behindthevoiceactors/_img/chars/char_101.jpg" title="Martian Manhunter" alt="J'onn
J'onzz/John Jones" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette2.wikia.nocookie.net/dcanimated/images/7/7b/Hal_Jordan.png/revision/latest?cb=20080930201433" title="Green
Lantern" alt="Hal Jordan" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette1.wikia.nocookie.net/dcmovies/images/0/06/Flash_Justice_League9.jpg/revision/latest?cb=20110917201653"
title="The Flash" alt="Barry Allen" /></a></div>
<div class="featureItem"><a href=""><img src="http://ifanboy.com/wp-content/uploads/2011/07/JL_TheEnemyBelow.jpg" title="Aquaman" alt="King
Orin/King of the Seven Seas" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette3.wikia.nocookie.net/dcanimated/images/f/f2/Hawkgirl.png/revision/latest?cb=20100117155542" title="Hawkgirl"
alt="Shayera Hol" /></a></div>
</div>
<div id="Nav-slideshow"></div>
</div>
</div>
<script type='text/javascript' src='cycle.js'></script>
</body>
</html>
Also this code is linked to another javascript file called jquery.js (you will see they are linked in the above code). I can provide the code for that if you need it to help me.
I've been trying to make a slideshow for days, I just want it to work. Thank you in advance to anyone who can help me.
Quick note: I am not a programmer and I don't understand any languages except for html, so when you answer, don't use programming terms. I won't understand them! That's probably why I am having so much trouble!

Hi,
for working examples see plugins.jquery.com - there re a number of slide-show plugins... you will also probably need jquery.ui also if your jquery plugin is using css animations.
If you are not a programmer then you are probably running your html from the file system.... your computer's hard drive is NOT the internet. You need a web server (either localhost (windows pro and enterprise editions) or a hosted server on the internet
(azure).
Regards.
Rob^_^

Using the same script twice but different options on a single page

having a hard time figuring out how to run the cycle script which is in use on one portion of my webpage as a slider gallery under my header, but i'd also like to use it in a small are in the upper right of the same page but with a different transition, to showcase specific products in a gallery.
how do i accomplish this? I've been to the cycle plugin page http://malsup.com/jquery/cycle/begin.html but am having trouble interpreting their page source syntax
in my head section i have the following declared:
<script type="text/javascript" src="../js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
</script>
and in my body its invoked simply by:
<div class="slideshow">
            <img src="../images/splash1.jpg" width="761" height="210" />
            <img src="../images/splash2.jpg" width="761" height="210" />
            <img src="../images/splash3.jpg" width="761" height="210" />
            <img src="../images/splash4.jpg" width="761" height="210" />
            <img src="../images/splash5.jpg" width="761" height="210" />
</div>
now should i change the head function to
<script type="text/javascript" src="../js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(function() {
    // run the code in the markup!
    $('td pre code').each(function() {
        eval($(this).text());
</script>
and how would i later invoke this the body here?
<div class="slideshow">
            <img src="../images/splash1.jpg" width="761" height="210" />
            <img src="../images/splash2.jpg" width="761" height="210" />
            <img src="../images/splash3.jpg" width="761" height="210" />
            <img src="../images/splash4.jpg" width="761" height="210" />
            <img src="../images/splash5.jpg" width="761" height="210" />
</div>
<pre><code class="mix">$('#s1').cycle('fade');</code></pre> - this is what they do on their wepage but i dont understand what this <pre><code class="mix"... is all about.
can someone please explain
thanks

I recommend using Cycle2 instead of the old Cycle Plugin. Out of the box, Cycle2 is better and has more features. Just copy & paste the following code into a new document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document with Cycle2</title>



<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
body {width: 900px;margin: 0 auto}
/**Slideshow**/
.cycle-slideshow {
margin: 0;
padding: 0;
width:500px;
border: 1px solid silver;
margin: 0 auto;
.cycle-slideshow img {
width: 500px;
margin: 0 auto
.center { text-align: center }
</style>
</head>
<body>

<div class="cycle-slideshow"
data-cycle-fx="swipe"
data-cycle-pause-on-hover="true"
data-cycle-speed="2200"
>
<img src="http://malsup.github.com/images/p1.jpg" alt="">
<img src="http://malsup.github.com/images/p2.jpg" alt="">
<img src="http://malsup.github.com/images/p3.jpg" alt="">
<img src="http://malsup.github.com/images/p4.jpg" alt="">
</div>
<p> </p>
<p> </p>

<div class="center">
<a href=# id=next>Next</a>
</div>
<div class="cycle-slideshow"
    data-cycle-fx="fadeout"
    data-cycle-timeout="3000"
    data-cycle-next="#next"
    data-cycle-manual-fx="scrollHorz"
    data-cycle-manual-speed="300"
    >
<img src="http://malsup.github.com/images/p1.jpg" alt="">
<img src="http://malsup.github.com/images/p2.jpg" alt="">
<img src="http://malsup.github.com/images/p3.jpg" alt="">
<img src="http://malsup.github.com/images/p4.jpg" alt="">
</div>
</body>
</html>
Use whichever effects you prefer:
http://www.malsup.com/jquery/cycle2/demo/shuffle.php
Nancy O.

Object State stops at first Image

Hi, I have created Object States for 5 Images and gave a Auto Slideshow, It plays well and stops at the first state but I want to freeze at the last Object State.
Is there any way to stop.
Thanks
Stanly

Select Stop at Last Image in the slideshow overlay creator.
Important: Make sure you have the most recent update to the Content Viewer from the iTunes Store. It was approved a couple of days ago.
Bob

A really simple cross-fade image for beginners

Hello, I would like to put a cross-fading image into a table that is my website header. I don't need anything complicated at all, no controls etc, just want 8 images that fit my cell to continuosly crossfade after 3 seconds or so. Found many scripts/plugins/jquery etc but they all seem very complicated for beginners. I've used 'easyrotator' which is so easy to use, but it doesn't seem to have a cross fade on the free mode, just a swipe and i'm sure I can find similar for free. Maybe I'm missing something but I would have thought dreamweaver (being the helpful prog that it is) would have something to do this?
Ideally, I would like it to be continuous regardless of the page people are on. I imagine this is above my head so if too tricky, perhaps it could just be random image fade.
Any advice on the best thing to use here is greatly appreciated!

Suzie8484 wrote:
Yes, it's the 'fade' option here: http://jquery.malsup.com/cycle/
There really isn't enough instructions on this website for beginners to understand exactly what and where to put the various code otherwise this would be perfect!
ok, here goes...i'll try to explain the process.
1) Insert a <div> on your page and give it the class of 'slideshow' like below.
<div class="slideshow">
</div>
2) Insert your images into the <div> as below: (example below shows images stored in 'images' folder)
<div class="slideshow">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
<img src="images/beach4.jpg" width="200" height="200" />
<img src="images/beach5.jpg" width="200" height="200" />
</div>
3) Style the 'slideshow' <div> with css. Go into code view and paste the below directly before the closing </head> tag near the top of your page.
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
4) Add the jquery scripts to your page. Go into code view and paste the below directly AFTER the css you pasted in above so this code is now directly before the closing </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<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>
Thats it!.
Well you would want to make sure the dimensions of the 'slideshow' <div> reflect those of your image.
So for instance if your image is 300px x 300px the dimensions should be 332px x 332px. (see below) Why the extra 32px - because this is allocated for the 15px left/right/top/bottom padding and 1 px border around the image that you see on the example page.
<style type="text/css">
.slideshow { height: 332px; width: 332px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
Also ideally you want to download the jquery cycle script rather than use the directly linked one just incase in future the script is moved.
So download the script from the link provided on the page and change this link:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
To wherever you keep the script in your site folder (below its kept in a folder named 'jquery_scripts':
<script type="text/javascript" src="jquery_scripts/jquery.min.js">

Fade in fade out pics

Hi there,
I'm wanting to get this effect:
http://www.affinityplanning.com/
in my pics. I want ab
out 10 images to fade in and fade out after about 3 seconds.
How do i do this?

You just need a very basic jQuery cycle images
http://www.malsup.com/jquery/cycle/basic.html
Are you familar with working in code at all?
The one above is popular and incredibly easy to implement on a website.
If you look at the page in 'view source code' you'll see this:
<!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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<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>
The parts you need to include in your page are the links to the two jQuery scripot which create the effect: These go in the <head></head> section of your page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<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>
AND the slideshow <div> - This is positioned on the page where you want the fading images to show. Replace the images below with your images.
<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>
PLUS the css for the slideshow <div> (this goes in the <head></head> section of your page. (Change the width and height to the same as YOUR images)
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
</style>
Thats it!

Issue with auto-play slideshow on the cover/first page

I'm finding a strange problem in a project that's about to ship.
Our "cover" is a full-screen slideshow (really some type animation) that is a simple slideshow through states. It look great in the Content Viewer.
When we build the app in Viewer Builder, the slideshow does not play. Just sits on the first image.
I know there's an issue about HTML "auto playing" on the first page (that is, you can't). But didn't think that applied to dps slideshows.
Has anyone seen this issue? Any solutions?
Thanks

Here's the panel.
Interestingly, if we build an app with only the cover (this page), it works. Building it with all articles makes it not work.
The 'play in reverse' was an attempt to fix this. Did not help or hinder.
Thanks

How to auto rotate Images on Full Screen Slideshow if pictures were taken mixed Portrait and Landsca

In Muse: How to auto rotate Images on Full Screen Slideshow if pictures were taken mixed Portrait and Landscape

There is no way that Muse would automatically rotate the images. What you can instruct Muse to do is whether you want to show all image content and leave blank space in either direction OR scale the image to fill the frame resulting in some cropping, but filling the otherwise blank space.
The options are Fit Content Proportionally and Fill Frame Proportionally respectively.
Cheers,
Vikas

Auto slideshow

Similar Messages

Maybe you are looking for