Forums

[resolved] JQuery in page - help please (7 posts)

  1. MeltingDog
    Member
    Posted 8 months ago #

    Hi all,

    I tried searching for a similar thread but couldnt come accross anything that helped so I apologise if this has been answered before.

    What I am trying to do is run a simple JQuery script within a WP page. It simply slides one image down to reveal one behind it. Currently the images show in the correct place in the correct order (so css is fine) but no animation happens.

    I have the script running fine on it own page but nothing happens when I copy it into WP.

    Heres my HTML:

    <div class="imageswapwrap">
    	<img src="http://localhost/wpeido/wp-content/uploads/2011/09/image1.jpg" />
        	<img src="http://localhost/wpeido/wp-content/uploads/2011/09/image2.jpg" class="frontimage" />
    	</div>

    And my JQuery SCript which is on its own file:

    $(function(){
    	$('.imageswapwrap').hover(function() {
    		$(this).children('.frontimage').stop().animate({"top" : "300px"}, 700);
    	}, function(){
    		$(this).children('.frontimage').stop().animate({"top" : "0px"}, 400);
    		});
    });

    And in my header I have:

    <script language="JavaScript" SRC="<?php echo bloginfo('template_directory') ?>scripts/jQuery-1.6.3.pack.js"></script>
    <script src="<?php echo bloginfo('template_directory') ?>scripts/imageswapscript.js" type="text/javascript"></script>

    (note: I am calling my own JQuery library as well as the built in wp one).

    Any help would be much appreciated! Thanks heaps!

  2. geeksfolder
    Member
    Posted 8 months ago #

    We will need to see your webpage, so please let us know your webpage url.

    It would be very possible that your jquery is crashed so change this jquery code:

    $(function(){

    to

    jQuery(function($){

  3. MeltingDog
    Member
    Posted 8 months ago #

    Hi Geeksfolder

    Here is my link:

    http://www.eido.com.au/test-page/

    Like I said, the desired out come is meant to be that the first image slides down to reveal one behind it.

    I also tried changing
    $(function(){

    to

    jQuery(function($){

    to no avail
    Thanks!

  4. geeksfolder
    Member
    Posted 8 months ago #

    Hey MeltingDog,

    The link is broken...

  5. MeltingDog
    Member
    Posted 8 months ago #

    Sorry it was set to private. Try now

  6. geeksfolder
    Member
    Posted 8 months ago #

    Hey I see you have missed a slash (/) in front of scripts folder name.

    You wrote:

    <script language="JavaScript" SRC="<?php echo bloginfo('template_directory') ?>scripts/jQuery-1.6.3.pack.js"></script>
    <script src="<?php echo bloginfo('template_directory') ?>scripts/imageswapscript.js" type="text/javascript"></script>

    but needs to be:

    <script language="JavaScript" SRC="<?php echo bloginfo('template_directory') ?>/scripts/jQuery-1.6.3.pack.js"></script>
    <script src="<?php echo bloginfo('template_directory') ?>/scripts/imageswapscript.js" type="text/javascript"></script>

    Let's try this and see how it goes.

  7. MeltingDog
    Member
    Posted 8 months ago #

    Ahhhhh... epic fail on my be-half! Thanks so much geeks! Works fine now! Just needed to open my eyes a bit more!

Reply

You must log in to post.

About this Topic