I'm trying to apply the Wookmark jQuery Plugin to my wordpress theme. The implementation takes place with a Loop, as the point of the subject is to create a visually pleasing portfolio. For the subject i've registered a new type of post typed 'portfolio' and made a loop that distinguishes between posts with pictures and those without.
The problem is of course, that it doesn't work. No returning errors, all scripts are in place [or so it seems to me] - but the posts do not receive whatever treatment [jQuery Voodoo] that the WookMark is supposed to apply. All I get all the posts, called in order.
I've enqueued the scripts into my theme through the functions.php file thus:
if ( !function_exists('core_mods') ) {
function core_mods() {
wp_enqueue_script('jquery-custom', get_template_directory_uri().'/assets/wookmark/libs/jquery.min.js' );
wp_enqueue_script('wookmark', get_template_directory_uri().'/assets/wookmark/jquery.wookmark.js', array('jquery-custom'), false, false);
}
}
add_action( 'wp_enqueue_scripts', 'core_mods' );
And the actual HTML of page-portfolio.php is as follows:
<?php get_header(); ?>
<?php query_posts('post_type=portfolio') ?>
<?php if (have_posts()) : ?>
<script type="text/javascript">
(function($) {
$('.masonry-object').wookmark({
align: 'center',
autoResize: false,
comparator: null,
container: $('#masonry-container'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
})(jQuery);
</script>
<div id="masonry-container">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="masonry-object" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('masonry-thumb'); ?>
</a>
<div class="masonry-title">
<?php echo the_title(); ?>
</div>
</div><!--.masonry-thumbnail-->
<?php elseif ( !has_post_thumbnail() ): ?>
<div class="masonry-details">
<h5>
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<span class="masonry-post-title">
<?php the_title(); ?>
</span>
</a>
</h5>
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details -->
<?php endif; ?>
</div>
<?php endwhile;?>
</div> <!-- End .masonry-container -->
<?php endif; ?>
<?php get_footer(); ?>
The CSS attached to the subject is such:
#masonry-container {
}
.post-area {
background: #ffffff ;
padding: 10px ;
}
.masonry-thumbnail {
}
.masonry-thumbnail img {
max-width: 100%;
height:auto;
}
.masonry-title {
position: absolute;
width: auto;
background-color: #ef9430;
color: #ffffff;
padding: 5px;
bottom: 0px ;
right: 0px;
}
.masonry-details {
padding: 10px;
background-color: #ffffff;
}
.masonry-object {
width: 25% ;
transition: all 1s ease;
}
.masonry-object:hover {
z-index: 2;
box-shadow: 0 0 20px #ffffff;
transition: all 1s ease;
}
(function($) {...})(jQuery);
is not the same as $(function() {...});
First will be executed as soon as it is encountered, second one is jQuery shorthand for $( document ).ready()
, and will run when the DOM is ready for JavaScript. The solution is to move the script below the #masonry-container
div, or to use the ready event. There is a small problem in WordPress since default jQuery uses jQuery.noConflict()
so $ is not referenced to jQuery object. My favorite solution for that is:
jQuery(function ($) {
});
It will run on document ready, with $ as a jQuery alias.
Side note: - use position: relative
on #masonry-container
div, as documentation says.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.