Guldstrand Posted December 20, 2010 Share Posted December 20, 2010 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. Quote Link to comment Share on other sites More sharing options...
topcat Posted December 21, 2010 Share Posted December 21, 2010 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.