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;

  • Slide show does not work

    I created a slide show. It works really well on the Prieview with a browser. Once I put it on the web it does not work. here is the code.
    <%@LANGUAGE="JAVASCRIPT"
    CODEPAGE="65001"%>
    <!doctype html>
    <html><!-- 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 &amp; 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.

  • SWF slide show does not play

    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>

  • ANNC: Slide Show Magic

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

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

  • How can I move my 31K photos to a standalone drive in folders and then import them back to edit and then perhaps return them to iphoto and library to produce slide shows

    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.
    David

    I'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,
    wendy

    DW 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 albums in my iMAC with description for each photo that I can show up on slide show so that I know the place that is in the photo. If I synchronize my photos to iPOD, I am unable to get the Descriptions also copied. How do I ensure this?

    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?
    Thanks

    Back 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?
    Justenuf

    You 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 />
    &copy;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.

  • PSE 7 Slide Show problems

    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

  • Logical Debugging Help

    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