Guest User

Coda Slider

a guest
Dec 8th, 2011
101
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.  
RAW Paste Data