Hi, I’m using a jQuery plugin to make a background image slideshow on my site. In the HTML of each page it’s loaded like this with an array specifying the URLs of the images to be used.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="javascript/rewish-jquery-bgswitcher-0.4.3-0-g8d31c42/rewish-jquery-bgswitcher-8d31c42/jquery.bgswitcher.js" type="text/javascript"></script>
<script type="text/javascript">$(".header").bgswitcher({
images: ["images/header4.jpg", "images/header5.jpg", "images/header6.jpg", "images/header7.jpg", "images/header.jpg", "images/header2.jpg", "images/header3.jpg"],
effect: "fade"
});</script>
I’m wondering if can use the CSS media query I use to target mobile/handheld screens to specify another set of images in the array.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen,projection,tv" href="style.css">
<link rel="stylesheet" media="screen and (max-device-width:800px)" href="mobile.css">
Basically, by default use the above script, but if the user loads mobile.css then use different varibles/images, for example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="javascript/rewish-jquery-bgswitcher-0.4.3-0-g8d31c42/rewish-jquery-bgswitcher-8d31c42/jquery.bgswitcher.js" type="text/javascript"></script>
<script type="text/javascript">$(".header").bgswitcher({
images: ["images/headerm4.jpg", "images/headerm5.jpg", "images/headerm6.jpg", "images/headerm7.jpg", "images/headerm.jpg", "images/headerm2.jpg", "images/headerm3.jpg"],
effect: "fade"
});</script>
Or, if I could have the second script be for a class or ID that isn’t created unless the user loads the mobile.css according to the media query.