V3 slide show loses it's navigation
I'm finding that the full screen slide show loses it's navigation, and skips to different pictures at random. This worked rock solid in V2.
Do I need to re-install?
Maybe I am doing something wrong...
I am viewing the album by "folder location".
The thumbnails show up, sorted by file name.
So far, so good.
When I select a sequence of pictures and hit F11,
I get a slideshow sorted differently than the
thumbnail sequence (oldest to newest, I think..)
Not what I was looking for.
In V2, this seemed to work better.
How do I "sort by name"?
Similar Messages
-
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"><!-- end .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>
<!-- end .sidebar1 --></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">
<!--All elements inside this will become slides-->
<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>
<!--It is safe to delete this if captions are disabled-->
<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>
<!-- end .footer -->
</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; -
Two problems: 1. My iphoto slide show loses its random transitions when I export it to iDVD.
2. When I then burn it to a disk, the disk will not play in a DVD player, but only on my MAC.
Any ideas?The random transitions can only be random when played in iPhoto.
If you are in the slideshow mode and use the Share ➙ iDVD menu option a quictime movie will be created of the slideshow with the first random set of transitions and imported into iDVD. The transitions, however, will be fixed permanently and will not be changed again.
There is no way to get any sort of random behavior in an iDVD. When it's burned to disk it's locked permanently.
OT -
Copy on cd from slide show in adobe element 7
Way the copy on CD-R or CD-RW 700MB from slide show lose sharpness?
I created slide show with total run time each slide 5 sec and total about 20 min and it covered on CD182MB.
Later I discovered what 5 sec for each slide is not enough and I revised time to 9 sec with total time 41 min.. in this time the copy on CD covered 347 MB.
In both CD the sharpness very bad and not as original slide show.
I used the process to make slide show exactly as provided procedure in Element 7.
Is NORMAL to lost sharpnes on CD? If is not, what I need to correct?If you mean you made a VCD, those always look hateful. That's just what VCD is like. If you have a DVD burner export your slideshow as a wmv file and use whatever software came with your burner to make a video dvd instead.
-
SHARPNESS ON CD COPY FROM SLIDE SHOW
Way the copy on CD-R 700MB from slide show lose sharpness?
If you mean you made a VCD, those always look hateful. That's just what VCD is like. If you have a DVD burner export your slideshow as a wmv file and use whatever software came with your burner to make a video dvd instead.
-
When you create a pdf slide show with Adobes Photoshop Album Starter Edition 3.0, each slide contains a full navigation bar in the upper right.
When you create a pdf slide show with Photoshop Elements 5.0, you get only < > and an escape arrow in the lower left.
How can you get the full navigation bar using Photoshop Elements?I doubt there is a video for anything this basic, but you can try searching. I recommend practicing in a copy of the file you intend to place them in so that you don't lose that file due to a learning curve.
If you open the fla's of your navbar, etc, you want copy the timeline. So you select all the layers and frames of the main timeline, right click the selection and choose Copy Frames. Then, in the destination file you should create a new movieclip symbol. Select the first frame of the new symbol, right click and select Paste Frames. All of the layers and frames that you copied should appear in the timeline.
If you happen to have library symbols with the same names in the different files you'll be combining, that could cause a problem as it will prompt you as to whether you want to replace one with the other. So it is best to rename any such symbols before copying them. -
How to make backwards navigation through slide shows possible?
Hi, I just made my first Encore DVD slide show and spent hours trying to figure out how to do this without a luck. The DVD is one Main Menu with buttons to different slide shows that are all set to manual advance. The end action of each slide show takes to the first image in the next slide show and that was easy and very obvious to achieve in Encore but I didn't find any way to achieve the same for backwards navigation. Does anybody know how to do that.
Will appreciate any helpIn case my message wasn't clear, I will try to describe better what I want to achieve.
Currently the viewer starts from a Main menu with 16 buttons linked to 16 slide shows. Starting from the first or any slide show and pressing the next button after an image is displayed, the viewer can see linearly all images in all slide show from that point to the end without ever going to the main menu.
However if the viewer at any point start pressing the previous button on the remote control, he/she can only go to the start of the current slide show and the only way to get to a previous slide show is to use the Main menu button and then jump from there.
Is it possible to make a DVD thata will allow the view to go backwards through different slide shows by pressing the previous button?? -
I have a slide show project which runs about 7:10 minutes. I want to use background music that consists of 2 songs. The first song is 3:11 minutes and the second song is 4:51 minutes. Even when I add transitions and more images, the second song loses duration the moment I transfer it to the slide show. HOw do I adjust that?
Thank you.thirais wrote:
… Files were created by soncy camcorder.
no Sony camcorder records in mp2.
years ago, there were DVDcorders ... encoding in mp2,, but wrapped into .vob - this can not be fixed with Perian
... sorry for being so ... stubborn, but my assumption is, your wrong diagnosis 'mp2' leads to an unnecessary, obsolete and painstaking long workflow. again, no camcorder on the market records in mp2 (as long as I stand corrected! )
so, what Sony model, please?
I guess, there's a much more conveniant way importing your videos ... -
Flash Website "Slide-Show" like Navigation
Hey guys,
I am designing a website and for the first time I will be trying to implement Flash as a means for navigating the website. I have worked with flash before, but only for animation.
I am trying to make a 'Slide-Show' like flash object that flips through slides at a predetermined speed and when a slide is clicked on it takes you to a new page. Similar to the big flash object in the middle of this page: http://www.foursquare.org/
Can someone point me to a turorial or point me in the right direction for this, I tried googling it, but i dont know the proper terms for this. Thanks!
-ChristianAs far as I can tell, there is no Flash content on that page--most likely some jQuery design. So you could consider pursuing whatever approach they used for that. Though you could do whatever section you think is Flash as a Flash design. To get links to other pages you need to use actionscript, which means you need to decide which version you plan to use (AS2 or AS3). What you could do is create your slideshow images as movieclips and assign linking code to each one.
-
Cannot get slide show to come up in Netscape Navigator
My slide show works great in Safari and Firefox (Mac platform) but nothing shows up in Netscape Navigator. Any ideas?
Here's the page:
http://www.darylphillipstest.info/TheVanishingSLIDESHOW.htmlI may have solved my problem. I was using an OLDER version of NN (7.2). When I downloaded the latest version (9.0b2) EVERYTHING WORKS! Hooray!
Anyone want to do me a favor and try bringing up the link (http://www.darylphillipstest.info/TheVanishingSLIDESHOW.html) in Internet Explorer (Windows) and let me know if the slide show works??
THANK YOU! -
IWeb site loses functionality (Slide Show and Click to Enlarge)
I have three iWeb sites, to which I have added Slide Show and Click to Enlarge features on Photo pages. They are all published via web.mac.com.
Two of them lost these abilities after about a week, although the cursor still changes from an arrow to a hand when passing over Start Slideshow and the various pictures. The other site still functions normally.
Recommendations?http://web.mac.com/ralphandsarah/iWeb/HarrisFamily/Home.html
This first site works fine; Emma's Web Site and Ellen's Web Site do not. (Please see the links.) -
Navigating Flash Slide Show Presentation??
Hello,
I have an .SWF file which I created using the Flash Slide
Presentation document type. It consists of a number of screens. I
need to load this .SWF file into another Flash movie and control it
with actionscript, but I do not know the code. Could someone please
give me a hint at the code needed for simply getting this movie to
jump from one slide/screen to another? Or point me to a good
tutorial?
Thanks in advance.was afraid of that... thanks you :-)
- greg
"Wolf van Ween" <[email protected]> wrote in
message
news:e6kg2k$qb5$[email protected]..
> Yes, would have been wiser. Slide show presentation
makes things a lot
> more complicated. Can be done, but requires a twisted
brain. -
Work around for Custom Slide Show
My powerpoint 2010 presentation has several custom slide show to 'repeat' the current slide when clicked. After publishing in Adobe Connect via Presenter, the button with action to show and run the custom slide show did not work. Is there a work around this? I also hid the playbar, I was required to create/add buttons on the presentation to be used as navigation controls. One of the buttons is set up with an action to show and run the custom slide show (which basically repeats the current slide).
Apperently iTunes 11 is not affected (Apple stil makes iTunes11 for the 14 yr old Microsoft XP OS, but not for anything PPCs can run. Go figure)
"Next door" to Steve was metaphoric, he lived in Los Altos, about 15 miles away, but he cast a big shadow!
On 9.2.1/10.4.11 differences, some time in the past someone selected 'save file' and checked the box 'don't ask again' on your computers dialog box. That's why you're not given a choice wih the file downloads. I would think that selection should be able to be reversed.
iTunes 9.2.1/OS10.4.11 puts those downloaded URLs into the Music Libary of iTunes, no matter if it's opened directly, or you click on the file on your desktop. You can create a new playlist, highlight the selection in the Music Libary, and drag it to your new playlist to keep alll the steaming URLs together. NOTE, this only creates an alias, the URL copied by iTunes must remain in the Music Libary. You can then delete the the files on the desktop, if you want. I did multiple stations this way in 9.2.1, they all show in either the new playlist created, or in the Music Libary, and remain after the desktop files are deleted and trash emptied.
You can switch sations by double clicking them. Another note, all the URLs were all from vtune.
I hope this helps.
PS, I forgot how clunky Tiger is compared to Leopard... -
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"
>
>
>
> -
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><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<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>
<!-- InstanceEndEditable -->
<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">
<!--
/* ~~ 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. */
padding-right: 15px;
padding-left: 15px; /* 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. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
/* ~~ 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;
color: #0000FF;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 2000px;
background-color: #666;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
position: absolute;
height: 1000px;
left: 0px;
top: 0px;
/* ~~ 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-color: #333333;
border-bottom-width: thick;
border-bottom-style: double;
border-bottom-color: rgb(255,0,0);
width: 2000px;
position: absolute;
left: 0px;
top: 0px;
height: 150px;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #FF0000;
height: 150px;
width: 2000px;
border-top-width: thick;
border-top-style: double;
border-top-color: rgb(0,0,0);
left: 0px;
position: absolute;
top: 850px;
/* ~~ 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;
#apDiv1 {
position: absolute;
left: 204px;
top: 13px;
width: 317px;
height: 49px;
z-index: 1;
font-family: "Arial Black", Gadget, sans-serif;
text-transform: uppercase;
color: #F00;
font-size: 40px;
#apDiv4 {
position: absolute;
left: 180px;
top: 19px;
width: 585px;
height: 23px;
z-index: 4;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
font-style: oblique;
color: #FF0;
#apDiv12 {
position: absolute;
left: -6px;
top: 52px;
width: 201px;
height: 27px;
z-index: 9;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 36px;
color: #0FF;
font-weight: bold;
text-transform: lowercase;
font-style: oblique;
#apDiv5 {
position: absolute;
left: 0px;
top: 53px;
width: 757px;
height: 26px;
z-index: 5;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 36px;
color: #06F;
text-transform: lowercase;
#apDiv6 {
position: absolute;
left: 366px;
top: 155px;
width: 1413px;
height: 32px;
z-index: 999;
color: #999;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
-->
</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>
<!-- InstanceBeginEditable name="head" -->
<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">
<!--
<oa:widgets>
<oa:widget wid="2141542" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>
<!-- InstanceEndEditable -->
</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">
<!-- InstanceBeginEditable name="EditRegion4" -->
<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>
<!-- InstanceEndEditable -->
NOGAH
<div id="apDiv5">Machine Designers & Builders</div>
<div id="apDiv4">smart innovative engineering </div>
</div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<div id="apDiv15">
<p> </p>
</div>
<!-- InstanceEndEditable -->
<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>
<!-- end .header --></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>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></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.
Maybe you are looking for
-
DNS Router & Server Setup Issues
I'm running a Mac OS X Server on my local network. I have a D-Link 655 router that connects the machines and conencts to the internet. I'd like to use OS X Server's DNS instead of my ISP's. In the D-Link Router I've set the DNS to the OSX server in t
-
I have tried to dowload and update itunes on my PC. I have had an error message error 7 (windows error 126) several times. I have deleted the previous version of itunes and tried a clean install, with the same result. What am i doing wrong????
-
I have keithley 238 SMU, which when used in sweep mode returns the value in a array of cluster of 4 numeric indicators of which 2 are voltage and current and other two are step size and delay....I want to plot I-V curves, how to do that?
-
I am a big fan and user of ATV but its limitations have driven me to pair all my ATVs with a Dell Zino running Win7. With the ATV I have access to my library of movies, tv shows, music and pictures but I can not do web searches, check email, stream H
-
Hello, I am not able to pass multiple values for single import parameter..i tired calling function module in loop and also tried RANGES..Need some suggestion on this.. Thanks and Regards, sapdev86 Moderator Message: Basic Question Edited