CODEWITHSUNDEEP
javascriptcssworkflow-foundationorbit
Adrian
Adrian

Reputation: 1002

Full width of images on foundation orbit slider

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

Upvotes: 3

Views: 3729

Answers (3)

david
david

Reputation: 11

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

Upvotes: 1

Natalie Banegas
Natalie Banegas

Reputation: 601

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.

Upvotes: 0

Kelsadita
Kelsadita

Reputation: 1038

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

    });

Upvotes: 0

Related Questions