Zrayweb Zrayweb - 7 months ago 16
Javascript Question

Consolidating 2 javascript/jquery random banner image/text functions correspond to each other?

Hi Everyone (first post here), I know that there have been similar questions and I have found to great posts on randomizing a banner image and text using jquery/javascript. My issue now is (hoepfully simple) a way to combine these functions while keeping the CSS properties (responsive design) in tact. Please let me know if I can be more specific.

Here are the two pieces of code for the functions:

<!-- START Rotating Image jQuery -->
<script type="text/javascript">
$(function() {
var images = ['ppl_1.png', 'ppl_2.png', 'ppl_3.png', 'ppl_4.png', 'ppl_5.png', 'ppl_6.png'];
$('.intro-header').css({'background': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ') no-repeat center center' , 'background-size': 'cover'});
});
</script>
<!-- END Rotating Image jQuery -->

<!-- START Rotating Intro Message jQuery -->
<script type="text/javascript">
$(document).ready(function() {
var quotes = new Array("pplmsg1", "pplmsg2", "pplmsg3", "pplmsg4", "pplmsg5", "pplmsg6"),
randno = quotes[Math.floor( Math.random() * quotes.length )];
$('.intro-message > h1').text( randno );
});
</script>
<!-- END Rotating Intro Message jQuery -->


Thanks in advance.

Ted Ted
Answer

If the goal is to have the corresponding quote go with the image, like image one/quote one, image two/quote two, try this:

$(function() {
    var images = ['ppl_1.png', 'ppl_2.png', 'ppl_3.png', 'ppl_4.png', 'ppl_5.png', 'ppl_6.png'],
        quotes = ["pplmsg1", "pplmsg2", "pplmsg3", "pplmsg4", "pplmsg5", "pplmsg6"],
        index = Math.floor(Math.random() *     images.length);

    $('.intro-header').css({'background': 'url(images/' + images[index] + ') no-repeat center center' , 'background-size': 'cover'});
    $('.intro-message > h1').text( quotes[index] );
});
Comments