Widget arrows in slide show

Hello,
How to change arrows in a slide show (I want arrows from top to bottom and not from right to left.
comment changer les flèches dans un diaporama (je veux des flèches de haut en bas et pas de droite à gauche.
Thank you

You can drag and move the arrows (Next and Prev parts) to top center and bottom center of the Hero image. The arrows are just text (angular brackets) so you could double click on them and edit to whatever you like or fill an image if you want to. You can then change the Transition to Vertical in order for it to look and fit better with up and down arrows.
Thanks,
Vinayak

Similar Messages

In the slide show view how can you pin the "next" Arrow to the ultimate edge so it is in the same place as the full screen image, it will pin to the left edge but not the right.

In the slide show view how can you pin the "next" Arrow to the ultimate edge so it is in the same place as the full screen image, it will pin to the left edge but not the right.

Hello,
Please make sure that the next button is pinned to the right side as there in the attached image.
If it is already pinned, you can try removing any embedded HTML code and checking it.
Regards,
Neha

Why doesn't Firefox run an adobe flash player slide show (no arrows to move to next/previous slide), but internet explore does?

When I try to run a slide show in Firefox, the first slide displays but the arrows to move to next/previous slide do not appear. When I try in Internet Explorer, the arrows appear. Flash Player is enabled in Firefox. There must be another setting I need to adjust. I am running Windows 7. I don't see how to access Tools menu item in Firefox. I don't see where I can check my Firefox version. It is the current version as is Flash Player.

When I try to run a slide show in Firefox, the first slide displays but the arrows to move to next/previous slide do not appear. When I try in Internet Explorer, the arrows appear. Flash Player is enabled in Firefox. There must be another setting I need to adjust. I am running Windows 7. I don't see how to access Tools menu item in Firefox. I don't see where I can check my Firefox version. It is the current version as is Flash Player.

Weather widget and slide show problems

Hi
The site is www.heritageharbourcommunity.com
My site opens on a three column fixed page with header and footer. I have been able to define the area between the nav bar and footer as editable. When I go to incontext and try to make that area editable through incontext it seems fine until I test it. I receive a message that the area is not editable and I can make regions editable through incontext. Only the right most column has a dashed line around it. From that I assume the problem is with the weather widget in column 1 and the slide show in column 2.
All of my other pages are single column and seem to work well with incontext. Any suggestions? Thanks...Morgan

Hello MoBet,
InContext Editing regions cannot contain Flash or JavaScript content, so you should wrap the sections you want to have editable with div tags to separate them from this content. For example:
<div id="sidebar1">
    <div id="mysidebar1-1">
      <h3>New Website Group</h3>
<p>Mark your calendars. The organization meeting of the community website site group will be at 6:30 p.m. on November 30th at the Stoneybrook Rec Center. Everyone is welcome to come and find out whats happening and maybe how they can help.<a href="About_us/website_dev_home.html">Details.</a></p>
</div>
<p>

<script type="text/javascript" src="weatherwidget/weatherwidget.js"></script>

<noscript><a href="http://www.dwuser.com/" title="Dreamweaver Extensions">Dreamweaver Extensions by DWUser.com</a></noscript><script type="text/javascript">
// <![CDATA[
WeatherWidget({swf:'weatherwidget/weatherwidget.swf',w:'180',h:'125',redirect:'',textColor :'#FFFFFF',bgColor:'#98082E',bgAlpha:'100',useBevel:'true',loc:'34212',units:'e',loadingTe xt:'Loading...',humidityText:'Humidity: ',windText:'Wind: '});// ]]>
</script>

</p>
      <div id="mysidebar1-2"><p>Highs are near 80 degrees each day and sweaters are required for early morning walks.</p>
      <h3>Community Garage Sale</h3>
      <p>February 6 from 9-2pm</p>
      <p>It’s time to start thinking about what you want to dispose of around your house and in your garage. Our annual garage sale is just the ticket for unloading your treasures. Once again, the sale will be held at the Beacon Park Soccer Fields on February 6, 2010. This is a monster event and it attracts a huge crowd of buyers. Cost is $10 per space which allows you to park your car and set up right behind it. Applications are available at the Stoneybrook Recreation Center. Space is limited so it pays to sign up early. All applicants will be called just prior to the sale with full details. Call Anita or Lan Janecek at 746-3730 with your questions.</p>
      </div>

You will then be able to make individual editable regions for the two sidebar elements. Do the same for the center column:
(Note: You'll want to fix your improperly nested <h1> tag following <div id="mainContent">)
<div id="mycenter1-1">
<h1>Welcome</h1>
      <p>Our snow birds are returning. Its a relief to be back into our fine winter weather. Social events are gearing up as more people return. </p>
      <p>Helping Hands of Stoneybrook will host a breakfast with Santa for the children of Stoneybrook December 5th from 9:00 to 10:30 a.m. at the Stoneybrook Recreation Center. Sign up at the Stoneybrook Recreation Center or call Cathy Faust (941) 747-7379 for details.</p>
      <p>Happy 50th anniversary on November 21 to Mary Jane and Charles Hixson of Stoneybrook.</p>
      <h3><img src="images/two_little_girls.JPG" width="155" height="153" align="right" />Adopt a Family</h3>
<p>A number of Heritage Harbour residents have been lending a hand in Santa’s Southern Workshop this month as he gears up to help needy families for Christmas. The workshop is run by Adopt a Family and provides Christmas gifts to the children of families who have applied and are residing in Manatee County. </p>
      <p> Most days you’ll find Patti Sue Peotter-Bettes, a Stoneybrook resident, taking applications at the warehouse which was donated for the use of Adopt a Family. Louise Blank has been helping with applications as well. If you see her, ask her about the families and children she’s talked to. Janet and Luis Hidalgo have been indispensable in their role as Spanish translators. Many of the families are Spanish speaking and Luis and Janet Hidaldo help the interviewers learn the sizes of the children and what things they would like Santa to bring them. <a href="documents/adopt__family.pdf">more </a></p>
</div>
Please let me know if you need further assistance.
Best regards,
Corey

Slide show widget

Hi
I do occassional updating for a rape crisis center. I know a little html and some css and am using CS4. I need to make a three picture slide show quickly and do not do flash. Are there any easy to learn widgets in CS4 or does anyone know a second party widget that I can embed easily?
Many thanks,
Nancy

Oh heck, he's off on a wild goose chase of a widget that does not work in all versions of Dreamweaver.
Here is what I have been doing for two years:
Tobia Conforto's Cross Slide.
Now, what you are going to be using is JavaScript and jQuery. Tobia places a link to the minified version of jQuery on the website. Download that and place it into a js folder in your website. You may use your operating system to do this. Additionally, he has his Cross-Slide minified jQuery plugin downloadable there as well. That also goes in your js folder in the website. That folder must be uploaded to your server with all of the files in it.
Now, you're going to do three pictures. I generally put them into banners in my websites, but you can put them anywhere. You must define either a Class or an ID for where you are going to place those pictures in CSS:
#slide {
          height: 157px;
          background-image: url("../images/picture01.jpg");
Place the first picture you will have in your slide show into the background of that div as I have just done in my example above.
Now, you're ready to go to work. Make each image the same size and place the following in the head area of your web page:
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.cross-slide.min.js"></script>
<script type="text/javascript">
$(function() {
          $('#slide').crossSlide({
                    sleep: 2,
                    fade: 1
                    { src: 'images/picture01.jpg' },
                    { src: 'images/picture02.jpg' },
                    { src: 'images/picture03.jpg' }
</script>
Please understand that, in my example above I am calling version 1.4.2 of jQuery -- they may be out with a newer version and the "min" stands for the "minified" version. It downloads faster in a browser.
The JavaScript above should fit nicely just above the close of your head area. Make sure that the last curly brace for your last image does not have a comma after it. Microsoft's Internet Exploder will not show you the slide show if you forget that.
Now, in your HTML, do this:
<div id="slide"> 
</div>
Please notice I have used an ID and not a Class here because I don't place slide shows in multiple places on my pages. I think one's enough.
You can see this working right now on several of my websites
http://christinokitchens.com/
http://www.unitedstatesvending.net/
http://www.clarkelandscapes.com/
http://jwatts.com/
This method absolutely works. You can look at my code in each of the above websites and copy it. In each case, I'm making a header that provides the visitor with a slide show. I tend to name the ID differently for each because it really depends on what I'm thinking about at the time.
But this will get you done and operational with a minumum of fuss.
It is possible that Dreamweaver CS5.5 automates this kind of a thing, but I am still doing it manually because I learned this code while working with CS3.

Widget slide show and liquid layout

I am trying to use the widget slide show in a liquid layout and I need the slideshow to resize. I used the width 100% and tried the height set to auto but the image hight does not resize. how do I get the slideshow to resize both height and width.

I'm not entirely certain the slideshow widget is scalable. Many of them are not.
You can try adding this to your CSS code:
img {max-width: 100%; height: auto !important;}
If that fails, you might want to switch to a fixed-width, centered layout. Liquid layouts are very tricky to work with.
Alternatively, you could look for a jQuery slideshow that does support % widths -- although these carry the potential for distorting your images if the aspect ratio is not maintained.
Nancy O.

Triggers in Slide show widget jumps around in preview/published mode

I am using the slide show widget.
Have made triggers with different states.
In design mode they are perfectly aligned but in preview and after publishing, they jump around.
design mode
after publishing and in preview mode

What's the URL for the page? (You could publish to a free trial site on Adobe Business Catalyst and provide the URL...)

PowerPoint 2010 arrows in series lines was displayed reversely between the edit mode and the slide show

I encounter a strange problem with the column chart in PowerPoint 2010 (or maybe the combinations of Excel 2010 and PowerPoint 2010). The directions of the arrows in Series Lines display in the reverse direction between the edit mode and the Slide
Show.
Here are the steps to recreate this phenomenon:
Open a new Presentation > Insert > Chart > Column > Stacked Column > Press OK
Excel pops up. Close Excel and return to PowerPoint.
Click on the chart > Layout > Lines > Select "Series Lines"
Right click on the lines and select "Format Series Lines"
Line Style > End Type > Choose "Stealth Arrow"
(well, could not paste an image yet... arrows display like <--)
When F5 was pressed (Slide Show)
(well, could not paste an image yet... arrows display like -->)
If you look closely at the directions of the arrows, they are display in the reverse directions. Anyone is having the same issue?
Thanks!
Chen

Hi，
Based on my tested both of the PowerPoint 2010 and
PowerPoint 2013, I reproduced the issue in my environment.
If I choose the End Type> Stealth Arrow(---->), it showed "<-----" in "Normal mode", but showed the "---->" in "Slide Show mode". It seems display correctly in "Slide Show mode".
We have definitely heard your frustration, and we're thinking about ways to make this scenario work better for our customers. Please wait for the issue is fixed. Thanks.
Regards,
George Zhao
TechNet Community Support

Missing Arrow pictures in iWeb Slide Show

iWeb creates navigation items for slide shows created with photo pages.
Now due to the closing down of me.com these images have disappeared.
Here an example of one of these items:
http://www.me.com/1/slideshow/images/arrow_right_on.png
I use iWeb 3.0.4.
It's an oversight that is not very Apple like, please get these images back on the server quickly, to confirm that you are a company that puts quality first. Thank you!

@roger
Why should this be a problem?
it would be a problem when you design web sites for multi client:
1) it's not fair to one client to be leeched by others.
2) when the image host server goes down, other clients are hosed... just like with mme.
but if you have a neater solution please publish it
what's there for me to publish, it's an installation package and I have it.
@roddy
Why would you want to crticise OT's method
not crticising, just pointing out the flaws... it's an open forum.
It may be that the iWPopUpSlideshow.js is not the "proper place" to modify the slideshow but it works.
The "missing control background image" is easily fixed by changing the file paths in the iWPopUpSlideshow.css file in the resources folder.
that's just to prove iWPopUpSlideshow.js is not the proper place.
hint: slideshow.html is the file uses both iWPopUpSlideshow.js and iWPopUpSlideshow.css, start from there.
I don't see anybody coming up with something better and this is
yes I do have installation package for it, but with your (and other poeple's) snipy remarks at me... karma is...

Slide show does not work

I created a slide show. It works really well on the Prieview with a browser. Once I put it on the web it does not work. here is the code.
<%@LANGUAGE="JAVASCRIPT"
CODEPAGE="65001"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow */
#ImageSlideShow.ImageSlideShow {
    width: 300px;
    height: 300px;
    border: solid 5px #000000;
#ImageSlideShow .ISSClip {
    background-color: #333333;
/* EndOAWidget_Instance_2141542 */
</style>

<style type="text/css">
#apDiv16 {
    position: absolute;
    left: 267px;
    top: 289px;
    width: 402px;
    height: 331px;
    z-index: 14;
    border: thick ridge rgb(0,0,255);
</style>
<style type="text/css">
#apDiv17 {
    position: relative;
    left: 687px;
    top: 287px;
    width: 346px;
    height: 65px;
    z-index: 15;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    font-style: italic;
</style>
<style type="text/css">
#apDiv18 {
    position: absolute;
    left: 814px;
    top: 318px;
    width: 254px;
    height: 369px;
    z-index: 16;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 3px;
    color: rgb(0,0,0);
    font-weight: bold;
#apDiv18 P FONT {
    color: rgb(0,0,0);
#apDiv18 P FONT {
    font-weight: normal;
</style>
<style type="text/css">
#apDiv19 {
    position: absolute;
    left: 301px;
    top: 280px;
    width: 426px;
    height: 328px;
    z-index: 1000;
</style>
<style type="text/css">
#apDiv20 {
    position: absolute;
    left: 314px;
    top: 319px;
    width: 437px;
    height: 312px;
    z-index: 16;
</style>
<style type="text/css">
#apDiv21 {
    position: absolute;
    left: 273px;
    top: 231px;
    width: 520px;
    height: 23px;
    z-index: 16;
    font-size: 18px;
</style>
<style type="text/css">

</style>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv8 {
    position: absolute;
    left: 70px;
    top: 66px;
    width: 1280px;
    height: 41px;
    z-index: 8;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-weight: bold;
#apDiv2 {
    position: absolute;
    left: 11px;
    top: 213px;
    width: 140px;
    height: 308px;
    z-index: 9;
</style>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv3 {
    position: absolute;
    left: 302px;
    top: 321px;
    width: 654px;
    height: 466px;
    z-index: 10;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 10px;
    border-top-width: thick;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(0,51,255);
#apDiv7 {
    position: absolute;
    left: 2px;
    top: 35px;
    width: 302px;
    height: 326px;
    z-index: 7;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    line-height: 5px;
    font-weight: normal;
    color: #666;
#apDiv9 {
    position: absolute;
    left: 270px;
    top: 302px;
    width: 382px;
    height: 295px;
    z-index: 11;
    border: thick solid rgb(0,51,255);
.style12 {font-size: 18pt}
#apDiv7 P FONT {
    color: rgb(0,0,0);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
#apDiv10 {
    position: absolute;
    left: 4px;
    top: 164px;
    width: 131px;
    height: 293px;
    z-index: 999;
#apDiv11 {
    position: absolute;
    left: 670px;
    top: 298px;
    width: 268px;
    height: 61px;
    z-index: 13;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    color: #000;
.container .content #apDiv11 P FONT {
    color: rgb(0,0,0);
#apDiv13 {
    position: absolute;
    left: 134px;
    top: 230px;
    width: 864px;
    height: 551px;
    z-index: 13;
#apDiv14 {
    position: absolute;
    left: 151px;
    top: 252px;
    width: 605px;
    height: 278px;
    z-index: 13;
#apDiv15 {
    position: absolute;
    left: 98px;
    top: 392px;
    width: 1350px;
    height: 496px;
    z-index: 13;
#apDiv16 {
    position: absolute;
    left: 339px;
    top: 249px;
    width: 724px;
    height: 37px;
    z-index: 900;
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-color: rgb(255,0,0);
#apDiv17 {
    position: absolute;
    left: 50;
    top: 266px;
    width: 620px;
    height: 1;
    z-index: 13;
    background-color: #FF0000;
#apDiv22 {
    position: absolute;
    left: 132px;
    top: 50px;
    width: 40px;
    height: 46px;
    z-index: 1000;
    color: #FFF;
#apDiv23 {
    position: absolute;
    left: -103px;
    top: 340px;
    width: 800px;
    height: 3;
    z-index: 10;
    border-top-width: thick;
    border-top-style: groove;
    border-top-color: rgb(255,0,0);
#apDiv30 {
    position: absolute;
    height: 30px;
    width: 1000px;
    left: -102px;
    top: 288px;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<style type="text/css">
#apDiv16 {
    position: absolute;
    left: 264px;
    top: 326px;
    width: 402px;
    height: 331px;
    z-index: 14;
    border: thick ridge rgb(0,0,255);
</style>
<style type="text/css">
#apDiv17 {
    position: absolute;
    left: 687px;
    top: 324px;
    width: 346px;
    height: 65px;
    z-index: 15;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
</style>
<style type="text/css">
#apDiv18 {
    position: absolute;
    left: 687px;
    top: 392px;
    width: 254px;
    height: 358px;
    z-index: 16;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    line-height: 0px;
</style>
<style type="text/css">
#apDiv19 {
    position: absolute;
    left: 214px;
    top: 293px;
    width: 952px;
    height: 375px;
    z-index: 101;
</style>
<style type="text/css">
#apDiv22 {
    position: absolute;
    left: 216px;
    top: 286px;
    width: 906px;
    height: 348px;
    z-index: 17;
#apDiv24 {
    position: absolute;
    left: 70px;
    top: 518px;
    width: 785px;
    height: 113px;
    z-index: 1000;
#apDiv25 {
    position: absolute;
    left: 222px;
    top: 361px;
    width: 115px;
    height: 250;
    z-index: 7;
</style>
<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>
<script type="text/xml">

</script>

</head>
<body>
<div>Content for New Div Tag Goes Here</div>
<div>Content for New Div Tag Goes Here</div>
<container class="container">
<div id="apDiv1">

<div id="apDiv25">
<ul id="ImageSlideShow">
    <li><a href="../images/bent_shank_wnuts.jpg"><img src="../images/src/bent_shank_wnuts.jpg" alt="" /></a></li>
    <li><a href="../images/champion_rivet_at_operator.JPG"><img src="../images/src/champion_rivet_at_operator.JPG" alt="" /></a></li>
    <li><a href="../images/coining.jpg"><img src="../images/src/coining.jpg" alt="" /></a></li>
    <li><a href="../images/dry_box_workers.jpg"><img src="../images/src/dry_box_workers.jpg" alt="" /></a></li>
    <li><a href="../images/laser_shlomo.jpg"><img src="../images/src/laser_shlomo.jpg" alt="" /></a></li>
<li><a href="../images/lung-blocker-white-gowns.jpg"><img src="../images/src/lung-blocker-white-gowns.jpg" alt="" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141542: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
    widgetID: "ImageSlideShow",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 4000,
    transitionDuration: 2000,
    componentOrder: ["view", "controls"],
    plugIns: [ Spry.Widget.ImageSlideShow.PanAndZoomPlugin ]
// EndOAWidget_Instance_2141542
</script>
</div>
<div id="apDiv23"></div>

NOGAH
<div id="apDiv5">Machine Designers & Builders</div>
<div id="apDiv4">smart innovative engineering </div>
</div>

<div id="apDiv15">
<p> </p>
</div>

<div class="header"><a href="#"><img src="../images/logoN.jpg" alt="Insert Logo Here" name="Insert_logo" width="100" height="150" id="Insert_logo" style="color: #F00; text-transform: uppercase; font-size: 40px; font-family: 'Arial Black', Gadget, sans-serif; display: block;"></a>
</div>
<div class="content">
    <div id="apDiv6" style="left: 100px; top: 170px">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">Home</a>        </li>
        <li><a href="facility.html">Our Facility</a></li>
        <li><a href="about%20us.html">About Us</a></li>
<li><a href="contact%20us.html">Contact Us</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">Medical</a>
          <ul>
            <li><a href="lung%20blocker%20bed%20mounted.html">Lung Blocker Bed Mounted</a></li>
            <li><a href="lung%20blocker%20stand.html">Lung Blocker Stand</a></li>
            <li><a href="couch.html">Radiation Couch</a></li>
            <li><a href="lab%20bench.html">Lab Bench</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Biotech</a>
          <ul>
            <li><a href="mega%20base%20SH.html">Mega Base Dispensing S.H</a></li>
            <li><a href="mega%20base%20DH.html">Mega Base Dispensing D.H</a></li>
            <li><a href="filling%20machine.html">Liquid Filling Machine</a></li>
            <li><a href="powder%20dispenser.html">Powder Dispensing</a></li>
            <li><a href="capper.html">Capper</a></li>
            <li><a href="laser%20labeler.html">Laser Labeler</a></li>
            <li><a href="racker.html">Vial Racker</a></li>
            <li><a href="dry%20box.html">Glove Box</a></li>
            <li><a href="heat%20seal.html">Sealing Press</a></li>
</ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Polymers</a>
          <ul>
            <li><a href="lid%20stacking.html">Lid Stacking</a></li>
            <li><a href="heat%20staking%20machine.html">Heat Staking</a></li>
            <li><a href="tire%20assembly.html">Roller Assembly</a></li>
            <li><a href="lint%20trap.html">Lint Trap</a></li>
            <li><a href="bosch.html">Dryer Assembly</a></li>
            <li><a href="marbal.html">Cooling Tower</a></li>
            <li><a href="jar%20trimming.html">Jar Trimming</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Fasteners</a>
          <ul>
            <li><a href="bent%20shank.html">Bent Shank </a></li>
            <li><a href="lug%20nuts%20tapping%20machine.html">Lug Nuts</a></li>
            <li><a href="round%20small%20nuts.html">Rivets Tapping</a></li>
            <li><a href="knurling.html">Knurling</a></li>
            <li><a href="eyebolts.html">Eye Bolts</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Feeding</a>
          <ul>
            <li><a href="feeding%20with%20vision.html">Using Vision</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Metal</a>
          <ul>
            <li><a href="champion.html">Rail Road</a></li>
            <li><a href="assembly.html">Assembly</a></li>
            <li><a href="coining.html">Coining</a></li>
            <li><a href="pointing.html">Pointing</a></li>
            <li><a href="damper%20assembly.html">Damper Assembly</a></li>
            <li><a href="fomo.html">Notching</a></li>
            <li><a href="nut%20welder.html">Nut Welding</a></li>
            <li><a href="soundwich.html">Dashboard</a></li>
            <li><a href="water%20pump.html">Drilling</a></li>
            <li><a href="rotor_deburing.html">Deburing</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">General</a>
          <ul>
            <li><a href="road%20construction.html">Road Construction</a></li>
            <li><a href="large%20hose.html">Large Hose Mfg. Drive</a></li>
          </ul>
        </li>
        <li><a href="IMTS%20show.html">IMTS Show</a></li>
        <li><a href="http://www.yedaengineering.com/">Yeda LLC</a></li>
      </ul>
</div>
<h2> </h2>
    <p class="MenuBarHorizontal"> </p>
    <p> </p>
<p class="style12"> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div class="footer">
    <div id="apDiv8">Nogah Engineering 1800 London Road Unit C Cleveland Ohio 44112 USA Tel: 216.738.1730 Fax: 216.738.1770 </div>
    <p> </p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Thanks.

All these supporting files are missing (404 not found on server).
<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>
Upload Spry-UI-1.7 folder to your remote server by clicking the folder and hitting the UP arrow in your Files Panel.
Also, validate your code and fix reported errors. You have unbalanced div tags.
HTML - http://validator.w3.org/
Nancy O.

When trying to view "slide shows" esp. on PC World site, my browser will not activate the picture slide right or left.

Clicking on the "slide show" navigation arrow, I cannot get FireFox to slide horizontally to the next window in the slide show. I get an hour glass, but no results.

sorry - we've been working on the website over the weekend so it isn't the same anymore because the person working on it already changed the facebook feed to some text and told me that we'll see about making it the way it was later, nevertheless, i absolutely do have screenshots- they simply would not load on the page to post the initial question.
in the ff browser neither the yt widget or the fb 'feed' were showing, but the ie browser had them correctly displayed. apologies because as of right this minute the site won't look like that in any browser - with the messing about of the weekend it currently shows as in the 3rd screenshot - i put the windows next to each other and captured just the relevant part - on the left side is ie showing the yt widget and text for a fb link, but on the ff side, there's still no yt widget, it does show the text but ultimately the idea is to get it back to what it looks like in the second shot of the ie browser.
i hope i didn't confuse things -
and thank you VERY much for any help (i've looked at the question for websites don't appear as they should but clearing cache and cookies didn't help)

100% width slide show misaligns content placed over it

I have been able to replicate this a few times and was wondering if anyone had any insight or the same issue:
1. Add 100% width slide show (full page) to page from widget menu.
2. Once established, add 100% width rectangle at top ( this is where logo and horizontal menu will go)
3. Add logo and menu over 100% width rectangle.
4. Change opacity of rectangle to 64%
5. Publish to BC
Upon publish, the rectangle gets pushed up about 40px and the logo and menu and pushed down about 20px. It seems something gets inserted? Very frustrating. I have tried putting the slide show in a separate layer as well. No luck.
on PC, windows 7 ultimate.

Sure: Home
This is a basic page:
Full page/width slide show - you can see that I only deleted the captions and arrows - no other changes to slideshow.
Full page slide show with a rectangle (no border, opacity 77%. height: 102px)
Tagline over the rectangle.
Logo Rectangle with "Logo" text over that.
You can see the transparent rectangle gets pushed up, the other elements remain in place.
I can replicate this over and over and just did this example on a Windows machine again - different computer.

ANNC: Slide Show Magic

http://www.projectseven.com/products/galleries/ssm/
Leaps beyond the ordinary...
Efficient code and buttery smooth animations make for a truly
engaging
user experience. Slide Shows and individual images can be
bookmarked and
all images can be viewed - even if JavaScript is disabled.
Search Engine Friendly
Unlike many of today's Flash and AJAX applications, Slide
Show Magic
markup is always fully visible and indexable by leading
search engines.
Auto-Choreographed Animation
Slide Show Magic detects the size of each incoming full-size
image. If
it's the same size as the current image, the system will
employ a smooth
cross-fader - simultaneously fading out the current image as
the new one
fades in. If the incoming image is a different size than the
current
one, the system will fade out the current image, glide the
image
container to the size of the incoming image, then fade the
new image in.
It's all automatic.
Staged preloader
When the slide show is running in automatic mode, the system
will
preload the next image as the current one is being shown,
providing a
seamless experience in most cases.
Intuitive toolbar controls
The on-page toolbar contains conventional media controls:
First,
Previous, Play, Pause, Next, and Last buttons. It also
contains a slider
bar that allows users to adjust the slide show timing, plus
buttons to
toggle visibility of the thumbnail display and navigation
menu, and an
image counter.
Drag-enabled thumbnail panel
The Thumbnail panel can be dragged about the screen, enabling
users to
fine-tune the interface for best viewing of the show.
Full-Size images can be hyperlinks
Each full-size image can optionally be set as a hyperlink to
another
page, programmed to open in a new window or tab.
Image descriptions
Each full-size image can display an optional description,
which can
contain any type of valid markup (paragraphs, tables, DIVs,
lists,
links, or images).
Automated image processing with Fireworks...
Web-ready images are automatically produced from your
original images,
which can be located on any drive connected to your computer
- including
drives mounted by your digital camera. Slide Show Magic
handles all
image processing automatically - preserving your original
files in their
original locations in their original and unaltered states.
Your images
are scaled, optimized, and neatly organized into folders
within your
defined site.
Import your existing images...
Point to a folder (or folders) that contain your existing
full-size and
thumbnail image and Slide Show Magic will match them up and
add them to
your slide show - unaltered and ready to view.
Organize Images into sets
Slide Show Magic enables you to define logical image sets and
organizes
the thumbnail panel into navigable sets.
Mix landscape and portrait orientations
Your images are never distorted in any way. Original aspect
ratios are
always preserved. Use both landscape and portrait images in
the same
slide show.
Deploy alone or inside existing layouts
Slide Show Magic can be inserted on a page by itself or
inside an
existing page.
Select from 6 Themes
Select a dark toolbar, a light toolbar, shadow boxes (in 3
sizes), or an
image rotator interface. Style themes can even be switched
for existing
slide shows.
Manage it all inside a dedicated Dreamweaver Interface
Add (append) new images
Delete images or re-order them
Manage Descriptions, links, and ALT text
Edit existing full-size or Thumbnail images
Reprocess all of your slide show's images
And lots more, including a comprehensive manual and free tech
support.
$95
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Al,
Wow. That's extremely cool. I currently don't have a need for
a slideshow,
but in the future if I do, you know where I'm heading to.
Nice product!
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Back for 2007, close-up magic:
http://deceptivemagic.com
Web dev articles, photography, and more:
http://sourtea.com
=============================================
Proud GAWDS member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"Al Sparber- PVII" <[email protected]> wrote in
message
news:[email protected]...
>
http://www.projectseven.com/products/galleries/ssm/
>
>
> Leaps beyond the ordinary...
>
> Efficient code and buttery smooth animations make for a
truly engaging
> user experience. Slide Shows and individual images can
be bookmarked and
> all images can be viewed - even if JavaScript is
disabled.
>
>
> Search Engine Friendly
>
> Unlike many of today's Flash and AJAX applications,
Slide Show Magic
> markup is always fully visible and indexable by leading
search engines.
>
>
> Auto-Choreographed Animation
>
> Slide Show Magic detects the size of each incoming
full-size image. If
> it's the same size as the current image, the system will
employ a smooth
> cross-fader - simultaneously fading out the current
image as the new one
> fades in. If the incoming image is a different size than
the current one,
> the system will fade out the current image, glide the
image container to
> the size of the incoming image, then fade the new image
in. It's all
> automatic.
>
>
> Staged preloader
>
> When the slide show is running in automatic mode, the
system will preload
> the next image as the current one is being shown,
providing a seamless
> experience in most cases.
>
>
> Intuitive toolbar controls
>
> The on-page toolbar contains conventional media
controls: First, Previous,
> Play, Pause, Next, and Last buttons. It also contains a
slider bar that
> allows users to adjust the slide show timing, plus
buttons to toggle
> visibility of the thumbnail display and navigation menu,
and an image
> counter.
>
>
> Drag-enabled thumbnail panel
>
> The Thumbnail panel can be dragged about the screen,
enabling users to
> fine-tune the interface for best viewing of the show.
>
>
> Full-Size images can be hyperlinks
>
> Each full-size image can optionally be set as a
hyperlink to another page,
> programmed to open in a new window or tab.
>
>
> Image descriptions
>
> Each full-size image can display an optional
description, which can
> contain any type of valid markup (paragraphs, tables,
DIVs, lists, links,
> or images).
>
>
> Automated image processing with Fireworks...
>
> Web-ready images are automatically produced from your
original images,
> which can be located on any drive connected to your
computer - including
> drives mounted by your digital camera. Slide Show Magic
handles all image
> processing automatically - preserving your original
files in their
> original locations in their original and unaltered
states. Your images are
> scaled, optimized, and neatly organized into folders
within your defined
> site.
>
>
> Import your existing images...
>
> Point to a folder (or folders) that contain your
existing full-size and
> thumbnail image and Slide Show Magic will match them up
and add them to
> your slide show - unaltered and ready to view.
>
>
> Organize Images into sets
>
> Slide Show Magic enables you to define logical image
sets and organizes
> the thumbnail panel into navigable sets.
>
>
> Mix landscape and portrait orientations
>
> Your images are never distorted in any way. Original
aspect ratios are
> always preserved. Use both landscape and portrait images
in the same slide
> show.
>
>
> Deploy alone or inside existing layouts
>
> Slide Show Magic can be inserted on a page by itself or
inside an existing
> page.
>
>
> Select from 6 Themes
>
> Select a dark toolbar, a light toolbar, shadow boxes (in
3 sizes), or an
> image rotator interface. Style themes can even be
switched for existing
> slide shows.
>
>
> Manage it all inside a dedicated Dreamweaver Interface
>
> Add (append) new images
> Delete images or re-order them
> Manage Descriptions, links, and ALT text
> Edit existing full-size or Thumbnail images
> Reprocess all of your slide show's images
>
> And lots more, including a comprehensive manual and free
tech support.
> $95
>
> --
> Al Sparber - PVII
>
http://www.projectseven.com
> Extending Dreamweaver - Nav Systems | Galleries |
Widgets
> Authors: "42nd Street: Mastering the Art of CSS Design"
>
>
>
>

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

How do I add an image already in the page to a slide show ?

It seems so simple: I have a couple of images already spread out on a page, but later on I decide to collect them into a simple slide show after all. So I drag this Slide Show widget into place, and now ? Yeah, I know, I should use the button to select new images into it, or drag them as files from my Finder onto the Slide Show. But I already have them sitting on my page ! Isn't there a quicker and better way ? I tried copying and pasting in a lot of ways, and I can change the existing (three) sample images, but it's not even so easy to do it. Anyone ?
BTW, I know I could use Compositions, and at least they offer a simple + button to add extra instances to the widget. But I'd like to these plain vanilla Slide Show widgets in this situation.

Hi,
I used a blank slideshow, and then I dragged an existing image from the page and drop to the slideshow, it works absolutely fine, check this screenshot
is that what you are referring here, or did I miss anything

Widget arrows in slide show

Similar Messages

Maybe you are looking for