Image slider in header?

Hi Guys
I would like to have an image slider (with each image the same grey gradient background but different foreground) on my website in the banner: www.bmgraphics.be
Which one would be best, and what are the do's and don'ts?
I've seen this template: does anyone know where to get the slider part? http://themeforest.net/item/kallyas-responsive-multipurpose-wordpress-theme/full_screen_pr eview/4091658
I tried the nivo slider but the images kept blocking and it really looked bad
http://themeforest.net/item/kallyas-responsive-multipurpose-wordpress-theme/full_screen_pr eview/4091658
Thanks for your help guys!
Regards
Bob

I used this basic jQuery slider on one of my web sites.
http://basic-slider.com/
Apply background images to #slider CSS code.
Insert transparent PNG images into the #slider div.
To make transparent PNGs, use Photoshop or Fireworks and a transparent workspace -- denoted by the checkerboard pattern. Save for web as PNG-24 with transparency. See screenshot from Photoshop.
Nancy O.

Similar Messages

Image Slide in header

I have an adult webcam website in which i have spent years designing. www.lucky7cams.com. now in the fine tuning stages i am having an issue getting the logo image in the header to slide in from the right of the screen. i have tried many behaviors and non seem to work. i would appreciate any help i can get on this matter.

Sorry, I missed out the most important bit when I went for our coffee break.
You would create a duplicate master slide for the design you are working on, place the new object on the master and send to back. you delete the unwanted masters for simplicity
You can then apply the new master whenever you need that object in the background.
I regularly create presentations where I have a slide master for each slide so that each slide has its own master, I can chage the design instantly for one slide.

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">

</script>
</head>
<body>
<div class="container">
<div class="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>
</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>
    </div>
</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.

Image Slider not appearing/visual in live view/Browser

I updated a link to my image browser and once I hit refresh, everything seemed fine. I checked my rework on live view, and the whole slider (including images and buttons) were no longer visual. (You could not see them.)
|

<div class="header">
      <div>
        <div class="nav">
            <nav>
                <ul class="menu">
                    <li class="current li-none"><a href="index.html">     Home     </a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">     Media      </a></li>
                    <li class="li-left li-none"><a href="products.html">     Products     </a></li>
                    <li><a href="news.html">News</a></li>
                    <li><a href="contacts.html">     Contact     </a></li>
                </ul>
            </nav>
      </div>
        <header>
            <h1><a href="index.html"><img src="images/logo234.png" alt=""></a></h1>
        </header>
        <div id="slide">
            <div class="slider">
                <ul class="items">
                    <li><img src="images/slide-1.jpg" alt="" /></li>
                    <li><img src="images/slide-2.jpg" alt="" /></li>
                    <li><img src="images/slide-3.jpg" alt="" /></li>
                </ul>
            </div>
            <ul class="pags">
                <li><a href="#"><strong></strong></a></li>                
|
I checked in browser and you could also not see them there, either. The ONLY thing I changed was the link to the image. Here is the code, please let me know if you can help out at all.
Joe

Jon,
I have not uploaded the page yet, because this issue came up and I did not want a non-functional part of the site available online yet. However, I have done the following:
-Checked the link and that it is correct with no typo's, etc.
-Checked the Javascript (there are no issues there, either.)
I am going to download the original page from the server and compare once again to see if there are differences.
I will post updates.

JQuery image slider

Hello,
I just bought a CSS3 image slider from envato marketplace and I think I did everyting as the creator explained in the read me file of how to implement it in your source code. But when I view it in a browser, I don't see any image, its just blank. The images are in the root folder. I tried alot but the only thing I see is blank images. Here's my whole html. You can skip the first html part. Is there anyone who had the same problem once or knows what the problem is? Thanks in advance
<!doctype html>
<html>
<head>
<meta name="description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta property="og:description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta charset="utf-8">
<title>Onze foto impressie</title>
<link href="css/general.css" rel="stylesheet" type="text/css">
<style type="text/css">
#header {
          background-color: #FFFFFF;
          text-align: right;
          height: 200px;
          margin-right: auto;
          margin-left: auto;
          padding-top: 5%;
          padding-right: 20%;
          font-size: 30px;
