On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop.
I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is a basic idea of how it could be done:
<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>