Page not working properly on jquery load function

So I have this script.

<script type="text/javascript">
$(document).ready(function(){
   $("#send").click(function(){
      $("#image_results").load('/gallary1.php');
   });
});
</script>

When I click the send button it should load gallary1.php into the image_results however it doesn't load it properly?

If i just use the include_once("gallary1.php"); command inside the then is displays properly. Im guessing the Script is changing the code somehow but have no idea how.

Below is the php page I'm trying to load in.

$gallary="";
$gallary.='


<div class="content">
                <div id="rg-gallery" class="rg-gallery">
                    <div class="rg-thumbs">

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                                <span class="es-nav-prev">Previous</span>
                                <span class="es-nav-next">Next</span>
                            </div>
                            <div class="es-carousel">
                                <ul>
                                    <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
                                    <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>
                                </ul>
                            </div>
                        </div>

                </div>
            </div>
        </div>';


echo $gallary;

Any help would be greatly appreciated. Also if there is anymore info i need to provide please let me know. Thanks

I have found that if i load gallary1.php via include then the resulting html is:

<div class="content">
                <div id="rg-gallery" class="rg-gallery"><div class="rg-view"><a href="#" class="rg-view-full"></a><a href="#" class="rg-view-thumbs rg-view-selected"></a></div>
                    <div class="rg-thumbs">

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                                <span class="es-nav-prev">Previous</span>
                                <span class="es-nav-next">Next</span>
                            </div>
                            <div class="es-carousel">
                                <ul style="width: 154px; display: block; margin-left: 0px;">
                                    <li class="selected" style="margin-right: 3px; width: 69px;"><a href="#" style="border-width: 2px;"><img src="http://www.fyom.16mb.com/images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></a></li>
                                    <li style="margin-right: 3px; width: 69px;"><a href="#" style="border-width: 2px;"><img src="http://www.fyom.16mb.com/images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></a></li>
                                </ul>
                            </div>
                        <div class="es-nav"><span class="es-nav-prev" style="display: none;">Previous</span><span class="es-nav-next" style="display: none;">Next</span></div></div>

                    </div>
                <div class="rg-image-wrapper">           <div class="rg-image-nav">       <a href="#" class="rg-image-nav-prev">Previous Image</a>       <a href="#" class="rg-image-nav-next">Next Image</a>      </div>          <div class="rg-image"><img src="images/1.jpg"></div>     <div class="rg-loading" style="display: none;"></div>     <div class="rg-caption-wrapper">      <div class="rg-caption" style="">       <p>From off a hill whose concave womb reworded</p>      </div>     </div>    </div></div>
        </div>

However when is loaded via the script:

<div class="content">
                <div id="rg-gallery" class="rg-gallery">
                    <div class="rg-thumbs">

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                            <span class="es-nav-prev">Previous</span>
                            <span class="es-nav-next">Next</span>
                        </div>
                        <div class="es-carousel">
                            <ul>
                                <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></a></li>
                                <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></a></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>

So something is not being picked up. As is it displaying what I echo out however when the page loaded properly is is inheriting additional formatting.