Image Slider

I was wondering if it was possible to create a slider for my image annotation...I found that movie annotations contain an entry for controlling the movie [ie: Slider, play and pause buttons...]
Is it possible to develop a slider that will enable me to view several images within the same rectangle?
Thanks in advance,
Kristy

At first thought I'd say if you're in Acro 9, not to bother trying but to recreate the effect (the image area and the slider) as a single Flash SWF and load that instead. Slideshow-style stuff in Flash is easier than trying to make PDF elements interact through the JS/forms system, and you could probably even find something pre-built on the Web to get you started.

Similar Messages

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.

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 slide show...

Hi,
If I have a Flash web page with a button and I'd like an
image slide show to launch at the top of the page upon one clicking
the button, plus the slide show container to have the play/pause,
forward, backward controls, along with small numbers 1-10
(appropriate number highlighted for which photo you are viewing)
also...how much time would it be to set up the controls,
actionScript / interactivity? (a guesstimate)
If I'm creating and prepping all images, buttons, etc -- just
need someone to actionScript and set up the controls, how much
would you estimate this would cost and, as above, timeframe in
hours?
Thank you! Just trying to get an idea.

I'm sure I remember a few years ago now a heated discussion
on whether it counts as price fixing to discuss fees in an online
forum.
It really depends on who was doing it. As a guesstimate I'd
say 4-5 hours from scratch which would cover setting it up and
probably one revision. If you were happy to use a component that
was designed for it then a fraction of that time, probably under an
hour. You'll pay more for someone with experience, but then they're
probably faster and the standard of the work will be higher.
In my opinion it's worth paying a little more for a quality
company who may foresee problems you overlook rather than pinching
the pennies, but that's your call.
If you're looking to do it on the cheap then buy a component
and have their technical support set it up (or at least help you)
for free.

Simple way to use the Photo Gallery Module and flexslider to create an editable image slider?

I want to offer an image slider that my clients can easily update themselves through the Admin. Ive researched it alot and I know it can be done using web apps but does my cliently seriously need to pay over $400 a year for the webcommerce option just to have an updatable image slider?? I find that unrealistic. Does anyone know how to set this up using the photo gallery module and "flexslider" so clients on the business marketing plan can have access to a simple and clean editable image slider?
Any BC experts that can help would be greatly appreicated!
Thankyou

Not an expert, but I think what you're looking for is a slider that can get its list of photos from an XML file. The Photo Gallery module can produce an XML file.

Full Width Image/Slider

Hi everyone,
I'm having some problems using the full width option in relation to height.
I want my image to adjust to both height and width as per the top image/slider following Adobe Muse Site of the day website - Home
At present the width of my image adjusts perfectly on different browsers, but the height just cuts out part of the image rather than increasing it's size. The images I am using are more than adequate in size to adjust to even the largest of resolutions.
Since the above Adobe Muse created site manages to achieve responsive height and width I was wondering how this is achievable?
Thank you

Can someone tell me how one would go about getting some customer support from Adobe?

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

Jquery image slider adapting to the size of the browser

HI i have implemented a Jquery image slider into my mobile site, i have set the width to 100% so the width of the slider adapts nicely to all different browser sizes. However i cannot seem to figure out what i need to do to get the height to adapt like the width does. i have countless amounts off different CSS combinations but i cant figure it out. Can someone help?

thomas-shaw wrote:
HI i have implemented a Jquery image slider into my mobile site, i have set the width to 100% so the width of the slider adapts nicely to all different browser sizes. However i cannot seem to figure out what i need to do to get the height to adapt like the width does. i have countless amounts off different CSS combinations but i cant figure it out. Can someone help?
You can only distort the height. Obviously when images get narrower the height goes down in pro. Most of the time, unless you specifically throw a different set of images at mobile, they can look a bit stupid. A lot of responsive websites just hide the main image at smaller mobile sizes.

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.

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.

How to make an image slide/swipe effect like in #selfie

Please see http://forums.adobe.com/thread/1444012 - a question (it was mentioned there that AE will do better for what I want to do so I am posting the link here)
What I want to do is to replicate the image slide/zoom/swipe that you can see in the video.
Can you please help me get started on the right path? I am new in AE and need a bit of a start - i.e. if you were to do it, what technique would you approach it with?
I can probably manage to do one or two manually, but my issue is that there are so many (similar) effects and I don't want this video to become a daunting chore, so looking for a way to do this very easily somehow.
And this is why I am posting - to hopefully find the technique to do this effect right and a do it lot without realizing it is too difficult and giving up ...!

Thanks
but I'm sorry .. is there a good tutorial I can read on this? I am not verse on basics of AE. I have been working mostly with Premiere.
I will appreciate some direction even if it's basics.

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.

Image slider not loading

Hi,
The image slider on the home page of a bc site I administer is not loading properly.
If you click on the business logo to refresh then it appears. However the client is not happy that it is not working when a customer lands on the homepage.
Has anyone had this problem and if so how did they fix it?
Thanks for any advice.

Hi Liam,
Yeh it is a template site. I modified the Tribeca home page and it has been working fine, my client wanted ad banners on the home page so I put an ad rotator module above the image slider. I have removed these now in case that was the problem, but a few visitors are giving feedback that the image slider is not showing. The Link is www.w-o-o.me.
Thanks
update - I looked at the html on the home page and noticed the line of code referring to the first image of the slider was different to the rest, so i copied and pasted a line from the other images and swapped it out and that has seemed to fix it.

My image slider is not appearing.

On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/

You must correct these errors [Invalid] Markup Validation of http://rootforsite.azurewebsites.net/ - W3C Markup Validator

Need help with widget loading problem. Using Nivo image slider within basic composition.

I am using a basic composition widget to display multiple Nivo image sliders. Each basic tab displays its own Nivo slider. Please reference http://penthouse.businesscatalyst.com/cocktails
The problem I am experiencing is when I click on a tab (ie: Whiskey) it displays the composition box containing the slider, but the slider is like it is stuck up in the top and it waits and then finally comes down and starts the Nivo slider after that. I just want the image slider to appear showing the first slide instead of transitioning it in. In the settings for the basic composition, the only transition that is selected is fade. Any ideas?

No... Try this link: COCKTAILS
You should see this then click on whiskey

Image Slider

Similar Messages

Maybe you are looking for