#page {
          font-family: arial, tahoma, verdana;
          font-size: 12px;
          line-height: 1.5em;
          color: #000000;
          text-align: left;
          float: left;
          margin-right: auto;
          margin-left: 13%;
          margin-top: 40px;
          padding-left: 20px;
          background-color: #FFFFFF;
          padding-right: 20px;
          border-top: 1px solid #E9E9E9;
          font-style: normal;
          font-weight: 400;
          min-height: 400px;
          max-width: 700px;
          padding-top: 20px;
          padding-bottom: 20px;
          clear: both;
#mainnav {
          font-family: arial, tahoma, verdana;
          font-size: 16px;
          color: #000000;
          margin-right: auto;
          margin-left: auto;
          background-color: #BDE1E8;
#mainnav ul {
          font-family: arial, tahoma, verdana;
          list-style-type: none;
          margin-left: 10%;
          margin-right: auto;
#mainnav ul li a {
          font-family: arial, tahoma, verdana;
          display: block;
          padding-top: 10px;
          padding-bottom: 10px;
          float: left;
          font-size: 16px;
          background-color: #9B9B9B;
          color: #FFFFFF;
          padding-right: 10px;
          padding-left: 10px;
          text-decoration: none;
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
          font-style: normal;
          font-weight: 400;
#mainnav a:hover, #mainnav a:active ,#mainnav a:focus , #mainnav a.thispage {
          font-family: arial, tahoma, verdana;
          background-color: #1B1B1B;
          font-style: normal;
          font-weight: 400;
