Using Jquery within a post

  • dithmo

    (@dithmo)


    11 years, 4 months ago

    Hi folks, sorry if this is in the wrong section but it seemed to be the place to put it.

    Im currently trying to use a jquery crossfade called cycle and I have also used another simple jquery crossfade however, with both pieces of code, instead of crossfading the images it fades out to black then the next image fades in. I have been trying to eliminate possibilties and I dont think that it is the jquery.

    I have used both the crossfaders on static html and they worked fine. I cant see anything wrong in my css either so I was wondering if it could be a conflict with the way wordpress works. Has anyone else come across something like this?

    here is the code in the head of my template:

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script&gt;
    <script src=”/wp-content/themes/IOL/js/jquery.cycle.all.js”></script>

    <script>
    $(document).ready(function() {
    $(‘.anim’).cycle({
    fx: ‘fade’,
    });
    });
    </script>

    and this is the code in the actual post:

    <div class=”anim”>
    <img style=”” src=”/wp-content/uploads/2012/11/Homepage-sidebar-001.jpg” alt=”” width=”960px” />
    <img style=”” src=”/wp-content/uploads/2012/11/Homepage-sidebar-002.jpg” alt=”” width=”960px” />
    </div>

    If anyone can offer any help it would be greatly appreciated

    P.S Interestingly, when it reaches the end of the images it crossfades perfectly back to the begining!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Bartel

    (@andrew-bartel)

    11 years, 4 months ago

    First, any reason why you’re using 1.5?

    Second, WordPress is pretty picky about how you include your javascript. Review wp_enqueue_script and let us know if you have any questions. Here’s an example of what you’d put in your functions.php file:

    add_action('wp_enqueue_scripts','include_my_javascript');

function include_my_javascript() {
wp_enqueue_script('jquery.cycle.js','path/to/js');
}
    Thread Starter dithmo

    (@dithmo)

    11 years, 4 months ago

    Hi Andrew, thanks for your fast reply. Firstly Im not actually using 1.5, I downgraded a minute ago just incase it was a version difference. the example page of the cycle plugin used 1.5 so I thought id check, but nice catch 🙂

    Secondly I have been using a plugin called add to head and just including the javascript as posted above however I will try adding that to the functions.php and see if that works.

    Thanks very much for your help

    Andrew Bartel

    (@andrew-bartel)

    11 years, 4 months ago

    Honestly just going by WordPress “best practices” has solved 90% of the frustration that I originally encountered when I started developing in WP.

    In general I shy away from using “$” when using jQuery in WordPress (just use “jQuery”) instead. There are some tricks to get it to work but I’ve never gotten around to really mastering them.

    Thread Starter dithmo

    (@dithmo)

    11 years, 4 months ago

    Good to know mate, im only just getting started with jquery so i didnt know the “$” issue but i suppose theres always more to learn isnt there 🙂

    Andrew Bartel

    (@andrew-bartel)

    11 years, 4 months ago

    Oh ya, wait till you hit the custom post types and custom taxonomies.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Using Jquery within a post’ is closed to new replies.