I have a jQuery Image rotator in where I want to output certain data (photo and text). This would normally not be so difficult was it not for the initial set up of the rotator. Here is the query and the rotator structure so you can see my problem:
Query
<cfquery name="getRotatoroutput" datasource="#Request.dsn#">
SELECT DISTINCT cat_id, cat_name, cat_image
FROM LCategories
ORDER BY RAND() LIMIT 4
</cfquery>
Normal Rotator Structure
<div id=“fragment-1” class=“ui-tabs-panel” style=“”>
<img src=“image1.png”>
<div class=“info”><h2>Product1</h2></div>
</div>
<div id=“fragment-2” class=“ui-tabs-panel hide” style=“”>
<img src=" image2.png">
<div class=“info”><h2>Product2</h2></div>
</div>
<div id=“fragment-3” class=“ui-tabs-panel hide” style=“”>
<img src=" image3.png">
<div class=“info”><h2>Product3</h2></div>
</div>
<div id=“fragment-4” class=“ui-tabs-panel hide” style=“”>
<img src=" image4.png">
<div class=“info”><h2>Product4</h2></div>
</div>
I could normally have something to output it like:
<cfoutput query="getRotatoroutput">
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="catPhotos/#cat_image# ">
<div class="info"><h2>#cat_name#</h2></div>
</div>
My problem is that the div’s have an id fragment-1, fragment-2 etc (used for navigation) and the last three div’s have, as you can see, an additional class hide so that they’re Initially not visible.
I have no idea how to tackle this. I was thinking of MOD, but have no idea how. Does anyone has an idea?
Thank you all in advance