WordPress parallax javascript

  • nehuenmingote

    (@nehuenmingote)


    15 years, 9 months ago

    Hi, I’m a complete newbie in WordPress and php seeking for desperate help. That said, I’m trying to make a template based on the javascript parallax effect ( http://webdev.stephband.info/parallax.html ). I created a draft in html (which works perfectly fine) and then adapted it to the WordPress structure. I’ve been reading that WordPress has certain conflicts with javascript, I mean, it handles them differently, so I’ve tried to call the scripts as the WordPress Codex site explains -but had little success-. My main problem is that I don’t really know if I’m writing script properly. Here’s what I did:

    (note: parallax plugin needs of JQuery and globals.js to work, so I need to call both scripts)

    header.php

    <?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" type="text/css" href="wp-content/themes/AbrilTemplate/style.css" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />

<?php
function my_init() {

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'wp-content/themes/AbrilTemplate/js/jquery.min.js');

	wp_enqueue_script('parallax', get_bloginfo('template_url') . 'wp-content/themes/AbrilTemplate/js/jquery.jparallax.js', array('jquery'));

	wp_enqueue_script('global', get_bloginfo('template_url') . 'wp-content/themes/AbrilTemplate/js/global.js', array('jquery'));

}
add_action('wp_head', 'my_init');
?>

</head>

<body <?php body_class(); ?>>

    index.php

    <?php get_header(); ?>

<div id="content_header">
	<div id="parallax">
    	<div id="tapiz"></div>
        <div id="escritorio">
        </div>
        </div>
        <div id="vignette"></div>
    </div>

<?php get_footer(); ?>

    globals.js

    $(document).ready(function(){

	$('#tapiz').css({width:"1200px"});
	$('#escritorio').css({width:"1024px"});
	$('#vignette').css({width:"2048px"})
	jQuery('#parallax').jparallax({triggerExposesEdges: true}, {xtravel: '20px', ytravel: '60px'}, {xtravel: '90px', ytravel: '80px'}, {xtravel: '10px', ytravel: '55px'}, {xtravel: '-20px'}, {ytravel: '-45'}).append(corners);

});

    What am I doing wrong? Could somebody help me solve my problem? Thank you VERY much in advanced 🙂

    Neh

Viewing 1 replies (of 1 total)
  • mckn

    (@mckn)

    14 years, 11 months ago

    Did you ever figure it out?

    The same thing is happening with me. Through regular html, the page I’ve setup with the parallax effect works fine, not in WordPress.

    I’ve tried to call jquery and parallax through enqueue in the header as well as through regular script calls… all to no avail.

    Any help would be very much appreciated.
    Sean

Viewing 1 replies (of 1 total)

The topic ‘WordPress parallax javascript’ is closed to new replies.