Colorbox Loaded - But Image is Not Shown

I have got a simple HTML tag like follows:

<a class="button2"><img src="assets/img/slider/Bicycle.jpg"  alt="Feature-img" /></a>

My Script is as follows:

<link rel="stylesheet" href="assets/css/colorbox.css" type="text/css"/> 
<script src="assets/js/jquery.colorbox-min.js"></script>
    <script>
     jQuery(document).ready(function () {                    
        jQuery('a.button2').colorbox({rel:'button2'});               
            });
    </script>

As far as the download is concerned, I extracted it into the folder with the rest of my website files. While I Inspect in my chrome, It does not shown me any errors/bugs in the 'console'.

My Colorbox is Working, But the Image is Not Loaded. Can Anyone trigger my mind..I am hanged!

Solution

I was searching for a while and found out an answer through stackoverflow . I had the problem in my code. I did the following and it worked for me.

<a href="assets/img/slider/Bicycle.jpg" class="button1 button2" title="Sample Image"><img src="assets/img/slider/Bicycle.jpg"  alt="Feature-img" align="right" style="width:100%;height:240px;" /></a>

For More Info, I searched http://www.jacklmoore.com/colorbox/