Why isn't Pinterest button adding an image path when Pinterest Pin It button is selected

I added a Pinterest button to my website and I'm not quite sure how to make the Pinterest button grab the img URL from my mysqli_fetch_array code. As of now when I click the button and try to pick a board to pin it to, I get this error:

Oops! You need to upload an image or provide the 'image_url' parameter

On top of that I have this in a thumbnail slider gallery with four different pictures. IS this why it is giving me this error? I would ideally like whichever current picture in the slider they are on when the Pinterest button is clicked to be the picture that is carried forward. If it helps to see this, my site is buyfarbest.com . Do I need to do anything different with the Pinterest HTML code that was provided from the site to grab the img?

<div class="pinItButton"><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-height="28" target="_blank"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a>

My code from my page:

<div class="viewproductpiccontainer">
<div class="slideshow">
    <div class="pinItButton"><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-height="28" target="_blank"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a>
    </div>
    <ul class='big'>
        <li>
            <?php $result=m ysqli_query($con, "SELECT * FROM products where product_id =".$_GET[ 'view_product']); if($row= mysqli_fetch_array($result)) { $products[$row[ 'product_id']]=$ row; echo "<img class='sizedimg' src='productpics/".$row[ 'img'] . "' alt='Product Pic'>"; } ?>
        </li>
    </ul>
    <ul class='controls'>
        <li class='prev'>&lt;</li>
        <li class='next'>&gt;</li>
    </ul>
    <ul class='thumb' id="bxslider-horizontal">
        <div class="bxslider">
            <div class="slide">
                <li>
                    <?php $result= mysqli_query($con, "SELECT * FROM products where product_id =".$_GET[ 'view_product']); if($row=m ysqli_fetch_array($result)) { $products[$row[ 'product_id']]=$ row; echo "<img class='sizedimg' src='productpics/".$row[ 'img'] . "' alt='Product Pic'>"; } ?>
                </li>
            </div>
        </div>

HTML source code:

<div class="viewproductpiccontainer">
<div class="slideshow">
    <div class="pinItButton"><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-height="28" target="_blank"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a>
    </div>
    <ul class='big'>
        <li>
            <img class='sizedimg' src='productpics/blueCollar.jpg' alt='Product Pic'>
        </li>
        <li>
            <img class='sizedimg' src='productpics/blueCollar2.jpg' alt='Product Pic'>
        </li>
        <li>
            <img class='sizedimg' src='productpics/allCollars.jpg' alt='Product Pic'>
        </li>
        <li>
            <img class='sizedimg' src='productpics/allCollars2.jpg' alt='Product Pic'>
        </li>
        <!--<li>
                                <img src="http://ift.tt/1eQqss7" />
                            </li>
                            <li>
                                <img src="http://ift.tt/1eQqvnA" />
                            </li>-->
    </ul>
    <ul class='controls'>
        <li class='prev'>&lt;</li>
        <li class='next'>&gt;</li>
    </ul>
    <ul class='thumb' id="bxslider-horizontal">
        <div class="bxslider">
            <div class="slide">
                <li>
                    <img class='sizedimg' src='productpics/blueCollar.jpg' alt='Product Pic'>
                </li>
            </div>
            <div class="slide">
                <li>
                    <img class='sizedimg' src='productpics/blueCollar2.jpg' alt='Product Pic'>
                </li>
            </div>
            <div class="slide">
                <li>
                    <img class='sizedimg' src='productpics/allCollars.jpg' alt='Product Pic'>
                </li>
            </div>
            <div class="slide">
                <li>
                    <img class='sizedimg' src='productpics/allCollars2.jpg' alt='Product Pic'>
                </li>
            </div>
            <!--<div class="slide"><li>
                                    <img src="http://ift.tt/1eQqss7" />
                                </li></div>
                                <div class="slide"><li>
                                    <img src="http://ift.tt/1eQqvnA" />
                                </li></div>--></div>
    </ul>

Is there a way to make what I have work?