WordPress.org

Ready to get started?Download WordPress

Forums

GianlucaGuarini Black&white image jquery in WP? (5 posts)

  1. Gustavius
    Member
    Posted 1 year ago #

    I'm trying to impliement this black&white image jquery script in WP. It doesn't seem to effect the images.
    I'm using thematic with a child theme.

    In the functions.php I added...
    function boererepublieke_scripts() {

    wp_register_script( 'black-white', get_stylesheet_directory_uri().'/js/jQuery.BlackAndWhite.min.js', array('jquery'));
    wp_enqueue_script('jquery');
    wp_enqueue_script('black-white');
    }
    add_action('wp_enqueue_scripts', 'boererepublieke_scripts');

    And then...

    function boererepublieke_bw() {
    if(is_post()) {?>
    <script>
    $(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // for the images with a fluid width and height
    responsive:true,
    // to invert the hover effect
    invertHoverEffect: false,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
    fadeIn: 200, // 200ms for fadeIn animations
    fadeOut: 800 // 800ms for fadeOut animations
    }
    });
    });
    </script> <?php
    }
    }
    add_filter('wp-head','boererepublieke_bw');

    I then added the .bwWrapper class through the advanced image editor. But nothing seems to happen.

    Also:
    How can I wrap extra divs around a image in a post? I've searched high and low and the only option seems to be a preg_replace(). That's crazy. Isn't there a filter somewhere that could add these elements around a image?

    Thanks for your time!

  2. Gene
    Member
    Posted 1 year ago #

    There are two reasons above why this wont work:

    1. WordPress loads jQuery in no-conflict mode
    2. There is no filter wp-head it is an action and it's wp_head with an underscore

  3. Gustavius
    Member
    Posted 1 year ago #

    Thanks for the reply!

    I'm no guru with WP yet but this was just sloppy. I also found a few other mistakes!

    Anywayz. No luck. I've removed the wp_enqueue_script('jquery') and used add_action('init', 'boererepublieke_scripts'); to load the script.

    I also changed the actual script load in the wp_head to:
    function boererepublieke_bw() {
    if(function_exists('boererepublieke_bw')) {?>
    <script>
    // the script here

    </script> <?php
    }
    }
    add_action('wp_head','boererepublieke_bw');

  4. Gene
    Member
    Posted 1 year ago #

    This may not be so good either:

    add_action('init', 'boererepublieke_scripts');

    The problem with hooking on init is it's gonna load the scripts in admin pages views also which my not be necessary and could cause issues.

    The code you posted earlier will work by itself if you change a few things.

    Start over and try this:

    function boererepublieke_scripts() {
    	wp_register_script( 'black-white', get_stylesheet_directory_uri().'/js/jQuery.BlackAndWhite.min.js', array('jquery'));
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('black-white');
    }
    add_action('wp_enqueue_scripts', 'boererepublieke_scripts');
    
    function boererepublieke_bw() {
    	// is_post is deprecated… see: http://codex.wordpress.org/Conditional_Tags for current template tags
    	if( is_single() ) { ?>
    
    		<script type="text/javascript">
    		//<![CDATA[
    		jQuery(window).load(function(){
    			jQuery('.bwWrapper').BlackAndWhite({
    			hoverEffect : true, // default true
    			// set the path to BnWWorker.js for a superfast implementation
    			webworkerPath : false,
    			// for the images with a fluid width and height
    			responsive:true,
    			// to invert the hover effect
    			invertHoverEffect: false,
    			speed: { //this property could also be just speed: value for both fadeIn and fadeOut
    				fadeIn: 200, // 200ms for fadeIn animations
    			fadeOut: 800 // 800ms for fadeOut animations
    			}
    			});
    		});
    		//]]>
    		</script>
    	<?php
    	}
    }
    add_action('wp_head','boererepublieke_bw');
  5. Gustavius
    Member
    Posted 1 year ago #

    Thanks again Gene and apologies for the late reply. I appreciate your help.

    It doesn't seem to work so I am beginning to wonder if the problem might be somewhere else. Is the .bwWrapper class even doing anything? Seems to be a simple implementation - or rather, it should be.

    I'm going to play around with it and see what happens.

Topic Closed

This topic has been closed to new replies.

About this Topic