Jump to content

Carousel Arrows


unplugged_web
 Share

Recommended Posts

I'm trying to change a carousel to have arrows either side controlling the background image. I can get it to work on a static page but the site is built completely with PHP so I'm not sure how to do this.

I think what I need to do is have just a left and right button that change which image is shown when clicked.
So far I've got this:
PHP:
<?php if( $value==1 && isset( $pagecontrol[1] ) ) { ?>      <div id="tabblock">        <div style="width: 994px; height: 275px; position: relative;">          <?php foreach( $tabblock as $key=>$value2 ) { ?>          <div class="tabb" id="tabb-<?php echo $key ?>" style="position: absolute;<?php if( $key!=$tabblock_init ) { ?> display: none;<?php } ?>"><a onclick="return clicktrack( 'tab',<?php echo $value2['id'] ?>,'' );" href="<?php echo $value2['url'] ?>"<?php if( $value2['newwin']==1 ) { ?> target="_blank"<?php } ?>><img src="/images/dynamic/<?php echo $value2['image'] ?>" alt="<?php echo htmldisplay( $value2['title'] ) ?>" title="<?php echo htmldisplay( $value2['title'] ) ?>" /></a></div>          <?php } ?>          <?php if( count( $tabblock )>1 ) { ?>                  <div id="tabctrl">            <?php foreach( $tabblock as $key=>$value2 ) { ?>            <div id="tabb-cont-<?php echo $key ?>" class="tabb_tab <?php if( $key==$tabblock_init ) { ?> tabb_on<?php } else { ?> tabb_off<?php } ?>"> </div>            <?php } ?>            <?php echo $html_clear ?>          </div>          <?php } ?>        </div>      </div>
Also the JavaScript for the 'tabs' is:
<script type="text/javascript">        var currenttab=<?php echo $tabblock_init ?>; var lasttab=<?php echo count( $tabblock )-1 ?>; var automode=1;        function acttab( oldid,id ) {          $('#tabb-'+oldid).animate({left: -743},'swing',function(){ $(this).hide(); });          $('#tabb-'+id).css( 'left','743px' ); $('#tabb-'+id).show();          $('#tabb-'+id).animate({left: 0},'swing');          $('.tabb_tab').removeClass( 'tabb_on' );          $('.tabb_tab').addClass( 'tabb_off' );          $('#tabb-cont-'+id).removeClass( 'tabb_off' );          $('#tabb-cont-'+id).addClass( 'tabb_on' );          currenttab=id;        }        function autotabs() {          if( automode==1 ) {            var prevtab=currenttab;            currenttab++; if( currenttab>lasttab ) { currenttab=0; }            acttab( prevtab,currenttab );          }          setTimeout( "autotabs()",10000 );        }        setTimeout( "autotabs()",10000 );        $(document).ready(function() {          $('.tabb_tab').hover(function(){$(this).css('cursor','pointer');},function(){});          $('.tabb_tab').click(function() {            var id=$(this).attr("id");            id=id.replace( 'tabb-cont-','' );            if( currenttab!=id ) { acttab( currenttab,id ); }          });          $('#tabblock').hover( function(){ automode=0;$("#tabctrl").slideDown( 200 ); },function(){ automode=1;$("#tabctrl").slideUp( 200 ); } );        });      </script>
The Javascript for the 'click track' is:
function clicktrack( type,id,loc ) {  $.ajax({    async: false, type: "POST", url: "/ajax/clicktrack.php",    data: { type: type, id: id, loc: loc }  });  return true;}
and the click track.php file is:
if( empty( $_POST['id'] ) || !ctype_digit( $_POST['id'] ) ) {    echo "no id received";    exit();  } else {    if( $_POST['type']=="banner" ) {      usedb( $country_modules[$ccode2]['db_web'],"dbLinkInt" );      $query="update front_banner_pool set clicks=clicks+1 where id=".dbstr( $_POST['id'] );      dbupdate( $query,"dbLinkInt" );      echo "ok";      exit();    } elseif( $_POST['type']=="tab" ) {      usedb( $country_modules[$ccode2]['db_web'],"dbLinkInt" );      $query="update front_tabblock set clicks=clicks+1 where id=".dbstr( $_POST['id'] );      dbupdate( $query,"dbLinkInt" );      echo "ok";      exit();    } else {      echo "no valid type received";      exit();    }  }
CSS:
#tabctrl {display: block!important;padding: 0;padding: 10px 0 10px 0!important;width: 100%!important;top: 50%;bottom: auto!important;margin-top: -5px!important;}#tabb-cont-0, #tabb-cont-1{position:absolute}#tabb-cont-0{left:0;}#tabb-cont-1{right:0;}
Edited by thehappyappy
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...