Problem z dodaniem skryptu na obrazek header

0

Witam
Mam problem z dodaniem skryptu do wordpress:
https://www.jqueryscript.net/animation/multiple-images-cz-parallax.html
samego obrazka chmury png wraz ze skryptem headera wordpress
Oto link do mojej strony: 'klm.nazwa.pl/klm'

KOD chmury "demo.html":

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>CZ-Parallax jQuery Plugin Example</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="js/CZ-Parallax_jQuery-min.js"></script>

</head>

<body style="margin: 0">
    <div id="test" style="width: 100vw; height: 100vh; padding: 20px;"><h1></div>
    <script>
        $('#test').CZParallax({
            fg: 'fg.png',
            bgs: [
                '',
                '',
                ''
            ]
        });
    </script>

</body>
</html>

KOD HEADER:

<?php

/**
 * Homepage parallax section Widget
 * Shapely Theme
 */
class Shapely_Home_Parallax extends WP_Widget {

	private $defaults = array();

	function __construct() {
		add_action( 'admin_init', array( $this, 'enqueue' ) );
		add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue' ) );
		add_action( 'customize_preview_init', array( $this, 'enqueue' ) );

		$widget_ops = array(
			'classname'                   => 'shapely_home_parallax',
			'description'                 => esc_html__( 'Shapely FrontPage Parallax Section', 'shapely-companion' ),
			'customize_selective_refresh' => true,
		);
		parent::__construct( 'shapely_home_parallax', esc_html__( '[Shapely] Parallax Section For FrontPage', 'shapely-companion' ), $widget_ops );

		$this->defaults = array(
			'title'         => '',
			'image_src'     => '',
			'image_pos'     => esc_html__( 'left', 'shapely-companion' ),
			'body_content'  => '',
			'button1'       => '',
			'button2'       => '',
			'button1_link'  => '',
			'button2_link'  => '',
			'border_bottom' => '',
		);
	}

	public function enqueue() {

		if ( is_admin() && ! is_customize_preview() ) {
			wp_enqueue_style( 'epsilon-styles', get_template_directory_uri() . '/inc/libraries/epsilon-framework/assets/css/style.css' );
		}

	}

