How do I use javascript / jquery image resize with wordpress?

3 Views

I wan’t to include this script in my wordpress theme, making it resize all of the images inside posts according to the current window height:

https://github.com/gutierrezalex/photo-resize

Read More

I’ve made a basic test page in my text editor and it resizes the image just fine. However, when I try to apply/include it in my wordpress theme I simply can’t get it to work.

Please, any help would be much appreciated!

Here’s what’s between my head tags: 

<head><!-- HEAD BEGINS -->

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="jquery-photo-resize.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("img").photoResize({
        bottomSpacing: 15
        });
    });
</script>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>

<?php wp_head(); ?>

</head><!-- HEAD ENDS -->

And here’s the script, that’s located in the same folder (file name: jquery-photo-resize.js): 

/// <reference path="jquery-1.5.1.min.js" />

/*
* Adjust photo on browser window resize
* 
* @example: $('selector').photoResize();
* 
* @example:
$('selector').photoResize({
    bottomSpacing:"Bottom Spacing adjustment"
});
*/

(function ($) {

$.fn.photoResize = function (options) {

    var element = $(this), 
        defaults = {
            bottomSpacing: 10
        };

    $(element).load(function () {
        updatePhotoHeight();

        $(window).bind('resize', function () {
            updatePhotoHeight();
        });
    });

    options = $.extend(defaults, options);

    function updatePhotoHeight() {
        var o = options, 
            photoHeight = $(window).height();

        $(element).attr('height', photoHeight - o.bottomSpacing);
    }
};

}(jQuery));

My current functions.php: 

<?php
add_theme_support( 'post-thumbnails' );

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {

$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}

function register_my_menu() {
register_nav_menu('top-menu',__( 'Top Menu' ));
}
add_action( 'init', 'register_my_menu' );

function righter_filter_ptags($content) {
$content = preg_replace('/<p>s*(<a .*>)?s*(<img .* />)s*(</a>)?s*</p>/iU', '123', $content);
$content = preg_replace('/<p>s*(<iframe .*>*.</iframe>)s*</p>/iU', '1', $content);
$content = preg_replace('/<p>s*(<samp .*>*.</samp>)s*</p>/iU', '1', $content);
return $content;
}

add_filter('the_content', 'righter_filter_ptags');
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Okay first and foremost. For all wordpress scripts. enquing is incredibly important. So take your links and do this:

    The best way to avoid asset conflicts is by properly enquing the files. To do this you must use wp_enqueue_script

    a good way to do this is to put it as part of a function in your functions.php file like so

    1. create a function
    2. insert wp_register_script into the function
    3. then insert wp_enqeue_script into the function
    4. use add_action(), to initlize the enqueue-ing process

    so –

    function load_scripts() {
  wp_register_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'scriptyouwillwaittobeloaded' ) );
  wp_enqueue_script( 'script-name' );
}

add_action('wp_enqueue_scripts', 'load_scripts');

    In this example the function load_scripts() would then be called in the header.php file. Take a look at wp_register_script as well to get a better understanding of the arguments for that as well, but in summary –

    first argument: is the name you want to use as reference to this script

    second argument: is the actual link to the script

    third argument: is the script that you want to load before this script (the script you want to wait for before this script loads)

    and for wp_enqueue_script, the argument is merely a reference to the name (the first argument of wp_register_script)

    the add_action function arguments:

    first argument: the function you are “hooking” into

    second argument: the function you created that will be “hooked”

    Secondly – is <script src="http://code.jquery.com/jquery-latest.js"></script> actually the name of jquery’s remote file? Try loading your own localized version. Also, make sure nothing else is loading jquery (like a boilerplate, what have you).

    In summary – Your code isn’t loading as a result of how wordpress works. Your resize script is acutally being looked for in the root folder, not the wordpress themese folder, as a result it is unable to be found. A quick fix would be to do this <script src=<?php echo "'" . get_template_directory_uri() . "/jquery-photo-resize.js'" ?>></script> However you should seriously consider enqueuing.