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

Answer 1

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

Answer 2

• 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(); 

  });

Answer 3

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.