You have missed few important things,
One I see is
<div id="fragment-1" class="ui-tabs-panel" style="">
</div>
Here the id is always fragment-1
It should be
fragment-1
fragment-2
fragment-3.....so on
Second issue is yu didn't hide the other div except the 1st one.
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
</div>
So, you need to update the counter in loop to set the div id properly and use hide for all iteration except the first one.
For reference, here is the workable version
You need to re-code your php
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Photographs 1</span></a></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2"><a href="#fragment-2"><span>Photographs 2</span></a></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3"><a href="#fragment-3"><span>Photographs 3</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/cancel_cross.png" alt="" />
<div class="info">
<h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
<p>>read more</p>
</div>
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/confirm_right.png" alt="" />
<div class="info">
<h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
<p>>read more</p>
</div>
</div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/gray_arrow_greater.jpg" alt="" />
<div class="info">
<h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
<p>>read more</p>
</div>
</div>
</div>
It will run definirely...
cheers