Wordpress Magnifying function using images from custom filed "et_gallery" - php

Question

The goal effect is: When clicked on the magnifying icon, it uses the "Fancybox" plugin to display big size images (mutiple images separated by commas) in the custom filed "et_gallery".
Right now the magnifying isn't working at all.
http://heidixu.com/#!/?page_id=4
It was working fine once. And then I accidently replaced the final code with an earlier version. So the version I currently have is pretty close but something is not right or missing and I can't figure out what because I'm not an expert in php...
This is the page: http://heidixu.com/#!/?page_id=4 and every other pages with thumbnails work the same.
This is my current version of php code that was edited:
<?php
/*
Template Name: Portfolio Page
*/
?>
<?php
$et_ptemplate_settings = array();
$et_ptemplate_settings = maybe_unserialize( get_post_meta($post->ID,'et_ptemplate_settings',true) );
$fullwidth = true;
$et_ptemplate_showtitle = isset( $et_ptemplate_settings['et_ptemplate_showtitle'] ) ? (bool) $et_ptemplate_settings['et_ptemplate_showtitle'] : false;
$et_ptemplate_showdesc = isset( $et_ptemplate_settings['et_ptemplate_showdesc'] ) ? (bool) $et_ptemplate_settings['et_ptemplate_showdesc'] : false;
$et_ptemplate_detect_portrait = isset( $et_ptemplate_settings['et_ptemplate_detect_portrait'] ) ? (bool) $et_ptemplate_settings['et_ptemplate_detect_portrait'] : false;
$gallery_cats = isset( $et_ptemplate_settings['et_ptemplate_gallerycats'] ) ? (array) $et_ptemplate_settings['et_ptemplate_gallerycats'] : array();
$et_ptemplate_gallery_perpage = isset( $et_ptemplate_settings['et_ptemplate_gallery_perpage'] ) ? (int) $et_ptemplate_settings['et_ptemplate_gallery_perpage'] : 12;
$et_ptemplate_portfolio_size = isset( $et_ptemplate_settings['et_ptemplate_imagesize'] ) ? (int) $et_ptemplate_settings['et_ptemplate_imagesize'] : 2;
$et_ptemplate_portfolio_class = '';
if ( $et_ptemplate_portfolio_size == 1 ) $et_ptemplate_portfolio_class = ' et_portfolio_small';
if ( $et_ptemplate_portfolio_size == 3 ) $et_ptemplate_portfolio_class = ' et_portfolio_large';
?>
<?php get_header(); ?>
<div class="single_container et_shadow">
<div class="single_content">
<div class="entry post clearfix">
<?php get_template_part('loop','page'); ?>
<div id="et_pt_portfolio_gallery" class="clearfix<?php echo $et_ptemplate_portfolio_class; ?>">
<?php $gallery_query = '';
$portfolio_count = 1;
$et_open_row = false;
if ( !empty($gallery_cats) ) $gallery_query = '&cat=' . implode(",", $gallery_cats);
else echo '<!-- gallery category is not selected -->'; ?>
<?php
$et_paged = is_front_page() ? get_query_var( 'page' ) : get_query_var( 'paged' );
?>
<?php query_posts("showposts=$et_ptemplate_gallery_perpage&paged=" . $et_paged . $gallery_query); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $width = 260;
$height = 170;
if ( $et_ptemplate_portfolio_size == 1 ) {
$width = 140;
$height = 94;
$et_portrait_height = 170;
}
if ( $et_ptemplate_portfolio_size == 2 ) $et_portrait_height = 315;
if ( $et_ptemplate_portfolio_size == 3 ) {
$width = 430;
$height = 283;
$et_portrait_height = 860;
}
$et_auto_image_detection = false;
if ( has_post_thumbnail( $post->ID ) && $et_ptemplate_detect_portrait ) {
$wordpress_thumbnail = get_post( get_post_thumbnail_id($post->ID) );
$wordpress_thumbnail_url = $wordpress_thumbnail->guid;
if ( et_is_portrait($wordpress_thumbnail_url) ) $height = $et_portrait_height;
}
$titletext = get_the_title();
$et_portfolio_title = get_post_meta($post->ID,'et_portfolio_title',true) ? get_post_meta($post->ID,'et_portfolio_title',true) : get_the_title();
$et_videolink = get_post_meta($post->ID,'et_videolink',true) ? get_post_meta($post->ID,'et_videolink',true) : '';
$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,true,'et_portfolio');
$thumb = $thumbnail["thumb"];
if ( $et_ptemplate_detect_portrait && $thumbnail["use_timthumb"] && et_is_portrait($thumb) ) {
$height = $et_portrait_height;
} ?>
<?php if ( $portfolio_count == 1 || ( $et_ptemplate_portfolio_size == 2 && (!$fullwidth && ($portfolio_count+1) % 2 == 0) ) || ( $et_ptemplate_portfolio_size == 3 && (($portfolio_count+1) % 2 == 0) ) ) {
$et_open_row = true; ?>
<div class="et_pt_portfolio_row clearfix">
<?php } ?>
<div class="et_pt_portfolio_item">
<?php if ($et_ptemplate_showtitle) { ?>
<h2 class="et_pt_portfolio_title"><?php echo $et_portfolio_title; ?></h2>
<?php } ?>
<div class="et_pt_portfolio_entry<?php if ( $height == $et_portrait_height ) echo ' et_portrait_layout'; ?>">
<div class="et_pt_portfolio_image<?php if ($et_videolink <> '') echo ' et_video'; ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<?php $gallery = explode(',', get_post_meta($post->ID, 'et_gallery', true));
foreach ($gallery as $item) { ?>
<a class="fancybox" href="<?php echo $item; ?>" style="display: none;" rel="gallery[<?php echo $post->ID; ?>]" title="<?php the_title(); ?>"></a>
<?php } ?>
<span class="et_pt_portfolio_overlay"></span>
<a class="et_portfolio_zoom_icon <?php if ($et_videolink <> '') echo 'et_video_lightbox'; else echo('fancybox'); ?>" title="<?php the_title(); ?>"<?php if ($et_videolink == '') echo ' rel="gallery[' . $post->ID . '"]'; ?> href="<?php if ($et_videolink <> '') echo $et_videolink; else echo($thumbnail['fullpath']); ?>"><?php esc_html_e('Zoom in','Sky'); ?></a>
<a class="et_portfolio_more_icon" href="<?php the_permalink(); ?>"><?php esc_html_e('Read more','Sky'); ?></a>
</div> <!-- end .et_pt_portfolio_image -->
</div> <!-- end .et_pt_portfolio_entry -->
<?php if ($et_ptemplate_showdesc) { ?>
<p><?php truncate_post(90); ?></p>
<?php } ?>
</div> <!-- end .et_pt_portfolio_item -->
<?php if ( ($et_ptemplate_portfolio_size == 2 && !$fullwidth && $portfolio_count % 2 == 0) || ( $et_ptemplate_portfolio_size == 3 && ($portfolio_count % 2 == 0) ) ) {
$et_open_row = false; ?>
</div> <!-- end .et_pt_portfolio_row -->
<?php } ?>
<?php if ( ($et_ptemplate_portfolio_size == 2 && $fullwidth && $portfolio_count % 3 == 0) || ($et_ptemplate_portfolio_size == 1 && !$fullwidth && $portfolio_count % 3 == 0) || ($et_ptemplate_portfolio_size == 1 && $fullwidth && $portfolio_count % 5 == 0) ) { ?>
</div> <!-- end .et_pt_portfolio_row -->
<div class="et_pt_portfolio_row clearfix">
<?php $et_open_row = true; ?>
<?php } ?>
<?php $portfolio_count++;
endwhile; ?>
<?php if ( $et_open_row ) {
$et_open_row = false; ?>
</div> <!-- end .et_pt_portfolio_row -->
<?php } ?>
<div class="page-nav clearfix">
<?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
<?php get_template_part('includes/navigation'); ?>
<?php } ?>
</div> <!-- end .entry -->
<?php else : ?>
<?php if ( $et_open_row ) {
$et_open_row = false; ?>
</div> <!-- end .et_pt_portfolio_row -->
<?php } ?>
<?php get_template_part('includes/no-results'); ?>
<?php endif; wp_reset_query(); ?>
<?php if ( $et_open_row ) {
$et_open_row = false; ?>
</div> <!-- end .et_pt_portfolio_row -->
<?php } ?>
</div> <!-- end #et_pt_portfolio_gallery -->
</div> <!-- end .entry -->
</div> <!-- end .single_content -->
<div class="content-bottom"></div>
</div> <!-- end .single_container -->
<?php if (get_option('sky_show_pagescomments') == 'on') comments_template('', true); ?>
Could any php experts please take a look. Thank you so much.
-Heidi

Answer 1

So far, when you click on the magnifying icon, it produces this error:
Error: a is undefined
Source File: http://heidixu.com/wp-content/themes/Sky/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4
Line: 19
It looks like the link (the <a> tag) is not bound to fancybox regardless it has the specified class.
I want to believe that your generated code is not well formed; you have this html:
Zoom in
and wonder if this part specifically
... ]="" rel="gallery[ ....
...is creating the error. I cannot find what part of your php code generates those (misplaced?) brackets.