Hello!
I have installed fancybox plugin, but it doesn't seem to work on my custom theme.... I have used several jquery on this theme so it may be conflicting, but I don't know how to fix it....
my idea is for fancybox to open individual post pages, rather than a large version of the image...
Any ideas?
My code is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
/*
Template Name: TRI
*/
?>
<title><?php bloginfo('name'); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("#page-wrap").wrapInner("<table><tr>");
$(".post").wrap("<td>");
$(".section").wrap("<td>");
});
</script>
<?php wp_enqueue_script("jquery"); ?>
</head>
<body>
<div id="nav">
<img src="<?php bloginfo('template_url'); ?>/logo.jpg" />
<BR /><br /><HR /><BR />
<span class="reference">
<ul class="nav">
<?php
$args=array(
'orderby' => 'slug',
'order' => 'ASC'
);
$categories=get_categories($args);
foreach($categories as $category) {
echo '<li><a href="#' . $category->name.'">' . $category->name.'</a> </li> '; }
?>
</ul>
</span>
</div>
<div id="wrap">
<div id="page-wrap">
<?php
/* start of The Loop, Display by Category style */
if (have_posts()) :
?>
<?php
/* collect categories */
foreach($posts as $post) :
$category = get_the_category('orderby=slug');
$cats[$category[0]->cat_ID] = $category[0]->cat_name;
endforeach;
/* uncomment next line to have categories sort alphabetically */
// uasort($cats, strcasecmp);
$cats = array_flip($cats);
?>
<?php
/* start of 'display by category' loop */
foreach($cats as $current_cat) :
?>
<!---BEGIN CATEGORY--->
<div class="section">
<div class="colorin" id="<?php echo get_the_category_by_id($current_cat); ?>">
<h5><?php echo get_the_category_by_id($current_cat); ?> →</h5>
</div>
</div>
<!---END CATEGORY--->
<?php
/* post loop for each category listing */
foreach($posts as $post) :
the_post();
$category = get_the_category('orderby=slug');
if($current_cat == $category[0]->cat_ID) : // if post is in correct category
?>
<!---BEGIN POST--->
<div class="post">
<div class="img">
<a href="<?php the_permalink() ?>" class="fancybox"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?></a>
</div>
<a href="<?php the_permalink() ?>"><?php the_title('<h2>', '</h2>'); ?></a>
</div>
<!---END POST--->
<?php
endif; // end 'if post in correct category'
endforeach; // end post loop
rewind_posts(); // reset loop for next category
endforeach; // end 'display by category' loop
?>
<?php else : // if no posts ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; // end of The Loop, organized by category slug ?>
</div>
</div>
<div id="bottom">
dirección: Génova 2015, of. 32, Providencia | teléfono: 56 - 2 - 895 9203 | contacto: <a href="mailto:mail@triarquitectura.cl">mail@triarquitectura.cl</a><BR />
© Todo el material incluido en este sitio es de exclusiva propiedad intelectual de Tri Arquitectura y de las personas mencionadas en los respectivos proyectos.
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>I really appreciate any help! Thank you :)
