Grow your CSS skills. Land your dream job.

Jquery not loading in wordpress properly

  • # August 7, 2010 at 8:00 pm

    I’ve been picking at this for about an hour and I’m just puzzled why it doesn’t seem to be picking up right.

    check out: http://www.delsolrealtytucson.com

    I’m trying to use a basic image fader for some images on the homepage. The one that I’ve used in the past is Jon Raach’s (http://jonraasch.com/blog/a-simple-jquery-slideshow).

    I can get the slider to work perfectly outside of wordpress on other static html pages.

    I have enqued jquery prior to the heading tag and called in the script I can see that the script is loading just fine, and I notice that every 4 seconds or so, the page seems to be trying to load something (the cursor processes for just 1 second) which I’m assuming is the script trying to switch the image.

    Am I just missing something dumb here? Totally stumped lol.

    # August 8, 2010 at 3:58 pm

    Your jQuery plugin is loading before the jQuery library. Check out your source in Firebug.

    How are you loading jQuery? Via functions.php with an enqueue script function? How are you loading the plugin? Make sure it is loaded after wphead in your header.php. Or, better yet, put it in your footer.

    # August 8, 2010 at 8:42 pm

    Hmm I wonder if you saw it while I was fooling around with it trying to get it to work :P

    The place I normally call it is on the page itself (it’s a custom page for the index page), so on the custom page I have:

    Code:
    <?php
    /*
    Template Name: Homepage
    */
    ?>

    <?php get_header(); ?>

    <script type="text/javascript">

    /***
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
    ***/

    function slideSwitch() {
    var $active = $(‘#slideshow IMG.active’);

    if ( $active.length == 0 ) $active = $(‘#slideshow IMG:last’);

    // use this to pull the images in the order they appear in the markup
    var $next = $active.next().length ? $active.next()
    : $(‘#slideshow IMG:first’);

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next = $( $sibs[ rndNum ] );

    $active.addClass(‘last-active’);

    $next.css({opacity: 0.0})
    .addClass(‘active’)
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass(‘active last-active’);
    });
    }

    $(function() {
    setInterval( "slideSwitch()", 5000 );
    });

    </script>

    <div id="content">
    <div id="content_container">
    <div id="inner_content">

    <h2>Del Sol Home</h2>

    <div id="homeimages">
    <div id="slideshow">
    <img src="<?php bloginfo(‘template_directory’); ?>/images/slideshow/slide1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="<?php bloginfo(‘template_directory’); ?>/images/slideshow/slide2.jpg" alt="Slideshow Image 2" />
    <img src="<?php bloginfo(‘template_directory’); ?>/images/slideshow/slide3.jpg" alt="Slideshow Image 3" />
    </div>
    </div>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <!— <h2><?php the_title(); ?></h2> –>
    <?php the_content(‘<p class="serif">Read the rest of this page &raquo;</p>’); ?>
    <?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
    </div>
    <?php endwhile; endif; ?>
    <?php edit_post_link(‘Edit this entry.’, ‘<p>’, ‘</p>’); ?>

    <h1>Latest Article</h1>

    <!— Loop –>

    <?php query_posts(‘posts_per_page=1′); ?>

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <h2><a style="color:#fff;font-size:20px; border:none;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <h5><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></h5>

    <?php the_excerpt(); ?>
    <p><a class="continue" href="<?php the_permalink(); ?>">Read this article</a></p>
    <p><a class="allarticles" href="articles/">See All Articles</a></p>

    <?php endwhile; ?>
    <!— End Loop –>

    <?php get_sidebar(); ?>
    </div>
    </div>
    </div>
    <?php get_footer(); ?>

    And I’m calling in the jquery like this in the header.php:

    Code:
    <?php wp_enqueue_script("jquery"); ?>

    <?php wp_head(); ?>

    # August 10, 2010 at 1:42 am

    Solved (KIND OF) – I ended up just using the WP-Cycle Plugin, which worked beautifully and also provided some more flexibility of the client.

    # November 14, 2012 at 2:16 am

    hi doobie i have similar problem sometimes the images in slider not loading my website is [www.retrify.com](http://www.retrify.com “Retrify-tech,entertainment blog”)
    can you help me?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".