	/**
	 * @param array $args
	 * @param array $instance
	 */
	function widget( $args, $instance ) {
		$allowed_tags           = wp_kses_allowed_html( 'post' );
		$allowed_tags['iframe'] = array(
			'width'           => array(),
			'height'          => array(),
			'src'             => array(),
			'frameborder'     => array(),
			'allowfullscreen' => array(),
		);

		$instance = wp_parse_args( $instance, $this->defaults );

		echo $args['before_widget'];

		/* Classes */
		$class1 = ( 'background-full' == $instance['image_pos'] ) ? 'cover fullscreen image-bg' : ( ( 'background-small' == $instance['image_pos'] ) ? 'small-screen image-bg p0' : ( ( 'right' == $instance['image_pos'] ) ? 'bg-secondary' : ( ( 'bottom' == $instance['image_pos'] ) ? 'bg-secondary pb0' : '' ) ) );
		$class2 = ( ( 'background-full' == $instance['image_pos'] ) || ( 'background-small' == $instance['image_pos'] ) ) ? 'top-parallax-section' : ( ( 'right' == $instance['image_pos'] ) ? 'col-md-4 col-sm-5 mb-xs-24' : ( ( 'left' == $instance['image_pos'] ) ? 'col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1' : ( ( 'bottom' == $instance['image_pos'] ) ? 'col-sm-10 col-sm-offset-1 text-center' : ( ( 'top' == $instance['image_pos'] ) ? 'col-sm-10 col-sm-offset-1 text-center mt30' : '' ) ) ) );
		$class3 = ( ( 'background-full' == $instance['image_pos'] ) || ( 'background-small' == $instance['image_pos'] ) ) ? 'col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center' : '';
		$class4 = ( 'left' == $instance['image_pos'] || 'right' == $instance['image_pos'] ) ? 'row align-children' : 'row';
		$class5 = ( 'right' == $instance['image_pos'] ) ? 'col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 text-center' : '';
		$class6 = ( 'left' == $instance['image_pos'] ) ? 'col-md-7 col-sm-6 text-center mb-xs-24' : '';
		$class7 = ( 'background-full' == $instance['image_pos'] ) ? 'fullscreen' : '';

		if ( 'on' == $instance['border_bottom'] ) {
			$class1 .= ' border-bottom';
		}
		/**
		 * Widget Content
		 */
		?>
		<section class="<?php echo esc_attr( $class1 ); ?>">
			<?php
			if ( ( 'background-full' == $instance['image_pos'] || 'background-small' == $instance['image_pos'] ) && '' != $instance['image_src'] ) {
			?>
			<div class="parallax-window <?php echo esc_attr( $class7 ); ?>" data-parallax="scroll" data-image-src="<?php echo esc_url( $instance['image_src'] ); ?>" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
				<div class="<?php echo ( 'background-full' == $instance['image_pos'] ) ? 'align-transform' : ''; ?>">
					<?php } else { ?>
					<div class="container">
						<?php } ?>

						<div class="<?php echo esc_attr( $class4 ); ?>">

							<?php
							if ( ( 'left' == $instance['image_pos'] || 'top' == $instance['image_pos'] ) && '' != $instance['image_src'] ) {
								?>
								<div class="<?php echo esc_attr( $class6 ); ?>">
									<img class="img-responsive" alt="<?php echo esc_attr( $instance['title'] ); ?>" src="<?php echo esc_url( $instance['image_src'] ); ?>">
								</div>
								<?php
							}
							?>

							<div class="<?php echo esc_attr( $class2 ); ?>">
								<div class="<?php echo esc_attr( $class3 ); ?>">
									<?php
									echo ( '' != $instance['title'] ) ? ( ( 'background-full' == $instance['image_pos'] ) || ( 'background-small' == $instance['image_pos'] ) ) ? '<h1>' . wp_kses_post( $instance['title'] ) . '</h1>' : '<h3>' . wp_kses_post( $instance['title'] ) . '</h3>' : '';
									if ( '' != $instance['body_content'] ) {
										echo '<div class="mb32">';
										echo apply_filters( 'the_content', wp_kses( $instance['body_content'], $allowed_tags ) );
										echo '</div>';
									}
									echo ( '' != $instance['button1'] && '' != $instance['button1_link'] ) ? '<a class="btn btn-lg btn-filled" href="' . esc_url( $instance['button1_link'] ) . '">' . wp_kses_post( $instance['button1'] ) . '</a>' : '';
									echo ( '' != $instance['button2'] && '' != $instance['button2_link'] ) ? '<a class="btn btn-lg btn-white" href="' . esc_url( $instance['button2_link'] ) . '">' . wp_kses_post( $instance['button2'] ) . '</a>' : '';
									?>
								</div>
							</div>
							<!--end of row-->
							<?php
							if ( ( 'right' == $instance['image_pos'] || 'bottom' == $instance['image_pos'] ) && '' != $instance['image_src'] ) {
								?>
								<div class="<?php echo esc_attr( $class5 ); ?>">
									<img class="img-responsive" alt="<?php echo esc_attr( $instance['title'] ); ?>" src="<?php echo esc_url( $instance['image_src'] ); ?>">
								</div>
								<?php
							}
							?>
						</div>
					</div>
					<?php if ( 'background-full' == $instance['image_pos'] || 'background-small' == $instance['image_pos'] ) { ?>
				</div>
				<?php } ?>
		</section>
		<div class="clearfix"></div>
		<?php

		echo $args['after_widget'];
	}
0

Pytanie czy te skrypty z head ci się ładują:

    <script src="js/CZ-Parallax_jQuery-min.js"></script>

Ja dodawałem przez functions.php:

function startwordpress_scripts() {

	wp_enqueue_script( 'CZ-Parallax_jQuery-min', get_template_directory_uri() . '/js/CZ-Parallax_jQuery-min.js' );
}

add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' );
0

ładują ale wtedy nie działa inny parallax obrazków na głównej

0

jak to zrobić żeby wszystko sprawnie dziłało, proszę o pomoc

1 użytkowników online, w tym zalogowanych: 0, gości: 1