このトピックには同様の質問がありますが、同じではありません。タブを使用して選択し、自動化するスクロール jQuery 機能があります。このレイアウトは動的であり、選択した配列内のアイテムの数に基づいて PHP で渡されるため、簡単に変更することはできません。マークアップ コードは次のようになります... (最後の PHP を参照)
<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>
スクロールするか、タブが選択されると、activeSlide クラスになります。一部のクライアントでは、(CSS で) display:none を使用してタブを非表示にする予定であり、何らかのタイプの 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>
既存のjQueryを使用した簡単な修正、私が探しているもの、およびJavaScriptを追加して既存のコードを新しい前方/後方タブで上書きすることが可能かどうかについての洞察。
ここで、この時点でのコードを含む PHP を示して、これがすべてどこから来ているかを確認します。一時停止ボタン (それほど重要ではありません) と、すべての項目に含まれていないクライアントのケース スタディがあることがわかります。そうしないと。機能させるだけでなく、これを理解するためのより良い方法と、もう少し時間がある人にとってどのように機能するかを学びたい.
<?php if ($num_projs > 0){ ?>
<div id="slider">
<div id="photos">
<!-- dump all photos here, then manipulate them via tabs with jQuery -->
<?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 } ?>
それが役立つ場合、サイトは Twitter Bootstrap を使用しています。