Basic image slideshow

i just switched over from "CS2 - GoLive" to "CS3 -
Dreamweaver", i had a slide show script from MindPalette.com that
worked great in GoLive. Is there something similiar for DW? i went
to adobe exchange and tried "linked slide show" and "trans slide
show." i couldn't get either to work. do these work well? they are
both installed and show up where they are supposed to in the
program. it's a very simple slide show so i'd like to avoid flash
if possible.
http://cedsite.org/donations.html
(this version was created in GoLive, i haven't uploaded the
Dreamweaver version)
Macbook Pro, 10.5.1, CS3 Design Premium

brad_goldstein wrote:
> i just switched over from "CS2 - GoLive" to "CS3 -
Dreamweaver", i had a slide
> show script from MindPalette.com that worked great in
GoLive. Is there
> something similiar for DW? i went to adobe exchange and
tried "linked slide
> show" and "trans slide show." i couldn't get either to
work. do these work
> well? they are both installed and show up where they are
supposed to in the
> program.
>
> Macbook Pro, 10.5.1, CS3 Design Premium
>
I like www.dwuser.com's Flash slideshow. You do not need to
know Flash
at all, btw. Btu you will get plenty of other ideas here.
Also see
http://www.eleanorstravels.com/photogallerysuggestions.htm
E. Michael Brandt
www.divaHTML.com
divaPOP : standards-compliant popup windows
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Similar Messages

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.

What are the different options for creating a basic image slideshow in Dreamweaver 5?

Hi, I have created slideshows in Bridge, and they all work fine. They aren't exactly what I had in mind, but this was the only solution I could find that I could understand. My knowledge of web design is minimal at the most. I have attached the slideshows to my html website using IFrames, but it doesn't load properly in Safari.
I included the code at the bottom of this post.
The code dealing with the slideshow and IFrame in question are towards the bottom of the document, I marked them in bold. All the styles with regards to the <div> locations and such are on a separate stylesheet, I'm not sure if you would need that to help out.
I'm wondering if someone could clue me in as to what I can do with this code to make this slideshow work properly in safari. I checked in Chrome and it loads properly. Unsure about other browsers, I do not have access currently.
I am also wondering if there is another way I can create a slideshow using CSS5. This slide show is fine, but I was also looking to include text--image names and descriptions--without having to edit each image in Photoshop to include the text.
Thank you for your time, any help would be appreciated.
<!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>
<meta name="creator/artist" content="Ryan Olsen" /><meta name="keywords" content="Ryan Olsen, artist, paint, draw, dark fantasy, landscape, seascape, Paire, Connecicut, New York" /><meta name="description" content="The collection of art by Ryan Olsen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ryan Olsen's Studio</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="ryanolsenstudios.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('images/gallerytabroll.jpg','images/transformativeroll.jpg','ima ges/landscapesroll.jpg','../ryanolsenstudios/illustrationstab.jpg','images/illustrationrol l.jpg','images/bioroll.jpg','images/petportraitroll.jpg','images/sparklessroll.jpg')">
<div id="pagetop">
<div id="header">
<img src="images/name.jpg" width="1057" height="87" alt="name" />
</div>
<div id="banner">
<img src="images/banner.jpg" width="1158" height="155" alt="banner" /> </</div>
</div>
<div id="navigationalmenu">
<div id="gallerytab">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery tab','','images/gallerytabroll.jpg',1)"><img src="images/gallerytab.jpg" alt="gallery" name="gallery tab" width="252" height="72" border="0" class="MenuBarItemSubmenu" id="gallery tab" /></a>
    <ul>
      <li><a href="transformative.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('transformative','','images/transformativeroll.jpg',1)"><img src="images/transformative.jpg" alt="transformative" name="transformative" width="174" height="53" border="0" id="transformative" /></a>
      <li><a href="landscapes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('landscapes','','images/landscapesroll.jpg',1)"><img src="images/landscapes.jpg" name="landscapes" width="174" height="53" border="0" id="landscapes" /></a></li>
      <li><a href="illustrations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('illustrations','','images/illustrationroll.jpg',1)"><img src="images/illustrations.jpg" name="illustrations" width="174" height="53" border="0" id="illustrations" /></a>
