How do I alter my Jquery slideshow to change size in different screen resolutions

Im currently using 2 CSS style sheets with media queries attached for my website so that it will resize for different browser sizes. My problem is that I have a Jquery powered slideshow and I need the images to change to a smaller size when the website is being viewed at the smaller resolution. I have the slideshow contained in a div that has a jquery animation that expands the set width of the box giving the illusion of revealing the slideshow inside which needs to alter as well to compensate.

Here is my default Jquery that has the animation for the div to expand

$(document).ready(function() {
$("#slideshow_box")
    .animate({"height": "600px"}, 500)
    .animate({"width": "488px"}, 500);
});

How would I change that so that the smaller viewing version would be this but would only trigger off when the site is being viewed in the smaller resolution?

$(document).ready(function() {
$("#slideshow_box")
    .animate({"height": "400px"}, 500)
    .animate({"width"开发者_如何学编程: "288px"}, 500);
});

CSS

#slideshow_box{
    position:relative;
    float:left;
    height: 0px;
    width: 0px;
    margin-right: 60px;
    overflow:hidden;
}

Use screen width and height. based on these write your code

 $(document).ready(function(){
   if ((screen.width>=1024) && (screen.height>=768)) {

        alert('Screen size: 1024x768 or larger');

  }
  else  {
        alert('Screen size: less than 1024x768, 800x600 maybe?');

    }
});

Thanks..

The simplest method is probably to duplicate the media selection logic by accessing the current screen resolution from Javascript using the variables:

screen.width
screen.height