Full width of images on foundation orbit slider

Question

I have problem with width of orbit slider images. My images has 1600px width, but resolution of monitor can be higher - e.g 1680px. Is it possible to stretch the size of images to 100% of screen (in this example - 1680px)?

My code is standard and looks like this:

<div id="featured">
<img src="11.jpg" alt="">
<img src="12.jpg" alt="">
<img src="13.jpg" alt="">
</div>

<script src="js/jquery.foundation.orbit.js"></script>

<script type="text/javascript">
   $(window).load(function() {
       $("#featured").orbit();
   });
</script>

Thanks for any help.

Adrian

score 1 · Answer 1 · answered Sep 19 '13 at 20:21

1

its easy just write the orbit code outside the row div that should give you full width. well in foundation 4 that is.

answered Sep 19 '13 at 20:21

david

11
1

Could you please explain with some working example to illustrate better? – Meryovi Sep 19 '13 at 20:39

score 0 · Answer 2 · answered Jul 01 '13 at 11:04

0

you can get the width of the window using var imgwidth = window.innerWidth.
Set the width property of the images using $('image_selector').width = imgwidth.

$(window).load({
```
var imgwidth = window.innerWidth;
$('image_selector').width = imgwidth;
$("#featured").orbit();
```
});

answered Jul 01 '13 at 11:04

Kelsadita

988
6
21

When images are loading - they have 100% of width, but after loading the width of img is again 1600px – Adrian Jul 01 '13 at 11:16
Sorry - my bad - the images loaded and have the full screen width, but orbit didn't work. I have list of images on site – Adrian Jul 01 '13 at 11:20

score 0 · Answer 3 · answered Jul 01 '13 at 15:23

0

So is your CSS setup? If you set the width of container ('#featured') and images to 100% it should stretch the image to the width of the window. No need to calculate the width with javascript.

answered Jul 01 '13 at 15:23

Natalie Banegas

601
4
4

Full width of images on foundation orbit slider

3 Answers3