Image Slider with scrollbar

I have made my own scrollbar with a Constrain to Line
Behaviour on my scroller. The scroll bar has a specific length and
on this same length from above, i want a "thumbnails gallery"
image, where you click on thumbnail and it maximizes on a different
frame. How do I frame this "thumbnails gallery" image? To see
exactly what I mean, visit this link:
http://www.hauserguitars.de/english/docs/galerie.htm
and click on Guitar-Personal Copy of Miguel Llobet-1913!

whatever is easiest
Basically an image is there with a right arrow if
you click it, it fades out and second image fades in, that also now
shows the left (back arrow so you can go back and forth). I want
about 15 images but I also want this to be easily updatable if I
want to add more images.

Similar Messages

1 by 1 image slider with multiple images showing

Is it possible to do this?
http://www.patinagroup.com/

Hi
There is no direct widget to achieve this , but you can try resizing slideshow and then use different slideshow , use pin feature to fix the page position.
Thanks,
Sanjit

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.

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.

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.

How do you create a slider with linkable images?

I have been building a web site. I'd like to have a slider with the ability to click on an image to go to another page. Anyone know how to do this using Dreamweaver CS6? Any suggestions are welcome and will be most appreciated.
Thankyou for your help.

To add to Nancy's suggestion, you could also take a look here: http://www.pikachoose.com/
A very lightweight, fancy & easy-to-integrate slider with lots of cool features including auto-thumbnailing and auto-aspect ratio resize.

Image with scrollbars

I'm trying to find a simple way to:
1. Take a URL I have, which points to an image (jpg, png , or whatever).
2. Download and display it as a Swing component, with scrollbars.
This is not part of an applet.
There doesn't seem to be a straightforward way to do this. Can
anyone help?
Jeffrey

once you have the image put it on a label or similiar (ImageIcon works fine for that IIRC)
Then put that Label on a JScrollPane.

How can I use wget, cron and Automator to periodically pull a dynamic image from a URL to local storage, and then update a Keynote slide with that image, automatically?

How can I use wget, cron and Automator to periodically pull an image from a URL (which is dynamically updated - like a weather map, say - to local storage, and then update a Keynote slide with that image, automatically?

Any particular reason for those specific technologies? wget does not exist on a mac, although you can nstall it I guess. OS X has curl installed which should do pretty much anything you want to do with wget. cron is being replaced by launchd, although cron still exists on mountain lion.
As far as I can tell from automator all the standard 'actions' to access keynote available to it require keynote to be open and running, but does not provide a function to actually open it. So I think you will have to write some applescript, as a minimum to open and quit keynote. I notice that the keynote actions are mostly circa 2005 an wonder if they would even work.
Under utilities in automator 'actions' there is a capability to add applescripts as part of the workflow.
Also, note that cron is being dprecated by Apple and replaced by launchd. that said cron is stil on my mountain lion instalation.
This entry at stackoverflow shows use of cron with curl to get web urls. http://stackoverflow.com/questions/1683620/getting-started-with-cronjobs-on-a-ma c
If I have any time I may try and get this to work as it is quite interesting and new to me. But otherwise, good luck.

Help with adding a custom frame to an image slider

Hi all,
I'm currently designing a vintage themed website, i need to have a slider that displays certain images and intend on using the Menucool slider.
Only problem is, i need the slider to have a vintage type border or frame...similar to this:
https://www.google.co.uk/search?q=vintage+style+frame&client=firefox-a&hs=ATp&rls=org.mozi lla:en-GB:official&channel=sb&…
How do i do this?
Do i just center the image on the page and then add the slider to the image or will they end up side by side instead?
Any help will be much appreciated!
Thanks!
Vikki

Unless you need to click the text or have HTML/links in the slider then I wouldn't overlay an absolute div over the top as it will conflict. Some sliders use absolute positioning as well and can cause issues when it comes to z-index/slides switching.
If you want the border to be animated (i.e. slide with the image) you are going to want to wrap your slides around a div and then style that, or if its to border the slider itself then just wrap a div around the complete slider.
This will ensure then background image (frame) will stay behind the content and any html/links are still clickable.

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

Issues with Spry image slide-show with filmstrip

Hi
I used the widget browser to place a copy of the 'spry image slideshow with filmstrip' widget on to one of my web pages. I now have several issues that I am out of my depth trying to troubleshoot.
There is a big gap (like excess padding) at the top between the outer frame and the main image frame. I can't see how this has arisen or how to correct it.
Although narrow formatted images are centered horizontally in the image window, wide formatted images appear at the top of the image window, and i would like them to be either centered or at the bottom of the image window
The thumbnail images that i created for the filmstrip are tiling rather than appearing as a single centered image which is what i would like.
I have uploaded my test page to the server and you can see it here:
http://www.hebrideansheep.org.uk/test_gallery.html
any and all help gratefully received as i have spent all day trying to sort this out, but as a total amateur I feel like I am drowning.
Many thanks
John

Move
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
to just below
<title>HebWeb: Test gallery</title>
and above
    <style type="text/css">
/* BeginOAWidget_Instance_2141543: #HSS2011images */
#HSS2011images {
    width: 684px;
    margin: 24px 0px 0px 0px;
    border: solid 1px #AAAAAA;
    background-color: #FFFFFF;
    padding-top: 10px;
The style rules that start with the above, are meant to override the rules in basicFS/basic_fs.css, hence they should come after basicFS/basic_fs.css
Gramps

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.

Datalist with scrollbar, can't get it to work

Hi all there,
I've tried this over and over, but i can't get this to work;
I have selected an picture (thumbnail) AND selected a vertical scrollbar (with shift click) The scrollbar is from catalyst itslef, so not a custom made 1.
I then (with again both selected) convert these to data list.
When done, i select within the data list the thumbnail and set this towards the Repeated item.
I now have (by default) 5 thumbnails. I add some more to my likings.
And now i'm blanc.
When previeuwing this in my browser i can see the thumnails, including the hover state, i can see the image of the scrollbar but... the scrollbar does not work.
I cant even click the butto on it. It looks just like a picture without any functionality.
I've consulted the web, read Classroom in a Book over and over again, but whatever i do, even within the tutorials comming with the Classroom book, i can't get this to work.
Help in this matter would be greatly appreciated. I'm simply stuck.
Many thanks allready!

A 1 overnight sleep did the trick for me.
I redid all the work after some testing. It works now as intended. Can't recall where i did it wrong the first place.
Case closed for me.
Thx. all

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.

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.

Image Slider with scrollbar

Similar Messages

Maybe you are looking for