can this block of code be written in a shorter way?
<p>I have a block of code, no complicated stuff is going on in it, and it is based on three different numbers ( viewport widths in my case ) :</p>

<pre><code>if(viewport_width &gt; 1224) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 8 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width &lt; 1224 &amp;&amp; viewport_width &gt; 954) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 6 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width &lt; 954 &amp;&amp; viewport_width &gt; 624) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 4 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width &lt; 624) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 2 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
</code></pre>

<p>So I though ( one method ) to place those three numbers in an array like this :</p>

<pre><code>var widths = [1224, 954, 624];
</code></pre>

<p>And after apply an foreach function on it :</p>

<pre><code>for(var i in widths ) {
   ...
}
</code></pre>

<p>But I cannot really figure how to wrap that up around those three numbers. The only thing that changes depending on the number in the array is another number :</p>

<pre><code>{ ... perPage: 6 ... }
</code></pre>

<p>Which can vary from 8 down to 2. I would like a little help with this if possible, or maybe another way of writing it would be just fine.</p>
