Horje
Need some help getting a Jquery library to work - Wordpress Solution
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!

Solution - 1


<div id="mygallery" >
  <a rel="nofollow" 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 rel="nofollow" href="#"><?php  the_post_thumbnail(); ?></a>
with:
<a rel="nofollow" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()))?>"><?php  the_post_thumbnail(); ?></a>


Solution - 2

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 rel="nofollow" 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>


Solution - 3

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.


Solution - 4

Change

 
<div id="#mygallery" > 
to

<div id="mygallery" >
and try. Hope it will works for you. Thanks





Wordpress

Related
BBpress topic freshness function in wp_query. - Wordpress Solution BBpress topic freshness function in wp_query. - Wordpress Solution
List all posts with 2 terms of a taxonomy - Wordpress Solution List all posts with 2 terms of a taxonomy - Wordpress Solution
Table fix - Wordpress Solution Table fix - Wordpress Solution
Merging Terms with Bootstrap Carousel - Wordpress Solution Merging Terms with Bootstrap Carousel - Wordpress Solution
Use the menu from one theme for another (price question) - Wordpress Solution Use the menu from one theme for another (price question) - Wordpress Solution

Type:
Code Example
Category:
Coding
Sub Category:
Code Example
Uploaded by:
Admin
Views:
7