Hey,
I have a scrollable going here: http://treethink.treethink.net/portfolio/
I am trying to put a p tag around the 2 a tags that cause the scrollable to move back and forth but no matter what I put around the a tags it breaks the scrolling (span, div, p...They all don't work)
How can I solve this? I assume it's something to do with the jQuery involved in the scrollable.
Here is the code for that section of the page:
<div id="wrapper">
<div id="portfolio">
<div id="portfolio-main">
<div id="scroll">
<div class="scrollable">
<div id="thumbs">
<?php
$pages = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc&parent='.$post->ID);
$i = 1;
foreach( $pages as $page ) {
$content = $page->post_title;
if( empty($content) ) continue;
$content = apply_filters('the_content', $content);
?>
<div class="column" style="background: url(/wp-content/uploads/<?php echo $page->post_name ?>.jpg);">
<div class="desc"><a href="<?php echo get_page_link($page->ID) ?>"><h2><?php echo $page->post_title ?></h2></a><p><?php if(get_post_meta($page->ID, "date", true)) { echo get_post_meta($page->ID, "date", true); ?><br /><?php } ?><?php echo get_post_meta($page->ID, "desc", true); ?></p></div></div>
<?php $i++;
} ?>
</div>
</div>
<a class="prev banner-button">prev</a>
<a class="next banner-button">next</a>
</div>
<br clear="all" />
<script>
$(function() {
$("div.scrollable").scrollable({
size: 4,
items: '#thumbs',
hoverClass: 'hover'
});
});
</script>
</div>
</div>
</div>
Here is the style I am trying to wrap it in:
#main-buttons{
height: 30px;
width: 560px;
top: 460px;
right: 0;
position: absolute;
z-index: 1;
text-align: right;
}
And finally, here is the jQuery file that includes the scrollable stuff: http://treethink.treethink.net/wp-content/themes/treethink/scroll/jquery.tools.min.js
Thanks, Wade