</li>
<li>
<a href="petportraits.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pet portrait','','images/petportraitroll.jpg',1)"><img src="images/petportrait.jpg" alt="pet portraits" name="pet portrait" width="174" height="53" border="0" id="pet portrait" /></a></li>
<li>
<a href="sparkless.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sparkless','','images/sparklessroll.jpg',1)"><img src="images/sparkless.jpg" alt="sparkless" name="sparkless" width="174" height="53" border="0" id="sparkless" /></a>
</li>
    </ul>
</li>
</ul>
</div>
<div id="showstab">
<a href="shows.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('showstab','','images/showsroll.jpg',0)"><img src="images/shows.jpg" alt="shows" name="showstab" width="252" height="72" border="0" id="showstab2" /></a>
</div>
<div id="hometab">
<a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hometab','','images/hometabroll.jpg',0)"><img src="images/hometab.jpg" alt="home" name="hometab" width="252" height="72" border="0" id="hometab2" /></a>
</div>
<div id="biotab">
<a href="bio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/bioroll.jpg',1)"><img src="images/bio.jpg" alt="bio" name="bio" width="252" height="72" border="0" id="bio" /></a>
</div>
</div>
<div id="warpage">
<a href="https://www.facebook.com/WARSPIT" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Welcome to WAR">Welcome to WAR</a><br/><a href="https://www.facebook.com/WARSPIT" target="_TOP" title="Welcome to WAR"><img src="https://badge.facebook.com/badge/515768845136977.2357.1022321304.png" style="border: 0px;" /></a><br/><a href="https://www.facebook.com/advertising" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Promote Your Page Too</a>
</div>
<div id="ryanpage">
<a href="https://www.facebook.com/ryanolsenstudios" title="Ryan Olsen Studios" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Ryan Olsen Studios</a><br /><a href="https://www.facebook.com/ryanolsenstudios" title="Ryan Olsen Studios" target="_TOP"><img class="img" src="https://badge.facebook.com/badge/572127626212351.1710.552992230.png" style="border: 0px;" alt="" /></a><br /><a href="https://www.facebook.com/advertising" title="Make your own badge!" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Promote Your Page Too</a>
</div>
<div id="ryaninstagram">
<a href="http://instagram.com/ryanolsenstudios" target="_new"><img src="images/instagram-glyph.jpg" width="112" height="144" alt="instagram" /></a>
</div>
<div id="gallery">
<iframe src="Transformative/index.html" width="1003" height="834" frameborder="0" name="gallery">
</iframe>
</div>
</div>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Have a look here Jquery slideshow tutorial for beginners | WEBTUTS

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.

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

