WordPress.org

1. Ammer Naber
   Member
   Posted 4 months ago #

   I am trying to do a simple image rollover via jQuery. When I use the jQuery that is included with my wordpress 3.3.1 installation:
   /wp-includes/js/jquery/jquery.js?ver=1.7.1
   my image rollover effect does not work.

   If I include a link to the same version jQuery library, for example:
   http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
   the rollover image effect works.

   Here is the code I am using for the jQuery rollover effect.

   <script type="text/javascript">
   jQuery(function(){
        $(".img-swap").hover(
             function(){this.src = this.src.replace("_off","_on");},
             function(){this.src = this.src.replace("_on","_off");
        });
   });
   </script>

   And here is the code of the trigger image:
   <img src="http://www.huntingtonbeachpizza.com/wp-content/themes/pizzalounge/images/header/facebook_off.png" alt="" class="img-swap" />

   Can anyone shed some light on this?
   If i leave the link from Google to the jQuery library my rollover will work, but I am afraid of creating some kind of conflict with the currently bundled jQuery that comes installed in ,y WordPress 3.3.1 installation.

   Thanks in advance

   Here is a link to my site to view the page with the rollover applies and view the page source if needed:
   Thanks

2. pingram3541
   Member
   Posted 3 months ago #

   I've found the same issue and I'm not sure if it's a bug because I can clearly see this line in my sites head area:

   <script type="text/javascript" src="http://sandboxwp.motomontage.com/wp-includes/js/jquery/jquery.js?ver=1.7.1"></script>

   But like you, my custom scripts do not work until I manually include the library.

   So for now I just include:

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

   just after:

   wp_head();

   in my themes header.php

3. Ammer Naber
   Member
   Posted 3 months ago #

   @pingram I have not found a solution yet, but including both in my theme has worked and I have not seen any conflicts yet. If I figure something out I will post the solution or my findings here.
   Here is my site:
   Huntington Beach Pizza

   Thanks

4. pingram3541
   Member
   Posted 3 months ago #

   newcastle for a $1.95!!! I work in Costa Mesa...I'll be right over! =)

5. Ammer Naber
   Member
   Posted 3 months ago #

   That is a sample banner. Sorry. The grand opening is in around three weeks. It will be all micro and craft brew. We will have great specials on those as well. Stay tuned! You reminded me to make sure and remove the sample banners. I will do that right now.
   Thanks.

6. pingram3541
   Member
   Posted 3 months ago #

   figured it out. jQuery shortcut "$" doesn't work with wordpress version by default. Found this link explaining it in detail and how to go around it if using the shortcut is preferred.

   http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

   ps, a quick fix I use at the beginning of my code I use inside posts and pages is:

   jQuery(function($) {
   //$(whatever)...
   });

   instead of:
   

   jQuery(function() {
   //jQuery(whatever)...
   });

7. Ammer Naber
   Member
   Posted 3 months ago #

   Pingram, thanks for the solution! I was getting ready to implement it, so the first thing I did was remove the call to the Google library and reload my page in the browser without it.
   <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   Then I viewed my page and it worked without using the solution you provided. Weird. I wonder why it now works and before it didn't? Maybe one of the other plugins has an effect on it or that they possibly fixed the bug? I don't get it. Either way thanks for the post!
   -Ammer
   Pizza Lounge Huntington Beach

Reply

You must log in to post.