jQuery Forum

1. <div id="body">
   <div id="bannerContainer">
   <div id="banner"></div>
           <div id="containerSide">
           <div id="slideshow">
             <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner1.png">
             <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner2.png">
             <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner3.png">             
           </div>
           </div>       
   </div>

1.   #theMenu { width: 197px; height: 300px; margin: 0 0; }
     
     
     /* Header links styling */
     h3.head a {
     color: #333;
     display:block;
     border-top: 0px solid #36a;
     border-right: 0px solid #36a;
     background: #ddd url(down.gif) no-repeat;
     /*background-position: 98% 50%; */
     padding: 3px 5px;
     }
     h3.head li {
     display:inline;
     padding:0;
     margin:0;
     list-style-type: circle;
     }
     h3.head a:hover {
     color: #000;
     background: grey no-repeat;
     background-position: 98% 50%;
     }
     h3.selected a {
     /*   #69c */
     background: #69c no-repeat;
     background-position:98% 50%;
     color: #000;
     padding: 3px 5px;
     }
     h3.selected a:hover {
     background: grey no-repeat;
     background-position:98% 50%;
     color: #36a;
     }
     
   #AboutNavBox{
    margin: 10px 0 0 0;
    background-color: #d1d2d4;
    width: 207px;
    height: 200px;
    }
2. #AboutNav a:link{
    background: url('images/About/AboutNav2.png') 0 0; 
    width: 197px;
    height: 32px;
       text-decoration: none;
    color: black; Arial, Helvetica, sans-serif; 
    font-size: 12px;
    display: block;
    } 
3. #AboutNav a:visited{
    background: url('images/About/AboutNav2.png') 0 95px; 
    width: 197px;
    height: 32px;
       text-decoration: none;
    color: black; Arial, Helvetica, sans-serif; 
    font-size: 12px;
    display: block;
    padding-left: 10px;
    }  
4. #AboutNav a:hover{
    background: url('images/About/AboutNav2.png') 0 64px; 
    width: 197px;
    height: 32px;
    text-decoration: none;
    color: red; Arial, Helvetica, sans-serif; 
    font-size: 12px;
    display: block;
    }
5. #AboutNav ul{ 
    list-style-type: circle;
    }
    
   #AboutNav li a:link{
    background: url('images/About/AboutNav2.png') 0 0; 
    width: 197px;
    height: 32px;
       text-decoration: none;
    color: black; Arial, Helvetica, sans-serif; 
    font-size: 12px;
    display: block;
    } 
6. #AboutNav li a:visited{
    background: url('images/About/AboutNav2.png') 0 95px; 
    width: 197px;
    height: 32px;
       text-decoration: none;
    color: black; Arial, Helvetica, sans-serif; 
    font-size: 12px;
    display: block;
    padding-left: 10px;
    }  
    
   #AboutNav li a:hover{
    background: url('images/About/AboutNav2.png') 0 64px; 
    width: 197px;
    height: 32px;
    text-decoration: none;
    color: red; Arial, Helvetica, sans-serif; 
    font-size: 12px;
    display: block;
    } 

This is the JQuery Plugin that I am using:  JQuery Cycle All

My point is :  How to create a navigation buttons that are horizontal and also how to erase the numbers?

functions.php      

1. function my_scripts_method() {
2. 
    // register your script location, dependencies and version
    // for practice area
       wp_register_script('jquery1_script', get_template_directory_uri().'/js/jquery-1.4.2.min.js', array('jquery'), '1.0');
       wp_register_script('jqfaq_script', get_template_directory_uri().'/js/jq-faq-2.js', array('jquery'), '1.0');
    
    // for front page
       wp_register_script('jquery17_script', get_template_directory_uri().'/js/jquery-1.7.1.min.js', array('jquery'), '1.0');
       wp_register_script('Cycle_script', get_template_directory_uri().'/js/jquery.cycle.all.js', array('jquery'), '1.0');
    wp_register_script('slideshow_script', get_template_directory_uri().'/js/slideshow.js', array('jquery'), '1.0');
    
    // for about
    wp_register_script('jquery_script', get_template_directory_uri().'/js/jquery.js', array('jquery'), '1.0');
    wp_register_script('accordion_script', get_template_directory_uri().'/js/accordion.js', array('jquery'), '1.0');
    wp_register_script('dropdownnav_script', get_template_directory_uri().'/js/dropdownnav.js', array('jquery'), '1.0');
3.  wp_enqueue_script('jquery1_script');
       wp_enqueue_script('jqfaq_script');
    
    wp_enqueue_script('jquery17_script');
       wp_enqueue_script('Cycle_script');
    wp_enqueue_script('slideshow_script'); 
    
    /* wp_enqueue_script('jquery_script'); */
       wp_enqueue_script('accordion_script');
    wp_enqueue_script('dropdownnav_script');   
    
    
    }
   

Hi, I am trying to utilize several JQuery Plugin:

 The problem is if I enable:  wp_enqueue_script('jquery_script') Then the other plugin inactive:

Well I am using 3 types of JQuery:

1. '/js/jquery-1.7.1.min.js'

2. '/js/jquery-1.4.2.min.js'

3. '/js/jquery.js' 

Well, I haven't been successful in activating all of them which I intend too.  It's like either or.  If I activate number 3 then 1 & 2 inactive.  If I activate all of them number 1 & 2 inactive.  Number 1 & 2 are active only if I disable number 3.  Strange isn't it ?  How to enable all of the plugin ?                                          

1.     <div id="container">
           <div id="slideshow">
               <img src="images/bannerside.png">
               <img src="images/bannerside2.png">
               <img src="images/bannerside3.png">           
           </div>
       </div>

Hi,  can anyone help me modify the slideshow navigation from vertical to horizontal and also erase the numbers ?

slideshow

1. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
   <script type="text/javascript">
   $(function() {
       $('#slideshow').before('<div id="nav" class="nav">').cycle({
           fx:     'fade',
           speed:  'fast',
           timeout: 3000,
           pager:  '#nav',
           before: function() { if (window.console) console.log(this.src); }
       });
   });
   </script>
   </head>
   <body>
2. <h2 id="header">This page shows how to create a pager that auto-advances.</h2>
   <div id="main">
3. <div id="demos">
       <table cellspacing="20"><tr>
       <td>
           <div id="slideshow" class="pics">
               <img src="images/bannerside.png">
               <img src="images/bannerside2.png">
               <img src="images/bannerside3.png">           
           </div>
       </td></tr>
       </table>

1. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
   <script type="text/javascript">
   $(function() {
       $('#slideshow').before('<div id="nav" class="nav">').cycle({
           fx:     'fade',
           speed:  'fast',
           timeout: 3000,
           pager:  '#nav',
           before: function() { if (window.console) console.log(this.src); }
       });
   });
   </script>
   </head>
   <body>
2. <h2 id="header">This page shows how to create a pager that auto-advances.</h2>
   <div id="main">
3. <div id="demos">
       <table cellspacing="20"><tr>
       <td>
           <div id="slideshow" class="pics">
               <img src="images/bannerside.png">
               <img src="images/bannerside2.png">
               <img src="images/bannerside3.png">           
           </div>
       </td></tr>
       </table>