h1, h2 {
          font-size: 20px;
.zoeken {
          position: relative;
          top: 25px;
          left: 40px;
          -webkit-transition: all 0s ease 0s;
          -o-transition: all 0s ease 0s;
          transition: all 0s ease 0s;
          color: #151515;
.zoeken:focus {
          width: 225px;
          border-color: #150CD5;
.glas {
          position: relative;
          left: 25px;
          top: 3px;
#search {
          position: relative;
          left: 50px;
          top: 25px;
          color: #0D0D0D;
.tel {
          position: relative;
          left: 552px;
          top: 0.1px;
</style>
<style type="text/css">
body {
          background-color: #ffffff;
</style>
<style type="text/css">
#footer {
          font-family: arial, tahoma, verdana;
          font-size: 12px;
          line-height: 20px;
          color: #000000;
          background-color: #FFFFFF;
          text-align: left;
          float: left;
          margin-left: 15%;
          margin-top: 25px;
          clear: left;
#footer ul   {
          list-style-type: none;
          float: left;
          text-align: left;
#footer ul li a {
          font-family:arial, tahoma, verdana;
          font-size: 12px;
          font-weight: normal;
          text-decoration: underline;
          text-align: left;
#footer a:hover   , #footer a:active, #footer a:focus, #footer a:visited{
          color: #000000;
          text-decoration: underline;
</style>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.kolom {
          font-family: arial, tahoma, verdana;
          padding-top: 10px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 10px;
          float: left;
          width: 120px;
          margin-right: 25px;
          margin-left: 25px;
          background-color: #FFFFFF;
          text-align: center;
          margin-top: 10px;
          border-right: 1px solid #000000;
.kolom1 {
          font-family: arial, tahoma, verdana;
          width: 200px;
          padding-top: 10px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 10px;
          float: left;
          width: 200px;
          margin-right: 25px;
          margin-left: 25px;
          background-color: #FFFFFF;
          text-align: center;
          margin-top: 10px;
          border-right-color: #000000;
          border-right-width: 1px;
          border-right-style: solid;
          font-size: 12px;
input::-webkit-input-placeholder {
          color: #161616;
input::-moz-placeholder {
          color: #161616;
input:-moz-placeholder {   /* Older versions of Firefox */
          color: #161616;
input:-ms-input-placeholder {
          color: #161616);
.kolom1 a {
          font-size: 10px;
          color: #000000;
    padding: 0;
    margin: 0;
body {
          background-color: #FFFFFF;
#wrap {
    display: block;
    height: auto;
          width: 620px;
          margin: 150px auto 0 auto;
    border: 10px solid #fff;
    position: relative;
#slideshow {
    overflow: hidden;
#slideshow ul {
    list-style-type: none;
    height: 100%;
    width: 500%; /*5 images by 100%. If you use 6 images you have to change the witdh into 600% */
    position: relative;
    left: 0px;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
#slideshow ul li {
    width: 20%; /*100% per 5 images. */
    height: 320px;
    float: left;
    position: relative;
#wrap input[type=radio] {
          position: absolute;
    visibility: hidden;
#wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    top: 360px;
    width: 11px;
    height: 11px;
          background-image: -moz-linear-gradient(top, #6dbfe8, #068ccf);
          background-image: -o-linear-gradient(top, #6dbfe8, #068ccf);
          background-image: -webkit-linear-gradient(top, #6dbfe8, #068ccf);
          background-image: linear-gradient(top, #6dbfe8, #068ccf);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    cursor: pointer;
#wrap label:not(.arrows):not(.show-description-label):hover {
   background-image: -moz-linear-gradient(top, #B0E5FF, #068ccf);
   background-image: -o-linear-gradient(top, #B0E5FF, #068ccf);
   background-image: -webkit-linear-gradient(top, #B0E5FF, #068ccf);
   background-image: linear-gradient(top, #B0E5FF, #068ccf);
   box-shadow: #fff 0 0px 6px;
   -webkit-transition: all .25s;
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;
#wrap input[type=radio]#button1:checked~label[for=button1] {
          background: #fff;
#wrap input[type=radio]#button2:checked~label[for=button2] {
          background: #fff;
#wrap input[type=radio]#button3:checked~label[for=button3] {
          background: #fff;
#wrap input[type=radio]#button4:checked~label[for=button4] {
          background: #fff;
#wrap input[type=radio]#button5:checked~label[for=button5] {
          background: #fff;
#wrap input[type=radio]#button1:checked~#slideshow ul { left: 0 }
#wrap input[type=radio]#button2:checked~#slideshow ul { left: -100% }
#wrap input[type=radio]#button3:checked~#slideshow ul { left: -200% }
#wrap input[type=radio]#button4:checked~#slideshow ul { left: -300% }
#wrap input[type=radio]#button5:checked~#slideshow ul { left: -400% }
#wrap label[for=button1] { margin-left: -40px }
#wrap label[for=button2] { margin-left: -20px }
#wrap label[for=button3] { margin-left: 0; }
#wrap label[for=button4] { margin-left: 20px }
#wrap label[for=button5] { margin-left: 40px }
label.arrows {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    height: 80px;
    display: none;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 3px;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
label.arrows:hover {
          opacity: 1;
          background: #666;
input[type=radio]#button1:checked~.arrows#arrow-2, input[type=radio]#button2:checked~.arrows#arrow-3, input[type=radio]#button3:checked~.arrows#arrow-4, input[type=radio]#button4:checked~.arrows#arrow-5 {
    right: -65px;
    display: block;
input[type=radio]#button2:checked~.arrows#arrow-1, input[type=radio]#button3:checked~.arrows#arrow-2, input[type=radio]#button4:checked~.arrows#arrow-3, input[type=radio]#button5:checked~.arrows#arrow-4 {
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
input[type=radio]#button2:checked~.arrows#arrow-1 { left: -25px }
input[type=radio]#button3:checked~.arrows#arrow-2 { left: -45px }
input[type=radio]#button4:checked~.arrows#arrow-3 { left: -65px }
input[type=radio]#button5:checked~.arrows#arrow-4 { left: -85px }
</style>
</head>
<body>
<div id="header"><img src="afbeeldingen/header8.jpg" width="630" height="205" alt=""/></div>
<div id="mainnav">
<ul>
    <li><a href="index.html" class="thispage">Home</a></li>
    <li><a href="onzediensten.html">Onze diensten</a></li>
    <li><a href="tarieven.html">Tarieven</a></li>
    <li><a href="offerteaanvraag.html">Offerte aanvragen</a></li>
    <li><a href="overons.html">Over ons</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="page">
<div id="wrap">
        <input type="radio" id="button1" name="buttons" checked="checked"/>
        <label for="button1"></label>
        <input type="radio" id="button2" name="buttons"/>
        <label for="button2"></label>
        <input type="radio" id="button3" name="buttons"/>
        <label for="button3"></label>
        <input type="radio" id="button4" name="buttons"/>
        <label for="button4"></label>
        <input type="radio" id="button5" name="buttons"/>
        <label for="button5"></label>
        <label for="button1" class="arrows" id="arrow-1">
                  <img src="images/arrow.png" />
        </label>
        <label for="button2" class="arrows" id="arrow-2">
                  <img src="images/arrow.png" />
        </label>
        <label for="button3" class="arrows" id="arrow-3">
                  <img src="images/arrow.png" />
        </label>
        <label for="button4" class="arrows" id="arrow-4">
                  <img src="images/arrow.png" />
        </label>
        <label for="button5" class="arrows" id="arrow-5">
                  <img src="images/arrow.png" />
        </label>
        <div id="slideshow">
            <ul>
                <li id="slide1">
                    <img src="images/1.png" />
                </li>
                <li id="slide2">
                    <img src="images/2.png" />
                </li>
                <li id="slide3">
                    <img src="images/3.png" />
                </li>
                <li id="slide4">
                    <img src="images/4.png" />
                </li>
                <li id="slide5">
                    <img src="images/5.png" />
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Hi Davidoff,
Glad to know that you managed to solve your problem. It will be helpful for other users if you post your solution here.
Thanks,
Preran

Image Slider Question

So this is my HTML. I am using a JS image slider.
I am trying to get the image slider to be full screen and scale to 100% in the window. Weither it is full screen or smaller.
The width works perfectly, but when i make the height 100% it doesnt work.. px's work fine, but thats not exactly what i want to have.
Here is the CSS

I have used this in the past to get 100% height, I don't know if there's anything inherantly wrong with it, it validates, so at least there's that.
Adding in style="height:100%;" to the <html><body> and any other parent element of the one you want to be 100% will make it 100% of the window size. It takes a little reorganizing/positioning if you have something you want to be 100% burried too far into other elements.
Here's an example...
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Todd is 100 Percent</title>
</head>
<body style="margin:0; height:100%;">
    <div style="height:100%;">
        <div id="todd" style="height:100%; background-color:blue;">some stuff</div>
    </div>
</body>
</html>
In this example, the todd div will be 100% of the window size. If you add any content before todd though, you may want to reorganize the layout because todd will stay 100% even after it's dropped down the page by other content, so you can end up with a scroll bar vertically.
EDIT: Had wrong doctype.

Having trouble with spry image slide show

Im new to dw and i inserted a image slide show into my index.htm file, it works fine when i preview it in dw cs5.5. When I try it on a web browser I get a dialog box that says that the spry panel selector .js requires spry widget.js and continues thru several other dialog boxes until my website loads only to see my image slideshow as a list. Im not sure if its in the code or the support files can anyone help? I would greatly appreciate it if someone can set me on the right path with this, Thank you in advance.
<!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="Spry-UI-1.7/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: #9D5F16;
</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: 951px;
    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">

</script>
</head>
<body>
<div class="container">
<div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="logo" /></a><img src="images/topheader.jpg" width="701" height="136" alt="header_logo" /></div>
<div class="content">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Weekly Ad</a>      </li>
      <li><a href="#">Recepies</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Entertaining</a>
        <ul>
          <li><a href="#">Bakery Brochure</a></li>
          <li><a href="#">Deli Platters</a></li>
          <li><a href="#">Catering Planner</a></li>
        </ul>
      </li>
      <li><a href="#">Pat's Best</a></li>
      <li><a href="#">Organics</a></li>
      <li><a href="#">Gift Cards</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Departments</a>
        <ul>
          <li><a href="#">Meats</a></li>
          <li><a href="#">Deli</a></li>
          <li><a href="#">Prepared Foods</a></li>
          <li><a href="#">Seafood</a></li>
          <li><a href="#">Produce</a></li>
          <li><a href="#">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="fall.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="apples.jpg" /></a></li>
      <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="applepie.jpg" /></a></li>
      <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="pumpkinsoup.jpg" /></a></li>
      <li><a href="images/roast.jpg" title="r"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="roast.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>
Since this is a one-column layout, the .content is not floated.
    Logo Replacement
    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.
    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.    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.) </div>
<div class="footer">
    <p>About us Other Services Employment Contacy us Terms of use Privacy Policy</p>
    </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

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.

Can't get image slider to work

Every image slider tutorial I do, I can't seem to get to work! I'm obviously doing something wrong!! Could someone please point out what it is please? I've been going onto CodePen > typing in responsive image slider > copying the html > creating a separate CSS and JS and linking to them. But when I run the page, nothing happens. What vital ingredient am I missing?
Untitled Document
Thanks.

I agree with you pal - there's no point in trying to be clever if no-one can find the code.
If you want the slider you're talking about then copy the code below and paste into a dreamweaver document and browse - have fun and then go tell code pen they are a pile of shite.
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/MarcoGuglielmelli/pen/ogZWpv" />
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
body {
background-color: #979797;
color: #fff;
margin: 0em;
padding: 0em;}
.page {
max-width: 640px;
margin: 0px auto 30px auto;}
.panel {
background-color: #fff;
color: #666;
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
overflow: auto;}
button {
border: none;}
/********** LOGO **********/
h1 {
text-align: center;
width: 200px;
height: 20px;
margin: 40px auto 40px auto;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}
h2, h3 {
font-weight: normal;
margin: 0em;}
h2 {
color: #666;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 230%;
line-height: 1em;
padding: 20px 0px 0px 20px;}
h3 {
font-size: 90%;
letter-spacing: 0.2em;}
p {
font-family: 'Quattrocento Sans', sans-serif;
line-height: 1.4em;}
a {
    text-decoration: none;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
/***************** No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}
.no-js .js-warning {
display: block;
border: 3px solid #fff;
text-align: center;
background-color: #fff;
color: #db5391;
padding: 10px;}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;}
.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}
.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}
.slide:first-child {
    display: block;}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}</style></head><body>
<header><h1>Responsive Slider</h1></header>
<section>
      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
            </div>
            <div class="slide slide-2">
              <img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints" />
            </div>
            <div class="slide slide-3">
              <img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series" />
            </div>
            <div class="slide slide-4">
              <img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea" />
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>
    </section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$('.slider').each(function () {
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;
    function move(newIndex) {
        var animateLeft, slideLeft;
        advance();
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        buttonArray[currentIndex].removeClass('active');
        buttonArray[newIndex].addClass('active');
        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';
        } else {
            slideLeft = '-100%';
            animateLeft = '100%';
        $slides.eq(newIndex).css({
            left: slideLeft,
            display: 'block'
        $group.animate({ left: animateLeft }, function () {
            $slides.eq(currentIndex).css({ display: 'none' });
            $slides.eq(newIndex).css({ left: 0 });
            $group.css({ left: 0 });
            currentIndex = newIndex;
    function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if (currentIndex < $slides.length - 1) {
                move(currentIndex + 1);
            } else {
                move(0);
        }, 4000);
    $.each($slides, function (index) {
        var $button = $('<button type="button" class="slide-btn">•</button>');
        if (index === currentIndex) {
            $button.addClass('active');
        $button.on('click', function () {
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    advance();
//@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>

Style Image Slider to include HTML text: How?

I am trying to insert an image slider onto my page. So far, I have tried a few different sliders with some issues.
Does anyone know
A good Jquery Image Slider that allows for HTML text beside the image on a slide?? (Like MSN Homepage)--No Caption or Overlay. Looking for White background with linkable HTML Text on left (40%) and Picture on Right (60%)-all on one slide. Cycle through four similar slides.
I am assuming the solution is not so much the slider, but has to do with creating a seperate div or rule / class and applying?
Thank you for any help.

I would approach it like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
.cycle-slideshow {
margin: 25px auto;
border: 1px solid silver;
overflow: hidden; /**float containment**/
width: 80%; /**adjust width of container as required**/
.cycle-slideshow img {
width: 60%;
float: left;
.cycle-slideshow h3 {
float: right;
width: 40%;
font-size: 26px;
color: red
.cycle-slideshow p {
clear: right;
float: right;
width: 40%;
font-size: 16px;
.center {text-align:center}
/* Special Rules for tablets, mobiles */
@media only screen and (max-width: 768px) {
.cycle-slideshow { width: 98% }
.cycle-slideshow img {
width: 100%;
display: block;
float: none;
.cycle-slideshow h3 {
display: block;
float: none;
font-size: 20px;
width: 100%;
.cycle-slideshow p {
display: block;
float: none;
font-size: 14px;
width: 100%;
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a>
Responsive Slideshow with text</h1>

<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-timeout="2000"
    data-cycle-next="#next"
    data-cycle-prev="#prev"
    data-cycle-slides="> div"
>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>

</div>

<div class="center">
<a href=# id="prev">Prev</a> | <a href=# id="next">Next</a>
</div>
</body>
</html>
Nancy O.

Dreamweaver CS6- jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
my head code:
<title>slider</title>
<script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
</script>
<style type="text/CSS">
#slider {margin:auto;}
</style>
My div code:
<div id="slider">
<p>
    <img src="Leather web page/DSC_0531_4925.JPG"/>
    <img src="Leather web page/DSC_0035_edited-1.JPG"/>
    <img src="Leather web page/DSC_1593_edited-1.jpg"/>
    <img src="Leather web page/DSC_1595_edited-1.jpg"/>
    <img src="Leather web page/DSC_1821.jpg"/>
    </div>
Any help would be greatly appreciated.

1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    allowWrap:        true,
    autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
    delay:            0,
    easing:           null,
    fx:              'fade',
    hideNonActive:    true,
    loop:             0,
    manualFx:         undefined,
    manualSpeed:      undefined,
    manualTrump:      true,
    maxZ:             100,
    pauseOnHover:     false,
    reverse:          false,
    slideActiveClass: 'cycle-slide-active',
    slideClass:       'cycle-slide',
    slideCss:         { position: 'absolute', top: 0, left: 0 },
    slides:          '> img',
    speed:            500,
    startingSlide:    0,
    sync:             true,
    timeout:          4000,
    updateView:       0
// automatically find and run slideshows
$(document).ready(function() {
    $( $.fn.cycle.defaults.autoSelector ).cycle();
2. To center the slideshow, merely center the container as in
div.cycle-slideshow {
    width: 1000px;
    margin: auto;

New to flash - Image Slider Navigation

OK, so i have put off learning flash for over a year now -
and its time i smartened up my act!
So i have something that i would like to create - its on
http://www.freecaster.tv - see
that image slider at the top that when you hover over the dates the
image moves? Well that's what i want to make if i can.....
Question: Am i way over my head trying to do this as a newbie
to flash? Is it hard? Does anyone have any tutorials that they know
of that can push me in the right direction?
I do a lot of video editing, and i understand the concept of
flash with the key points and things.....
Any help will be very much appreciated...
Thanks!

Sorry, I should have added that I'm running Dreamweaver 8 and
Flash Professional 8.
Cheers.

Slider Bottom Heading

Hi all,
i am try to make slider image description bottom of image, incorporated a code its not working please help for the same.
<ul class="items">
                <li><img src="images/slide-17.jpg"/>
                <div class="bannerkrg">Our Customers are Our Priority</div>
                </li>
WEBLINK

You will have to get a newer copy of TMS as highlighted below. I have used the newer version as used on imeiapp.com, but this is not allowed.
To see a working demo, copy and paste the following code into a new document.
<!DOCTYPE html>
<html>
<title>TM Slider | unique</title>
<link rel="stylesheet" href="http://www.newtonclients.com/site-20 4/css/style.css">
<style>
body {
    width: 950px;
    margin: auto;
</style>
<script src='http://www.newtonclients.com/site-20 4/js/jquery-1.7.1.min.js'></script>
<script src='http://imeiapp.com/wp-content/themes/unique/js/tms-0.4.131ec.js?ver=0.4.1'></script>
<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.tmslider')._TMS({
            show:0,
            pauseOnHover:false,
            prevBu:'.prev',
            nextBu:'.next',
            duration:10000,
            preset:'zoomer',
            pagination:false,    //'.pagination',true,'<ul></ul>'
            slideshow:7000,
            progressBar:false
</script>
</head>
<body>
<div id="slider-wrapper">
<div id="tmslider-holder">
    <div id="tmslider-wrapper">
      <div class="tmslider bottom">
        <ul class="items">
          <li><img src="http://www.newtonclients.com/site-20 4/images/slide-17.jpg" alt="slide-17" title="<h2 class="tm-title">slide-17</h2>"></li>
          <li><img src="http://www.newtonclients.com/site-20 4/images/slide-14.jpg" alt="slide-6" title="<h2 class="tm-title">slide-14</h2>"></li>
          <li><img src="http://www.newtonclients.com/site-20 4/images/slide-15.jpg" alt="slide-9" title="<h2 class="tm-title">slide-15</h2>"></li>
          <li><img src="http://www.newtonclients.com/site-20 4/images/slide-16.jpg" alt="slide-7" title="<h2 class="tm-title">slide-16</h2>"></li>
        </ul>
      </div>
      <a href="#" class="prev"></a> <a href="#" class="next"></a> </div>
</div>
</div>
</body>
</html>

How to add an image in the header? Pages 5.0

I don't believe I have to use Microsoft Word! I can't, no way, add an image in the header. This is unbelievable!
**** time I updated to Mavericks!
Please, does anyone know the solution?
I'm losing a great deal in my company.

Do you still have Pages 4.3 installed. If so, use that.

How do i add images in the header and footer to a PDF using iText

Hi ,
I want to add images to the header and footer of every page while i am genrating a pdf i have created a separate class called EndPage which i am instanceiating its default constructor in another class 's button action method.
The above code genrates a PDF for me however it genrates a file with file size zero bytes and does not open it following is my sample code
//**********Any Help would be appreciated
Thank You
public class My_Class
public String pdf_action()
EndPage ep=new EndPage();
return null;
}//My_class Ends
class EndPage extends PdfPageEventHelper
* Demonstrates the use of PageEvents.
* @param args no arguments needed
public EndPage()
try {
com.lowagie.text.Document document = new Document(PageSize.A4, 50, 50, 70, 70);
PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream("D://proposals/endpage.pdf"));
writer.setPageEvent(new EndPage());
document.open();
String text = "Lots of text. ";
for (int k = 0; k < 10; ++k)
text += text;
document.add(new Paragraph(text));
document.close();
catch (Exception de) {
de.printStackTrace();
public void onEndPage(PdfWriter writer, Document document) {
try {
Rectangle page = document.getPageSize();
PdfPTable head = new PdfPTable(3);
for (int k = 1; k <= 6; ++k)
head.addCell("head " + k);
head.setTotalWidth(page.width() - document.leftMargin() - document.rightMargin());
head.writeSelectedRows(0, -1, document.leftMargin(), page.height() - document.topMargin() + head.getTotalHeight(),
writer.getDirectContent());
PdfPTable foot = new PdfPTable(3);
for (int k = 1; k <= 6; ++k)
foot.addCell("foot " + k);
foot.setTotalWidth(page.width() - document.leftMargin() - document.rightMargin());
foot.writeSelectedRows(0, -1, document.leftMargin(), document.bottomMargin(),
writer.getDirectContent());
catch (Exception e) {
throw new ExceptionConverter(e);
}

Hi,
Thanks for the quick response.
The problem is that when I keep the logo as a watermark, the pdf is not adjusting itself to include the logo as header.
But if I add a header text via Tools -> Headers and Footers, the pdf is adjusting itself so that the header text is at the beginning , not overlapping with the contents of pdf.
But while using logo as watermark, some times overlapping of the pdf contents and logo is happening.
Is there any way to add a logo in the Header and Footer via the option in Tools -> Headers and Footers
Thanks,
Vidhya

How can I make a image slider using Dreamweaver? Is there any image slider widget I could use?

I was browsing through the web when I saw a website which had a really cool image slider. I don't have any idea of how to develop anything similar, but I was wondering if maybe dreamweaver had any widget that has already been developed by someone else that is open source for everyone else to use. Is there anything any?

Ken is referring to a "roll your own" slider that works great. There are lots of those.
None of those are built in to Dreamweaver. None of those will give you a panel within Dreamweaver with which you can build them.
Project Seven does sell widgets that are Dreamweaver extensions.
Adobe is offering another one for free (and you get additional function if you buy it).
Extend Studio offers Power Slider (with a free trial).
And there is Nivo Slider.
These are extensions that plug in and extend what Dreamweaver can do.

Image slider in header?

Similar Messages

Maybe you are looking for