Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

Coda Slider

By: a guest on Dec 8th, 2011  |  syntax: None  |  size: 2.75 KB  |  hits: 72  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // ==== @ HEADER.PHP ====
  2.  
  3. <!-- Begin JavaScript -->
  4.                 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.3.2.min.js"></script>
  5.                 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.easing.1.3.js"></script>
  6.                 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.coda-slider-2.0.js"></script>
  7.                  
  8.         <!-- End JavaScript -->
  9. <script type="text/javascript">
  10.     $().ready(function() {
  11.         $('#coda-slider-1').codaSlider({
  12.             dynamicTabs: false,
  13.             dynamicArrows: false
  14.         });
  15.     });
  16.  </script>
  17.  
  18.  // I also tried
  19.  <script type="text/javascript">
  20.     jQuery(document).ready(function($) {
  21.         $('#coda-slider-1').codaSlider({
  22.             dynamicTabs: false,
  23.             dynamicArrows: false
  24.         });
  25.     });
  26.  </script>
  27.  
  28.  
  29. // === @ INDEX.PHP ====/
  30.  
  31.  
  32. <div class="coda-slider-wrapper">
  33.    <div class="coda-slider preload" id="coda-slider-1">
  34.     <?php
  35.     $postcount = 0;
  36.     $slider_query = new WP_Query('posts_per_page=3');
  37.     while ($slider_query->have_posts()) : $slider_query->the_post();
  38.         $do_not_duplicate[] = get_the_ID();
  39.         $postcount++;
  40.         ?>
  41.         <div class="panel">
  42.                 <div class="panel-wrapper">
  43.                         <?php if (has_post_thumbnail()) {the_post_thumbnail('slider_img');} ?>
  44.                         <h2 class="title"><?php the_title(); ?></h2>
  45.                         <?php the_content(); ?>
  46.                 </div>
  47.         </div>
  48.         <?php endwhile; ?>
  49.    </div><!-- .coda-slider -->
  50.    <div id="coda-nav-1" class="coda-nav">
  51.     <ul>
  52.     <?php
  53.         $postcount = 0;
  54.         $slider_query = new WP_Query('posts_per_page=3');
  55.         while ($slider_query->have_posts()) : $slider_query->the_post();
  56.             $do_not_duplicate[] = get_the_ID();
  57.             $postcount++;
  58.     ?>
  59.     <li class="tab<?php echo $postcount; ?>">
  60.         <a href="#<?php echo $postcount; ?>">
  61.             <?php if (has_post_thumbnail()) {the_post_thumbnail('slider_nav_img');} ?>
  62.         </a>
  63.     </li>
  64.     <?php endwhile; ?>
  65.         </ul>
  66.         </div>
  67. </div><!-- .coda-slider-wrapper -->
  68.  
  69. // === @ STYLE.CSS === //
  70.  
  71.  
  72. .coda-slider, .coda-slider .panel { width: 620px }
  73.  
  74. .coda-slider p.loading { padding: 20px; text-align: center }
  75.  
  76. .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
  77. .coda-nav ul li { display: inline }
  78. .coda-nav ul li a {  display: block; float: left;  }
  79.  
  80. .coda-slider-wrapper { clear: both; overflow: auto }
  81. .coda-slider { float: left; overflow: hidden; position: relative }
  82. .coda-slider .panel { display: block; float: left }
  83. .coda-slider .panel-container { position: relative }
  84. .coda-nav-left, .coda-nav-right { float: left }
  85. .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
  86.