Extending on a simple, custom wordpress shortcode

I currently have a very basic shortcode working but would like to extend on it to be able to add a parameter to it, for instance [fanColours number=3]. Basically the parameter would dictate how many of the image links would displayed in a post.

function fanColours() {

            return '<div class="fansc clearfix">

                        <h3>Available Colours</h3>

                            <ul class="fan-colours clearfix">

                                <li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/black_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/black_bone_on.jpg" alt="Black" width="87" height="87"></a></li>
                                <li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/white_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/white_bone_on.jpg" alt="White" width="87" height="87"></a></li> 
                                <li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/yellow_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/yellow_bone_on.jpg" alt="Yellow" width="87" height="87"></a></li>

                            </ul>
                    </div>';
}
add_shortcode('fanColours', 'fanColours');

I checked online for various methods found something which seemed to be heading in the right direction which I have added below, but I am not sure how to go about implementing it into the above code.

Edit: So the final rendition I have now using the shortcode [fanColours number=3] is below:

function fanColours( $atts ) {
    $links = array();
        $links[]='<li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/black_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/black_bone_on.jpg" alt="Black" width="87" height="87"></a></li>';

        $links[]='<li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/white_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/white_bone_on.jpg" alt="White" width="87" height="87"></a></li>';

        $links[]='<li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/red_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/red_bone_on.jpg" alt="Red" width="87" height="87"></a></li>';

            extract( shortcode_atts( array(
                'number' => '',
            ) , $atts ) );

    $number = ($number < 0) ? 0 : $number;
            $nr_of_links = ( $number < count( $links ) ) ? $number : count( $links );

            $output = '<div class="fansc clearfix"><h3>Available Bone Colours</h3><ul class="fan-colours clearfix">';

            for( $i = 0; $i < $nr_of_links; $i++ ) {
                $output .= $links[$i];
            }

            $output .=  '</ul></div>';
            return $output;
        }

Thanks in advance for any help or advise and please do bear with me, as I am still on a pretty steep learning curve and hope I have explained things sufficiently.

Solution

extract takes an associative array and turns each key into a variable. So in this case $number has the value 3 by default. That's because shortcode_atts compares $atts with the array you give it, and if a value is not set in $atts sets it to the value in the array.

I think this is all you need to know? Or do you need help with the "magic" too.

Edit in response to first comment:

So now you have the maximum number of links you want to display. There are many ways to do what you want. But one way would be like this:

<?php
$links=array();
$links[]='<li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/black_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/black_bone_on.jpg" alt="Black" width="87" height="87"></a></li>';
$links[]='<li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/white_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/white_bone_on.jpg" alt="White" width="87" height="87"></a></li>';
$links[]='<li class="fleft"><a href="' . get_bloginfo('url') . '/content/uploads/2013/01/yellow_bone.jpg"><img src="' . get_bloginfo('url') . '/content/uploads/2013/01/yellow_bone_on.jpg" alt="Yellow" width="87" height="87"></a></li>'

$number = ($number < 0) ? 0 : $number;
$nr_of_links = ( $number < count( $links ) ) ? $number : count( $links );

for( $i = 0; $i < $nr_of_links; $i++ ) {
    echo $links[$i];
}
?>

Where the ? is the ternary operator, which you can read about here: http://php.net/manual/en/language.operators.comparison.php