I have a slide where I want to show photos specific for each device. iPhone, iPad, Desktop.
I would like to use something like this to filter each out. Obviously display:none isn't going to work since it's JavaScript, but this is just a general idea of how it should work:
<style type="text/css">
@media only screen and (min-width: 800px) {
#slide-desktop{display:block;}
#slide-ipad{display:none;}
#slide-iphone{display:none;}
}
@media only screen and (min-width: 481px) and (max-width: 799px) {
#slide-desktop{display:none;}
#slide-ipad{display:block;}
#slide-iphone{display:none;}
}
@media only screen and (max-width: 480px) {
#slide-desktop{display:none;}
#slide-ipad{display:none;}
#slide-iphone{display:block;}
}
</style>
<div id="slide-desktop">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/desktop.jpg', fade:600 },
]
})('overlay');
</script>
</div>
<div id="slide-ipad">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/ipad.jpg', fade:600 },
]
})('overlay');
</script>
</div>
<div id="slide-iphone">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/iphone.jpg', fade:600 },
]
})('overlay');
</script>
</div>