Masonry don't work

  • Resolved Cristiano

    (@iclapton)


    10 years, 4 months ago

    Hi WP friends,

    I’m trying to get the Masonry JQuery plugin working, and I can’t figure out why it isn’t.

    This is what I did:

    1) wp_enqueue_script

    add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
  wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}

    2) Init the script

    function my_masonry() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($){
            $('#home_content').masonry({
                itemSelector: '.widgetcontainer',
                columnWidth: 300,
            });
        });
    </script>
<?php
}
add_action('init', 'my_masonry');

    3) Structured my HTML

    <div id="home_content">
<div class="widgetcontainer widget_text">
<div class="widgetcontainer widget_text">
<div class="widgetcontainer widget_recent_entries">
<div class="widgetcontainer widget_rfb_widget">
</div>

    4) Structured my CSS

    #home_content {
	width: 900px;
	padding: 0;
	border: 0;
}

#home_content .widgetcontainer {
	width: 300px;
}

    Using Firebug I can see that the plugin was initialized, the script is in the head and the HTML and CSS are ok… but nothing happens.

    Why I am doing wrong???
    Thanks!!!

Viewing 6 replies - 16 through 21 (of 21 total)
1 2
  • Thread Starter Cristiano

    (@iclapton)

    10 years, 4 months ago

    Andrew, I did it and nothing happens…

    I still need to load the Masonry plugin, so my code should be this, right?

    add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
	wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
	wp_enqueue_script(
		'my-masonry-script',
		get_stylesheet_directory_uri() . '/js/my-masonry-script.js',
		array( 'jquery' )
	);
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 4 months ago

    Now check your browser’s console log and you’ll see there is no longer a jQuery library issue.

    You can’t put HTML in JS files like that

    Thread Starter Cristiano

    (@iclapton)

    10 years, 4 months ago

    Humm that’s cool… but I can’t find my script being loaded also.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 4 months ago

    Why not? http://snag.gy/AqaIL.jpg

    Thread Starter Cristiano

    (@iclapton)

    10 years, 4 months ago

    Yes! Now it’s working! Thank you very much Andrew!

    Thread Starter Cristiano

    (@iclapton)

    10 years, 4 months ago

    Topic resolved.

Viewing 6 replies - 16 through 21 (of 21 total)
1 2
  • The topic ‘Masonry don't work’ is closed to new replies.

Tags