Alt Tags on slide shows
Im trying to attach some Alt Tags to a sliding image but not sure how to go about it.
<script type="text/javascript">
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/template1web.jpg", "", ""]
fadeimages[1]=["images/template2web.jpg", "", ""]
fadeimages[2]=["images/template3web.jpg", "", ""]
fadeimages[3]=["images/template4web.jpg", "", ""]
fadeimages[4]=["images/template5web.jpg", "", ""]
fadeimages[5]=["images/template6web.jpg", "", ""]
fadeimages[6]=["images/Template7web.jpg", "", ""]
fadeimages[7]=["images/Template8web.jpg", "", ""]
fadeimages[8]=["images/Template9web.jpg", "", ""]
fadeimages[9]=["images/template10web.jpg", "", ""]
fadeimages[10]=["images/template11web.jpg", "", ""]
fadeimages[11]=["images/template12web.jpg", "", ""]
var fadebgcolor="white"
</script>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 347, 282, 0, 3000, 0)
</script>
Can anyone help
Many thanks
James
Hi Murray
im guessing you're looking for the script from the .js file which is attached to this slide show
WELL HERE IT IS
Thanks
var stopped = false;
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=30; //initial opacity degree (10%)
this.init_degree =30;
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
this.Mfadewidth=fadewidth+this.imageborder*2
this.Mfadeheight=fadeheight+this.imageborder*2
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"> <div onmouseover="pauseIT(this, true);" onmouseout="pauseIT(this, false);" id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filte r:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-khtml-opacity:10;backgro und-color:'+fadebgcolor+';"></div><div onmouseover="pauseIT(this, true);" onmouseout="pauseIT(this, false);" id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filte r:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-khtml-opacity:10;backgro und-color:'+fadebgcolor+';"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
showTime = setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10;
//alert(obj.degree);
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}else if (obj.tempobj.style.opacity){
obj.tempobj.style.opacity=obj.degree/101
}else if (obj.tempobj.style.KhtmlOpacity){
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
fadeshow.prototype.stopit=function()
clearInterval(fadeclear[fadearray[this.slideshowid].slideshowid]);
stopped = true;
fadeshow.prototype.rotateimage=function(){
if(!stopped){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
fadeshow.prototype.resetit=function(){
if(!stopped){
this.degree = this.init_degree;
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}else if (crossobj.style.opacity){
crossobj.style.opacity=this.degree/101
}else if (crossobj.style.KhtmlOpacity){
crossobj.style.KhtmlOpacity=this.degree/100
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
this.rotateimage()
function pauseIT(obj,state)
var pausedTD = document.getElementById("pausedTD");
//obj.style.cursor='e-resize';
if(this.pausecheck){
if(state)
pausedTD.innerHTML = '<img src="images/paused2.gif" width="56" height="15" alt="">';
else
pausedTD.innerHTML = '<img src="images/spacer.gif" width="56" height="15" alt="">';
Similar Messages
-
How do I import my tags and slide shows from Elements 9 to 11?
I purchased Photoshop Elements 11 so I can create a DVD of my slide shows. When I loaded 11, all of my tags and slide shows are gone from my previous version 9. I have an urgent project due this weekend, help!
Organizer>File>Manage Catalogs, and hopefully it will appear in the list on the bottom part of the window. If not, click Convert and navigate to the existing catalog file.
When you installed the programs, did you disable your antivirus/antimalware software? If not, I would uninstall and reinstall after doing so. -
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; -
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. -
I need some help with a Fireworks swf slide show.
This is the web page:
http://www.shortlifeweb.com/DrTedScott/index1.html
And here is a hard link to the slide show:
http://www.shortlifeweb.com/DrTedScott/images/slideshow.swf
The slideshow.swf works fine, so I think the files and swf
are properly located.
However, in the index1.html, the slideshow does not play.
Any help would be appreciated.
Ken.To make things simple, I created a blank page - no template,
no formatting. And it still does not play.
According to some of the tutorials I have seen, the slide
show should play within Dreamweaver, but it doesn't play there
either.
Thanks.
http://www.shortlifeweb.com/DrTedScott/slideshow_test.html
I am including the entire html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550"
height="400" id="FlashID" title="showing_photos">
<param name="movie" value="images/slideshow.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<!-- Next object tag is for non-IE browsers. So hide it
from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="images/slideshow.swf" width="550" height="400">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<!-- The browser displays the following alternative
content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of
Adobe Flash Player.</h4>
<p><a href="
http://www.adobe.com/go/getflashplayer"><img
src="
http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" width="112" height="33"
/></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html> -
Alt tags, kaosweaver advanced random images
Hi. In Dreamweaver 8.0
I have installed Advanced Random Images from Kaosweaver: http://www.kaosweaver.com/extensions/details.php?id=5
I would like to do a Sequential Slide Show with 8 images. I would like to add alt tags onto each of these images, but the Kaosweaver will not let me do this with the Sequential Slide Show.
Does anyone know a way/trick to work around this?
Thank you.You would have to direct these questions to Paul Davis, the author of kaosweaver stuff.
However, it sure looks to me as if it does this (snippet taken from the ARI demo on the kaosweaver site) -
// Advanced Random Images End
</script><img src="/assets/images/extdemo/intensa3/neptune_main.gif"
alt="The solid blue is wonderful" title="The solid blue is wonderful" width="300" height="300">
<!-- KW ARI Image -->
</p> -
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 want to move my photos into folders, which reflect the contents of iphoto events , to a standalone hard drive. Subsequently I intend to return them a few at a time to edit in Elements. Once they are edited I may return groups to iphoto to organize into slide shows. As things stand now, my iMac drive is rapidly filling up. I do not use raw files so I want to move Jpegs and edit them.
DavidI'm with Léonie. That's a very (and unnecessarily) complicated plan you have there. As Léonie says you can just set Elements as an external editor.
To move a Library:
Make sure the drive is formatted Mac OS Extended (Journaled)
1. Quit iPhoto
2. Copy the iPhoto Library from your Pictures Folder to the External Disk.
3. Hold down the option (or alt) key while launching iPhoto. From the resulting menu select 'Choose Library' and navigate to the new location. From that point on this will be the default location of your library.
4. Test the library and when you're sure all is well, trash the one on your internal HD to free up space.
Regards
TD -
Spry Slide Show-how to use one size photo for large photo and thumbnail?
Hi all,
I'm am using Adobe's Spry Slide Show. I can only use one size photo 640x480px for both the large photo and the thumbnail.
I changed the size of the small thumnail on the html:
<li><a href="Photos/TestPhoto640x480.jpg" width="490" height="367"><img src="Photos/TestPhoto640x480.jpg" width="63" height="47" alt="photos-1.jpg" /></a></li>
The thumbnail looks fine until you hit Live View or Preview in Browser then photo comes in full size and you can only see the upper left hand corner.
I assume that the java is doing this. But I have no training in Java.
How can I change the Java Code so the thumbnail comes in at 63x47px?
Many thanks.Wish I could use scaled down versions of the thumbnails-but I can't.
Why not?
img.src = info.src;
img.style.width = "490px";<!--Large Photo size on internet-changed from info.width + "px"; to "490px"; *********-->
img.style.height = "368px";<!--Large Photo size on internet-changed from info.height + "px"; to "368px"; *******-->
You're shooting yourself in the foot with this. It's overriding your HTML and CSS values.
As an FYI, Adobe Abandoned the Spry framework late last year.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You might want to cut your losses right now and switch to something better suited to modern web devices & browsers.
jQuery Fancybox
http://fancybox.net/
20 of the best jQuery Slideshows
http://vandelaydesign.com/blog/web-development/jquery-slideshow/
Nancy O. -
How can I trigger a lightbox slide show with a single image using Dreamweaver?
I'm trying to build a page for a cosmetics company in which clicking on a color swatch opens a lightbox-style slide show of model shots using that color makeup. Each swatch should trigger a different slideshow. I'm using Dreamweaver (CS6), and I'm sure there must be an easy way to do this, but I haven't figured it out yet. (It would be a snap in Flash, but alas, the site needs to work on a broad range of devices).
I'd appreciate any ideas, and please make your instuction easy to follow if possible—pretend you're talking to a dog, or an eighty-six-year-old—because I may not be as experienced as I ought to be. Probably not.
Thanks in advance for any advice.
best,
wendyDW doesn't do this for you.
Get the jQuery Fancybox plugin.
See this Primer for Using jQuery Plugins
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
Nancy O. -
I have two questions:
1) I have multiple logins in my iMAC. How do I move photos/albums from one login to another?
2) I have created albums with "Description" for each photos, so that, in a slide show, any one can see what is being shown on the photo. When I sync albums to my iPOD, the "Descriptions" are not getting copied. How do I ensure that the "Descriptions" also get copied so that it can be a real back-up?
ThanksBack up your iPhoto library, Depress and hold the option (alt) and command keys and launch iPhoto - rebuild your iPhoto thumbnails - this may take several tries
Also what version of iPhoto? What recently changed?
LN -
How can I alt tag the TOC button that appears at the top of the menu?
Running the current version of Cp7 on a windows 7 machine.
A 508 hang up once again: The customer insists on an active TOC for the project file. We've activated the TOC and it works fine, but there's a secondary TOC expand/collapse button located at the top of the slide right here:
Although I can change the icon for the expand/collapse TOC in the TOC setting menu:
I can't put an alt tag on the button, meaning that JAWS and other screen readers just reads it as an unnamed button - which would be "bad" if you're trying to pass a 508 compliance test - which I am. I know alt tags don't travel with the image file, and I can't find any way to access the file in Captivate to give it an accessibility name. Anybody have a workaround?
JustenufYou can replace the current image with one of your own choosing. But even if you make the replacement just a one pixel GIF, I think it will still register somewhere in the screenreader as a button.
However, to be fair to Captivate, you can use the TOC button on the playbar to activate the TOC if need be, or you can set up on screen buttons to do that.
Personally, I wouldn't be using an overlay TOC at all. I'd be trying for a Separate TOC so that it was available all the time.
However, I had read somewhere on this forum (a year or so back) about someone else finding that the links on the TOC itself were not completely 508 compliant. So maybe you're just chasing your tail here if you're trying to achieve perfect 508 compliance. -
Help needed with spry image slide show
Im new to dw and am currently building a site for my buisness. I installed a spry image slide show and it works fine in live view but when I view it on the web
it was looking for sever .js files. I then checked out the spry forums and noticed that it seems to be a common problem. I tried removing the ui1.7 file from the server and reloading,tried removing from local and remote and reloading, tried to change the line <script.src=spry-ui-1.7 etc. to the adobe site as per gramps advise to another having the same issue. Now when I view on the web the slideshow wheel keeps turning but images donot apear. Im lost and can use some help, enclosed is my code also sight is www.patsiga.net
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>pats iga supermarket</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<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="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.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/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.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/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #AF692A;
</style>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #frontpageslideshow */
#frontpageslideshow {
width: 960px;
margin: 0px 0px 0px 0px;
border: solid 0px #aaaaaa;
background-color: #FFFFFF;
padding-top: 0px;
#frontpageslideshow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
color: #AAAAAA;
#frontpageslideshow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
overflow: hidden;
color: #AAAAAA;
text-transform: none;
#frontpageslideshow .ISSClip {
height: 361px;
margin: 0 0px 0px 0px;
border: solid 0px #ffffff;
background-color: #ffffff;
#frontpageslideshow .ISSControls {
top: 0px;
height: 361px;
#frontpageslideshow .FilmStrip {
height: 0px;
background-color: #CCCCCC;
#frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
width: 10px;
height: 0px;
#frontpageslideshow .FilmStripTrack {
height: 0px;
#frontpageslideshow .FilmStripContainer {
height: 0px;
#frontpageslideshow .FilmStripPanel {
height: 0px;
padding-left: 10px;
margin-right: 0px;
#frontpageslideshow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
#frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #AAAAAA;
width: 56px;
height: 47px;
margin: 4px 4px 4px 4px;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #ffffff;
border-color: #000000;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #AAAAAA;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141543" binding="#frontpageslideshow" />
</oa:widgets>
-->
</script>
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /></a><img src="images/H1180T2.jpg" width="699" height="120" alt="header_graphic" /></div>
<div class="container">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>
<li><a href="recepies.html" title="recepies">Recepies</a></li>
<li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>
<ul>
<li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>
<li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>
<li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>
</ul>
</li>
<li><a href="pats_best.html" title="pats best">Pat's Best</a></li>
<li><a href="organics.html" title="organics">Organics</a></li>
<li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>
<li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>
<ul>
<li><a href="meats.html" title="dept_meats">Meats</a></li>
<li><a href="seafood.html" title="dept_seafood">Seafood</a></li>
<li><a href="deli.html" title="Dept_deli">Deli</a></li>
<li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>
<li><a href="produce.html" title="dept_produce">Produce</a></li>
<li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>
</ul>
</li>
</ul>
<p> </p>
<ul id="frontpageslideshow" title="">
<li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
<li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
<li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
<li><a href="images/roast.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
<li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141543: #frontpageslideshow
var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
widgetID: "frontpageslideshow",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 4500,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
TFSP: { pageIncrement: 4, wraparound: true }
// EndOAWidget_Instance_2141543
</script>
<p>Since this is a one-column layout, the .content is not floated. </p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<!-- end .content --></div>
<div class="footer">
<p><a href="about_us.html" title="about_us">About Us</a><a href="#"> </a> <a href="employment.html" title="employment">Employment</a> <a href="store_info.html" title="store_info"> Store Info.</a> <a href="#" title="contact_us">Contact Us</a> <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a> <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />
©2011 Pat's IGA <br />
</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>
</html>Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
Example 1: This will not work:
WEBPAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/SpryAssets/....your javascript files
Example 2: This will work:
WEB PAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/myfolder/SpryAssets/....your javascript files
Hope this helps. -
I have used Photoshop 7 on my computer running vista very successfully but a problem has now arisen. When I use slide show to show some of my selections the pictures are pixelated. This does not apply to all selections. I note that the pixelated pictures are c 400% but the ones that are ok are 40%. If I do not allow the pictures to resize in slide show thet are only small. Any help would be appreciated. This has only happened recently and I cant remember if I have had an adobe downloaded update which might have affected this.
Hi Bob
Thanks for coming back to me so quick, I will try & explain the problem in
more detail.
I have all of the photos in My Catalogue tagged ie 2009 Holiday, Mothers
Birthday etc so that by selecting the tag and then display in full screen I
can show them in a slide show to friends & family. This has always worked
well until last week when I called up a slide show of a past holiday the
pictures were very pixelated. All photos are not affected. Some holidays I
select in slide show are ok. If I look at individual pictures in my
catalogue most are ok but many are pixelated. Any pictures that have not
been adjusted in PSE 7 are ok.
Any picture viewed in full screen in slide show has in the top left pop up
menu a % of less than 100%, typically 35 - 75%. Any of the pixelated
pictures have a % 350 - 450%.
I originally had Elements 2 but upgraded to PSE 7 when I changed to Vista
because of album problems, apart from problems converting my catalogue
originally all has worked very well. Apart from the recent update the only
other thing which I have done is to start a back up which I aborted because
it was taking a long time to do. I have 4,600 photos in my catalogue and the
problem slide shows are random throughout but appear to be trouble free up
to about the end of 2004. ie a holiday slide show before then seems to be
ok. The latest photos put into the catalogue this month, post upgrade & post
attempted back up are ok. I have also found that if I expand a photo that
has been modified in PSE 7 although the modified picture is pixelated the
original displays ok. I hope that this more fully explains my problem but if
you require more information please let me know. I really do appreciate you
looking at this for me. It is very frustrating when something that was
working perfectly for me then goes **** up!
Regards
David -
What is the easiest way to add a slide show to a dream weaver page?
What is the easiest way to add a slide show to a dream weaver page?
Copy & paste the following code into a new, blank document. Change images to your own. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Cycle2</title>
<!--help for older IE browsers-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Slideshow Plugin-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
/**Slideshow**/
.cycle-slideshow {
position: relative;
z-index: 1;
width: 400px; /**adjust width as required**/
margin:75px auto;
text-align: center;
.cycle-slideshow img { max-width: 100% }
/* prev / next links */
.cycle-prev, .cycle-next {
position: absolute;
top: 0;
width: 20%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 800;
height: 100%;
cursor: pointer;
.cycle-prev {
left: 0;
background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
.cycle-next {
right: 0;
background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
.cycle-prev:hover, .cycle-next:hover {
opacity: .7;
filter: alpha(opacity=70)
/**END SLIDESHOW STYLES**/
</style>
</head>
<body>
<h1><a href="http://jquery.malsup.com/cycle2/">JQuery Cycle2</a></h1>
<!--begin slideshow-->
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeOut="2000"
>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<!--insert your images below-->
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="description">
<p>Mouse over image for previous / next links</p>
</div>
<!--end slideshow-->
</body>
</html>
Nancy O.
Maybe you are looking for
-
How to delete the articles from MVKE table.
hi all, i want to remove articles from MVKE table. but at that time artciles articles are not removal from other table. how to set deletion flag on sales organisation level. we want to set deletion flag on sales organisation level. but at that time i
-
Help! I've written an application that isn't working exactly like I think it should. The program is supposed to compare two files. If there is a string in file one that is not in file two, then it is supposed to write that string to a third file. To
-
HTTP XML return special characters?
hi! we implemented a dynamic report with an http request from BI to a php page which returns the XML dataset. works pretty good apart from the fact that the report crashes, when there are special chars (e.g. & ; @ ...) within the element values (e.g.
-
Passing Url dynamically in WEB SERVICE Action block
Hi All below is my requirement, kindly help We have three environments 1. Development 2. Testing 3.Production In one of the BLS i have used Web Service Action block by putting the web service url. Whenever the BLS is moved from Testing environment or
-
BPC - Consolidation - Data Loading - Will BS/PL accounts data ONLY be loaded from ECC?
Dear All, In BPC, when we load data from ECC for Consolidation, my understanding is that we load only BS and PL accounts' data for/by the entity. Apart from BS and PL data, will there be any data that will have to be loaded into BPC for consolidation