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.

Similar Messages

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.

Add image to question

Is there any way to add image to question? For example, a gui
button or just a screen shot?

Hi mruan
While editing the question slide, click Insert > Image...
Works for me... Rick

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.

How to sync image slides to video cue points?

Hi, I'm working in AS3. What is the best way to sync some
image slides to cue points I have embedded in a video? Ideally the
video would play and and the image will change according to the cue
points.

Hi there.
I encountered that same question just recently. Here's what I
did:
First, import your video, choosing to load an external video
w/ FLYPlayback componant. Name it "vid". The video should already
your embedded cue points. In this case, the cue points are called
"Slide 1", "Slide 2" etc.
Next, bring a UILoader componant to the stage and name it
"myLoader"
Specify where your images are (in "myImageHere") and away you
go my friend.
Here is the code:
import fl.video.FLVPlayback;
import fl.video.VideoEvent;
import fl.video.MetadataEvent;
import fl.containers.UILoader;
vid.addEventListener(MetadataEvent.CUE_POINT, cueSlide);
function cueSlide(e:MetadataEvent):void {
var cuePointName=e.info.name;
if (cuePointName=="Slide 1") {
myLoader.source="yourImageHere1.jpg";
} else if (cuePointName == "Slide 2") {
myLoader.source="yourImageHere2.jpg";
} else if (cuePointName == "Slide 3") {
myLoader.source="yourImageHere2.jpg";
}

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.

Image Printing Question

Hello,
Bottom line summary: How do I use the Media and Quality setting to get a good image?
I have an image printing question for an HP 8600 Office. I am trying to get a decent quality image to print
on regular paper. I gather that I will not get the quality of a photo printer. I gather I'm supposed to use
HP glossy paper. Please read on ...
Images come out grainy (rastery) when embedded from an MSPaint project, and if I use Word. However when I printed just an image from image viewer it came like a photo ... but I can't remember what I did. It definitely is capable of printing better. My cartridges all check out, etc. I did the Print Quality Report ... I sure wish I could get that quality when I print other things.
I tried messing with different settings from the Print - Preference. The Quality (Best, Normal, Draft) doesn't effect the outcome. I tried going into Print - Preference - Media and it makes a difference. I can't figure out which is the best setting for plain paper ... but it's not plain paper. The image rendering algorithm appears to be different for different Media settings. I also tried setting the Advanced Resolution to Maximum DPI. I haven't been totally methodical about this as I was in a rush.
I see that the printer is being "smart", perhaps a little too smart.
So my question is multipart:
- Is there documenation on the what the Print - Preference - Media settings do?
- How do I get it to not use grainy/rastery image method, but use the nicer photo method?
- Should I print Maximum DPI?
Thanks,
- Dave -

Hi @DaveGold , and welcome to the HP Forums!
I hope you had a great holiday!
I see you're looking into photo setup options. I'd like to help!
First I'd recommend this document on Changing Print Settings in Windows 7. This document should show all the settings you're looking into.
Also, another thing to keep in mind, when you select 'best print quality' and 'photo paper'. It will only be as good as the source image.
Good luck and please let me know the results of your troubleshooting steps. Thank you for posting on the HP Forums!
Please click “Accept as Solution " if you feel my post solved your issue, it will help others find the solution.
Click the “Kudos, Thumbs Up" on the right to say “Thanks" for helping!
Jamieson
I work on behalf of HP
"Remember, I'm pulling for you, we're all in this together!" - Red Green.

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

Image Slider Question

Similar Messages

Maybe you are looking for