Although there are other questions related to this topic, mine is unique. I have a scrolling jQuery feature that utilizes tabs for selection and is automated. Modifying the layout is challenging because it is dynamic and depends on the number of items in the selected array passed in PHP. The mark-up code is structured like this... (refer to PHP at the end)
<div id="tabs" class="clients" style="display:none;">
<a class="" href="#">1</a>
<a class="" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="activeSlide" href="#">5</a>
</div>
When scrolling through or selecting a tab, it acquires the activeSlide class. On certain clients, I intend to use CSS display:none to hide the tabs and would like to incorporate this arrow design for forward/backward functionality with JavaScript...
<div id="slider-controls">
<a href="#" id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a> <span><img src="_img/blank.gif" width="1" height="1" /></span>
<a href="#" id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a>
</div>
If there is an easier solution using existing jQuery, any suggestions on what to look for and whether it's feasible to simply add JavaScript to override the existing code with new forward/backward tabs.
Now, here's my PHP code so far to provide context as to where all this integration stems from. Note the existence of a pause button (less crucial) and a client case study section that may not be present in all items, hence the need for if/else statements. Beyond just making it function, I'm keen on understanding a more efficient way to approach and comprehend this process for those willing to invest a bit more time.
<?php if ($num_projs > 0){ ?>
<div id="slider">
<div id="photos">
<!-- include all photos here, to be manipulated via jQuery tabs -->
<?php
foreach($projects as $project){
if($project['project_media_use'] == 'video' and $project['project_video'] != ''){
?>
<div id="<?php print stripslashes($project['project_name']);?>" title="<?php print stripslashes($project['project_desc']);?>" class="video"><iframe src="http://player.vimeo.com/video/<?php print $project['project_video'];?>?title=0&byline=0&portrait=0" width="606" height="348" marginheight="0" marginwidth="0" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></div>
<?php }else{ ?>
<div id="<?php print stripslashes($project['project_name']);?>" title="<?php print stripslashes($project['project_desc']);?>" style="background-image: url('_img/_cms_uploads/_projects/<?php print $project['project_image'];?>')"></div>
<?php } } ?>
</div>
<div id="slider-bottom"> <!-- added display:none; to hide tabs - Shane -->
<div style="display:none;" id="tabs" class="clients"></div> <!-- tabs are created automatically based on number of divs within "photos" div -->
<?php if($clientCaseStudy != ''){?>
<div id="links">
<!-- shane -->
<a><img src="_img/_sliders/pause.gif" id="pause" width="20" height="17"/></a><span><img src="_img/blank.gif" width="1" height="1" /></span>
<a id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a><span><img src="_img/blank.gif" width="1" height="1" /></span><a id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a><br />
<a style="text-align: left;" href="/<?php print $clientCaseStudy + " ";?>" rel="casestudy">CASE STUDY ></a> <div style="clear:left"></div>
<!-- shane -->
</div><?php } else{?>
<div id="links"><a><img src="_img/_sliders/pause.gif" id="pause" width="20" height="17"/></a><span><img src="_img/blank.gif" width="1" height="1" /></span>
<a id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a><span><img src="_img/blank.gif" width="1" height="1" /></span><a id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
The website relies on Twitter Bootstrap for its structure.