I am having an issue with the widget Spry image slideshow-Basic (1,0), when i preview the slideshow it worked perfectly, once i have uploaded it to the server the slideshow doesn't load, it just loads the images in a line below eachother. When i open it up in I.E it sais there is an error on page.
Error Code:
<script type="text/javascript">
// BeginOAWidget_Instance_2141542: #ImageSlideShow_2
varImageSlideShow_2 = newSpry.Widget.ImageSlideShow("#ImageSlideShow_2", {
      widgetID: "ImageSlideShow_2",
      injectionType: "replace",
      autoPlay: true,
      displayInterval: 4000,
      transitionDuration: 2000,
      componentOrder: ["view"],
      plugIns: [ ]
// EndOAWidget_Instance_2141542
</script>
Your help would be much appreciated

In Dreamweaver CS5, I launch IE and it does show the pictures one on top of the other (when the message about running scripts or Activex controls shows up) and when I allow blocked content, it hangs. Maybe it has to do with your IE configuration.

Spry Image Slideshow with Filmstrip (1.0) - strange behavior

I am developing a fairly simple website based on Adobe's fixed two-column, header & footer template. The left column is now 180 px wide, with the right column being 630 px. When I place the Lightbox Gallery Widget into the editable region of the main content area, it works fine. When I place the Wanderlust theme Spry Content Slideshow, it works fine. When I place the Spry Image Slideshow Basic, it works fine. But when I place the Spry Image Slideshow with Filmstrip, it works sorta... The navigation buttons work but are displaced toward the top of the image area and the photos are significantly below them. It works, but it look terrible. (see below) When I place the same widget into a blank HTML page it works fine, there is no displacement. I have tried resizing just about everything including the main content area width, the view port, etc. It does not matter if I use the default or an edited version of the widget. What am I doing wrong? Or what do I need to change? I really like the way the widget looks, but cannot get it to work.
I am doing all of this in CS5 on a Mac (10.6.4).

vw2ureg,
Thanks for your help. I, too, was able to get it to work with a page with the default two-column, fixed template. I must have made an error in resizing the template and/or am resizing the widget incorrectly. I think my dimensions for the template are as follows: left column (180 content, 20 left padding, 10 right padding, 210 total) and main content (210 left margin, because the left column is floated; 630 content, 20 left, 20 right padding, 670 total). Which both fit into a container of 880px. Correct? Yet even when the widget view port is sized to 600, I still get the effect shown in my original post. FYI, in order to reduce sources of error I have stuck with the demo images rather than inserting my own at this point.
Once again, I do appreciate your help. Although I'm very much the newbie at this, I'm finding it very interesting.

Spry Image Slideshow - Only see play button but not slideshow

Hi,
I am having trouble getting Spry Image Slideshow to work on my test site. Can somebody help me?
Problem:     I only see the "play" button spinning after it went live but cannot get the slideshow to appear.
Details:
     Dreamweaver CS5.5
     Widget :     Spry image Slideshow Basic 1.0 - (widget wid = "2141542")
     Mac OS 10.6.3
     Mozilla Firefox 8.0.1
               1. Inserted Spry Image Slideshow 1.0 widget into my page "ACS_shipping.html"
               2. Replaced sample pictures and thumbnail pictures with some of my test pictures.
               3. A list of thumbnails appears on my design page.
               3. Click on "Live View" button; only see the frame and the black background with the "play" button spinning on the screen.
               4. Uploaded files on server and found same result.
    Webpage Link:            locicompany.ca/ACS/ACS_shipping.html
Loci

I don't know what to say....I tried all night it didn't work. As soon as I posted my question on the forum the slideshow starts running....wow....I'm speechless. Thanks all who's looked at my post.
Loci

Spry image slideshow not displaying as expected

Hoping someone in this forum can help, as I have previously posted this problem in the Spry forum, but I only got one answer and it didn't seem to fix the problem.
I used the widget browser to place a copy of the 'spry image slideshow with filmstrip' widget on to one of my web pages. When this page displays, there is a big gap (like excess padding) above the main image (between the outer frame and the main image frame). I can't see why this is happening or what bit of HTML/CSS to tweak to sort it out.
I have uploaded my test page to the server and you can see it here:
http://www.hebrideansheep.org.uk/test_gallery.html
any and all help gratefully received.
John

The problem lies with stylesheet.css. If you delete that, you will see that the slideshow will display as expected.
When doing a layout for the page, just look at the basics. In your case you have got a header, a sidebar, main content and a footer, all within a width of 960px and centered within the viewport. The basic CSS for the layout would look like
/* CSS Document */
html {
    margin: 0px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    background: #666 url(images/page_bkgd.jpg) repeat-x;
body {
    width: 960px;
    margin: auto;
    background: #FFF url(images/content_bkgd_tile.jpg) repeat-y;
#header {
    height: 180px;
    background: #4971a2 url(images/banner_bkgd.jpg) no-repeat;
#aside {
    width: 20%;
    float: left;
    /*----for this example only*/
    background: #cfcfcf;
    min-height: 400px;
    /*----end for this example only*/
#article {
    width: 80%;
    float: left;
    min-height: 400px; /*for this example only*/
#footer {
    clear: both;
    height: 88px;
    background: #cfcfcf url(images/footer_bkgd.jpg) no-repeat;
The HTML will look like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="untitled.css" rel="stylesheet">
</head>
<body>
<div id="header">
<h1>My Header</h1>
</div>
<div id="aside">
    My Menu Bar
</div>
<div id="article">
    this is where the slideshow goes
</div>
<div id="footer">
    my copyright etc
</div>
</body>
</html>
Gramps

How do i create a linked image slideshow?

I'd like to have asimilar linked image slideshow to the one at the top of this page...
http://www.jdwetherspoon.co.uk/
Any tips would be greatly appreciated thank you!!

jQuery Sliders:
http://basic-slider.com/
http://nivo.dev7studios.com/
http://wowslider.com/
Google will reveal countless others.
Nancy O.

Is there anyway to create a basic Image Viewer in CS5?

Hello,
Im looking for a really basic Image Viewer - exactly like the one you could create using DW CS3 but od corse it was discontinued. Is there any other way I can create something similar using CS5? or if not can anyone recomend a bsic one on - line without all the thumb Nails and fancy stuff.
Here is a perfect example of what I am looking for.
www.broadsoft.com.au/janielle/test5
Thanks

Log-in to the Adobe Widget Exchange with your Widget Browser.
There are a some jQuery and Ajax powered image viewers & slideshows you can grab for your site.
jQuery Cycle Widget
Lightbox Gallery Widget
Spry Content Slides
Spry Image Slideshow
I don't recommend using a Flash viewer because it's not supported by all web devices.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry Image Slideshow Wonky

Dear Spry Community,
I made my webpage live today using a basic spry image slideshow. The slideshow seems to work great in CS5 dreamweaver (Google chrome view) but online it has a second image ghosting below, kind of like a double slideshow.
http://mattwallisphotography.com/
Does anybody out there know what is going on here or how to fix it?
Thanks

You need to upload all of the Spry support files
<link href="Spry-UI-1.7/css/SpryImageSlideShow.css" rel="stylesheet" type="text/css" />
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
Gramps

SWF Basic Image Slider Causes "Blocked Script" Warning in IE

Hey Guys,
I just recently coded a basic image slider/slide show in Flash CS5. Bassicly, it's just a bunch of images that slide via motion tween in and out of view (Like on the right side of Pizzahut.com, my clients insperation) but, when published and thrown into my HTML, it causes Internet Explorer to give the "To Help Protect Your Security, Internet Explorer has prevented this webpage from running scripts or active X Controlls" and you have to click the little bar at the top and select "Allow Blocked COntent" for the slideshow to work. I specifically coded this show in flash (Published as an SWF) to avoid this warniong (As opposed to J-Query) and I have sites that I have made with similar SWF image sliders that don't through up this warning (http://www.grangerfun.com/pizza.asp) for example. Is there something I am doing wrong? A publish setting maybe? Thanks for your help!

when you test local files you'll often cross a security sandbox from a local file to an internet file. to resolve, either upload the file(s) to a server (so they're all in the internet sandbox) or change your local flash player settings: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htm l

Flash transition for image slideshow

I have a quick Flash animation that is basically an image slideshow
I need to smooth the transitions between them (for example make them blend into each other)
my way to do it if I followed my intuition would be to select both frames holding the keyframes for two given photos > right click > pick a transition
but that's not possible
Please let me know
thanks

I have a quick Flash animation that is basically an image slideshow
I need to smooth the transitions between them (for example make them blend into each other)
my way to do it if I followed my intuition would be to select both frames holding the keyframes for two given photos > right click > pick a transition
but that's not possible
Please let me know
thanks

Image slideshow with filmstrip display problem

I'm not sure whether this is the right discussion group for this and therefore if it is wrong I apologise.
Using Dreamweaver CS5 under Windows XP I've developed a new website and tested it to my satisfaction. I've now started to deploy the pages to my new live site. The majority of the deployment has been just using the Synchronize Sitewide facility. As far as I can see everything is working as expected except for one page.
This uses the Spry Image Slideshow with Filmstrip - Basic:#ImageSlideShow. In my development site the varying size pictures display with the picture and black background. In my live page when selecting a new image parts of the previous image are still showing. Can anyone please advise what I should change or need to do for the pictures to display correctly?
The live page can be found at http://baughen.co.uk/HarryBaughan.html
The above snapshot illustrates the error.
Thanks
Cliff
Level - novice++

Thanks for the suggestion but this code was already in at line 4.
The pan and zoom seems to have kicked in since my last change (I went back and deleted the widget and then reinserted). The problem is less noticeable unless you click on the individual thumbnails. Is there any straightforward documentation on how to manage the pan and zoom, even if it is just to remove it?
Thanks
Cliff

Basic image slideshow

Similar Messages

Maybe you are looking for