Fetch from mysql to "content slider"

[Guldstrand]

I've found a nice "content slider", and would now need a little help to get the info from MySQL, and show that in the "slider".

 

The slider generates the following example:

<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"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
	<img src="images/image1.jpg" alt="" />
	<div class="info" >
	<h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
	</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
	<img src="images/image2.jpg" alt="" />
	<div class="info" >
	<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
	<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
	</div>
</div>
    <!-- Third Content -->
....
</div>

 

First I have to get all the headers/titles to the list/tab (menu):

	<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>

 

.. then the "title" is needed (again), and image, text for the fragments/divs.

	<div id="fragment-?" class="ui-tabs-panel ui-tabs-hide" style="">
	<img src="images/image2.jpg" alt="" />
	<div class="info" >
	<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
	<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
	</div>
</div>

Do not really know how to resolve this in a good way.

[topcat]

It seems that you would just loop through your recordset and use php to echo out your html.

just an example:

$counter=1;
while($row =mysql_fetch_assoc($result)){
echo "<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-$counter"><a href="#fragment-Scounter"><img src="{$row['image']}" alt="" /><span>{$row['title']}</span></a></li>";
$counter++;
}

 

and more of the same sort of thing for each of the fragments. Just do a check against the counter to see if you're on the first fragment and need to add anything special such as 'isSelected' etc.