Installation of JQuery VGrid WordPress
- SOLVED
I'm trying to get [[LINK href="http://blog.xlune.com/2009/09/vgrid/demo005.html"]]jquery vgrid[[/LINK]] to work with [[LINK href="http://themeforward.com/demo2/category/portfolio/"]]my portfolio page[[/LINK]].
The code I'm using:
<!-- Get jQuery -->
<script src="<?php echo get_template_directory_uri(); ?>/scripts/jquery.vgrid.0.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#portfolio_wrap").vgrid({
easeing: "easeOutQuint",
time: 400,
delay: 20,
fadeIn: {
time: 500,
delay: 50
}
});
var hsort_flg = false;
$("#hsort").click(function(e){
hsort_flg = !hsort_flg;
$("#grid-content").vgsort(function(a, b){
var _a = $(a).find('h3').text();
var _b = $(b).find('h3').text();
var _c = hsort_flg ? 1 : -1 ;
return (_a > _b) ? _c * -1 : _c ;
}, "easeInOutExpo", 300, 0);
return false;
});
$("#rsort").click(function(e){
$("#portfolio_wrap").vgsort(function(a, b){
return Math.random() > 0.5 ? 1 : -1 ;
}, "easeInOutExpo", 300, 20);
return false;
});
});
//]]>
</script>
My page code:
<?php get_header(); ?>
<div id="portfolio_content">
<!-- Grab posts -->
<?php query_posts('cat=51&posts_per_page=12&paged='.$paged);
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="portfolio_wrap">
<!-- Get the image -->
<div class="img">
<a href="<?php the_permalink() ?>">
<?php $image = catch_that_image();
if( $image ) { ?>
<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>, <?php comments_number('No comments','One comment','% comments'); ?>" />
<?php } ?>
<!-- Excerpt title -->
<span class="title"><?php the_title(); ?></span>
</a>
<!-- Excerpt description -->
<div class="desc"><?php my_excerpt('short'); ?></div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<!-- Next/Previous Posts -->
<div class="mp_archive_portfolio">
<div id="more_posts">
<div class="oe"><?php next_posts_link('« Older Entries') ?></div><div class="re"><?php previous_posts_link ('Recent Entries »') ?></div>
</div>
</div>
</div>
<?php get_footer(); ?>
My CSS:
/* Portfolio Content */
.portfolio_wrap { background:#000 }
#portfolio_content { clear:both; padding:30px 0; margin:0; border-top:0px solid #E0E0E0; overflow:hidden }
#portfolio_content p { margin:0px 0 0 0 }
#portfolio_content ul { list-style:none }
.portfolio_wrap a { color:#444!important; -webkit-transition:all 300ms ease-in; -o-transition:all 300ms ease-in }
.portfolio_wrap a:hover { color:#BF5E28!important }
#portfolio_content .img { margin:0 0 9px 30px; height:560px; float:left; width:218px; overflow:hidden }
#portfolio_content .img img { width:218px; display:inline; margin:0 0 8px 0; background:#E0E0E0; padding:0px; border:0px solid #E0E0E0; height:435px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px }
#portfolio_content .img a:hover img { background:#FFF }
#portfolio_content .desc p { text-align:left; font-weight:normal; width:auto; font-size:12px; margin:0 0 0 0 }
#portfolio_content .title, #portfolio_content .title a { font-family:'Droid Serif', Georgia, serif; margin-bottom:20px!important; text-align:left; width:auto; font-weight:bold; font-size:18px }
Answers (1)
Peter Michael answers:
You still have '#grid-content' in the first sort function, change to '#portfolio_wrap'.
The script throws an error:
b.data("_vgchild") is undefined: http://themeforward.com/demo2/wp-content/themes/Base/scripts/jquery.vgrid.0.1.6.min.js on Line 17
Peter Michael comments:
It also throws 'jQuery("#slider").nivoSlider is not a function: http://themeforward.com/demo2/category/portfolio/ at Line 93'
It's missing the Nivo JS on the page. Make sure you have no JS errors.
Lucas Wynne comments:
Thanks for the catch, but this didn't make it work.
Peter Michael comments:
And when you change '#portfolio_wrap .img' to '#portfolio_wrap' in the second sort function just like the example?
Lucas Wynne comments:
Right now I have all three set to #portfolio_wrap, I'm not sure what's making it not work. :-S
Peter Michael comments:
Can you attach an uncompressed version of http://themeforward.com/demo2/wp-content/themes/Base/scripts/jquery.vgrid.0.1.6.min.js for debugging?
Lucas Wynne comments:
[[LINK href="http://themeforward.com/demo2/wp-content/themes/Base/scripts/jquery.vgrid.0.1.6.js"]]http://themeforward.com/demo2/wp-content/themes/Base/scripts/jquery.vgrid.0.1.6.js[[/LINK]]
Peter Michael comments:
Try this:
<?php get_header(); ?>
<div id="portfolio_content">
<!-- Grab posts -->
<?php
query_posts('cat=51&posts_per_page=12&paged='.$paged);
if (have_posts()) :
?>
<div id="portfolio_wrap">
<?php while (have_posts()) : the_post(); ?>
<!-- Get the image -->
<div class="img"> <a href="<?php the_permalink() ?>">
<?php $image = catch_that_image(); if( $image ) { ?>
<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>, <?php comments_number('No comments','One comment','% comments'); ?>" />
<?php } ?>
<!-- Excerpt title -->
<h3 class="title"><?php the_title(); ?></h3> </a>
<!-- Excerpt description -->
<div class="desc"><?php my_excerpt('short'); ?></div>
</div>
<?php endwhile; ?>
</div><!-- #portfolio_wrap -->
<?php endif; ?>
</div>
<!-- Next/Previous Posts -->
<div class="mp_archive_portfolio">
<div id="more_posts">
<div class="oe">
<?php next_posts_link('« Older Entries') ?>
</div>
<div class="re">
<?php previous_posts_link ('Recent Entries »') ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
Lucas Wynne comments:
When I do this nothing shows up where the excerpts/images used to be, take a look:
[[LINK href="http://themeforward.com/demo2/category/portfolio/"]]http://themeforward.com/demo2/category/portfolio/[[/LINK]]
Peter Michael comments:
It now throws 'c.easing[this.options.specialEasing && this.options.specialEasing[this.prop] || a] is not a function: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js at Line 143'
I think you need the jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
Lucas Wynne comments:
Doesn't work.
Peter Michael comments:
Load the easing plugin before the vgrid plugin. And remove the second instance of jQuery.
Peter Michael comments:
So, seems to work now, right?
Lucas Wynne comments:
It did with that code after a bunch of fixes I did. I will reward you the money but it will take about a week because I'm having problems with PayPal right now, so just hang tight, you'll get it.
Peter Michael comments:
No worries :)