Need some help getting a Jquery library to work WordPress
- SOLVED
Hello All,
I'm trying to the [[LINK href="http://miromannino.com/projects/justified-gallery/"]]Justified Jquery Library[[/LINK]] for my images post type and have no idea why it isn't working.
I've Enqueue the scripts and stylesheet associated with the jquery plugin and when I inspect element and click on the link for the style sheet and js library everything works. So I pretty sure it's not a problem of how I enqueue the scripts and styles. Here's the [[LINK href="http://pastebin.com/czP4BqRR"]]Enqueue function I have in my functions.php[[/LINK]].
I also tried creating just a normal html document with the foundation framework I'm using in my child theme and the same images from the same src that's hosted on my local server and that worked just fine: [[LINK href="http://pastebin.com/hDJwpsaA"]]Justified html example[[/LINK]]
I also know that you're suppose to the [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers"]]no conflict wrappers[[/LINK]] which I am doing.
It's the strangest thing. When I inspect element on the template page I'm using the query with the library on I don't get any errors showing in the console. The library I'm trying to use just straight up doesn't work and I can't figure out for the life of me what I'm doing wrong. [[LINK href="http://pastebin.com/J7CcbKHb"]]Here's the code for the template file I'm trying to make this work with[[/LINK]].
I'm pretty sure I'm just messing something up slightly, but I'm really not sure as to what I'm missing. I'll add more money as always if this question is a lot harder.
I thank you guys for the help I recieve!
Answers (4)
timDesain Nanang answers:
<div id="mygallery" >
<a href="path/to/myimage1_original.jpg">
<img alt="Title 1" src="path/to/myimage1_t.jpg"/>
</a>
</div>
try to add a path to image in the url:
change this part:
<a href="#"><?php the_post_thumbnail(); ?></a>
with:
<a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()))?>"><?php the_post_thumbnail(); ?></a>
Chris comments:
Thanks tim I tried making the change and it didn't work.
<a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()))?>"><?php the_post_thumbnail(); ?></a>
It's also to be noted in the html version the jquery was adding a class="justified-gallery" to the <div id="mygallery" > before I got the gallery to work by adding <a> tag before the image. In the php wordpress loop it's not adding that class.
Luis Abarca answers:
Try this one.
HTML id must be mygallery instead of #mygallery.
<div id="mygallery" >
I separated PHP code from HTML and moved the javascript call to the bottom, i also call the plugin when ready event is fired.
<?php
// the query
$args = array( 'post_type' => 'images');
$Justified_Query = new WP_Query( $args );
?>
<div id="main-content" class="main-content">
<div id="primary" class="content-area">
<div class="large-8 columns">
<div id="content" class="site-content" role="main">
<div id="mygallery" >
<?php if ( $Justified_Query->have_posts() ) : ?>
<?php while ( $Justified_Query->have_posts() ) : $Justified_Query->the_post(); ?>
<a href="#"><?php the_post_thumbnail(); ?></a>
<?php endwhile ?>
<?php wp_reset_postdata() ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<!-- Justified Image Grid -->
</div> <!--#mygallery-->
</div><!-- #content -->
</div><!-- Grid -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<script language="Javascript">
(function($)
{
$.ready(function()
{
$("#mygallery").justifiedGallery();
});
})(jQuery);
</script>
Chris comments:
I'm an idiot and didn't even notice that. the "#" I tried before with out that a few times lol, but I guess I just copied and pasted it directly after a few changes to try and get the library going. I feel pretty dumb right now.
Thanks! Have a good day sir.
Ian Lincicome answers:
I have had issues with javascript jquery before, I have gotten other jquery scripts to work in the past by trying to include the js file in different places in the header.php file instead of with enque scripts and it has worked. Moving it below or above other .js files can make a difference sometimes. Good luck.
Sai kumar answers:
Change
<div id="#mygallery" >
to
<div id="mygallery" >
and try. Hope it will works for you.
Thanks