Here is the code for the looped slider:
Expand|Select|Wrap|Line Numbers
- <div id="loopedSlider" class="feature">
- <div class="container">
- <div class="slides">
- <div><img onclick="window.location='page1.html';" src="./images/image1.jpg" width="600" height="350" alt="Image 1" border="0" />
- </div>
- <div><img onclick="window.location='page2.html';" src="./images/image2.jpg" width="600" height="350" alt="Image 2" border="0" /></div>
- <div><img onclick="window.location='page3.html';" src="./images/image3.jpg" width="600" height="350" alt="Image 3" border="0" /></div>
- <div><img onclick="window.location='page4.html';" src="./images/image4.jpg" width="600" height="350" alt="Image 4" border="0" /></div>
- <div><img onclick="window.location='page5.html';" src="./images/image5.jpg" width="600" height="350" alt="Image 5" border="0" /></div>
- <div><img onclick="window.location='page6.html';" src="./images/image6.jpg" width="600" height="350" alt="Image 6" border="0" /></div>
- <div><img onclick="window.location='page7.html';" src="./images/image7.jpg" width="600" height="350" alt="Image 7" border="0" /></div>
- </div>
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- #loopedSlider {
- POSITION: relative
- }
- #loopedSlider .container {
- POSITION: relative; LEFT: 50px; WIDTH: 600px; HEIGHT: 350px; OVERFLOW: hidden
- }
- #loopedSlider .slides {
- POSITION: absolute; TOP: 0px; LEFT: 0px
- }
So if a web browser window was resized, it would resize the "loopedSlider .container", and also resize the width and height of the images (in the div class "slides")
I would like the image width and height to be adjusted based on the width of the browser window.
I would like the image width to be 70% of the browser window width.
I would like a 0.58 aspect ratio in the width/height of the image. So if a browser window was 800 wide, it would then make the LoopedSlider image width="600" (75% of browser width) and the image height would be height="348" (58% of image width)
If the width of the browser window is 800, then I would like to make the image width="600" and height="350"
I would like the image width to be 75% of the browser width, and would like the image height to be 58% (.58 aspect ratio) of the image width.
If the browser window is 1000 wide, then I would like to the images to be width="750" and height="435".
I'm looking for some code that will detect the current browser width and resize the "width" and "height" variables accordingly.
Expand|Select|Wrap|Line Numbers
- <div id="loopedSlider" class="feature">
- <div class="container">
- <div class="slides">
- <div><img onclick="window.location='page1.html';" src="./images/image1.jpg" width="600" height="350" alt="Image 1" border="0" />
- </div>
- <div><img onclick="window.location='page2.html';" src="./images/image2.jpg" width="600" height="350" alt="Image 2" border="0" /></div>
- <div><img onclick="window.location='page3.html';" src="./images/image3.jpg" width="600" height="350" alt="Image 3" border="0" /></div>
- <div><img onclick="window.location='page4.html';" src="./images/image4.jpg" width="600" height="350" alt="Image 4" border="0" /></div>
- <div><img onclick="window.location='page5.html';" src="./images/image5.jpg" width="600" height="350" alt="Image 5" border="0" /></div>
- <div><img onclick="window.location='page6.html';" src="./images/image6.jpg" width="600" height="350" alt="Image 6" border="0" /></div>
- <div><img onclick="window.location='page7.html';" src="./images/image7.jpg" width="600" height="350" alt="Image 7" border="0" /></div>
- </div>
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- #loopedSlider {
- POSITION: relative
- }
- #loopedSlider .container {
- POSITION: relative; LEFT: 50px; WIDTH: 600px; HEIGHT: 350px; OVERFLOW: hidden
- }
- #loopedSlider .slides {
- POSITION: absolute; TOP: 0px; LEFT: 0px
- }