Grow your CSS skills. Land your dream job.

Including jquery on a wordpress site

  • # December 27, 2010 at 1:52 pm

    Hello

    I am currently battling with including jquery on a wordpress powered site.
    The script is supersized:
    http://www.buildinternet.com/project/supersized/

    I have tried it on a standard html site with no problems, but I can’t seem to figure out how to do it in wordpress.

    I have added a:
    < ?php wp_enqueue_script("jquery"); ?>

    before my < ?wp_head();?>

    but it just looks weird.

    Take a look here:
    http://www.tingen.dk/test

    The script seems to load, but the images are not loaded, and they overlap my menu…

    Hope you can help…

    Thanks
    /Simon

    # December 27, 2010 at 2:51 pm

    With wordpress I always manually include jQuery below the wp_head()

    Try if that works.

    Like so:

    < ?php wp_head(); ?>

    # December 27, 2010 at 3:38 pm

    It looks like your image problem is not jQuery (It seems to be loading perfectly) but the urls you’ve used to display them.

    Within your javascript:

    ...
    {image : 'nordslide/1.jpg', title : 'Testimg1'},
    {image : 'nordslide/2.jpg', title : 'Testimg2'},
    {image : 'nordslide/3.jpg', title : 'Testimg3'},
    ...

    They should all be:

    ...
    {image : 'http://www.tingen.dk/nordslide/1.jpg', title : 'Testimg1'},
    {image : 'http://www.tingen.dk/nordslide/2.jpg', title : 'Testimg2'},
    {image : 'http://www.tingen.dk/nordslide/3.jpg', title : 'Testimg3'},
    ...

    # December 27, 2010 at 4:06 pm

    Just going to the root should work as well correct? Saves a few characters as well.


    ...
    {image : '/nordslide/1.jpg', title : 'Testimg1'},
    {image : '/nordslide/2.jpg', title : 'Testimg2'},
    {image : '/nordslide/3.jpg', title : 'Testimg3'},
    ...
    # December 28, 2010 at 11:58 am

    It works

    Thanks to all of you.

    /S

    # December 28, 2010 at 6:49 pm

    Actually I have a question about the jQuery script (Supersized).

    It should be possible to control the content of the slide show through WordPress, but I can’t figure it out. Now the images are called from within the script, but shouldn’t it be possible to link to a folder, or maybe there is an easier way?

    Thank you for all your help

    /Simon

    # December 29, 2010 at 2:00 am

    You could create some fancy wordpress template that would run ‘the loop’ and output the desired images, then use the permalink to that page as the source for the script. I haven’t looked at the script you are using so cannot guarantee it will work, or how best to implement it. I will check this evening (UK Time), if you haven’t found a solution by then.

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

You must be logged in to reply to this topic.

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