the_content: Inline Kind of Works

[Corinne D.]

Hello!

I’m glad I found this plugin. It’s been working better than others I’ve tried but still needs tweaking.

Please visit this page: http://maidenandwhelp.com/shellbcheri

The six images are clickable and what I’d like to see happen is to have the_content from the post show up in fancybox and visitors can cycle through the 6 featured posts. It kind of works cause after clicking through 2 images, it stops. When I click the > button, the close button, the navigation buttons, and the title disappear and I can’t do anything after that. It’s just stuck.

Here’s what I have:

<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">

	<!--<header class="article-header">
		<h1 class="page-title"><?php the_title(); ?></h1>
	</header>-->

	<section class="entry-content cf" itemprop="articleBody">
	<?php the_content(); ?>
	</section>
								
	<section class="entry-content featured">
		<ul class="portfolio clearfix">
			<?php $args = array(
				'cat' => '4',
				'posts_per_page' => -1
			);
			$the_query = new WP_Query( $args ); ?>
			<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
			<li>
				<a class="thumb-link fancybox-inline fancybox image" href="<?php/* echo $thumb_url[0] */?>#inline-<?php echo $post->ID; ?>" rel="bookmark gallery-0" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
				<div class="fancybox-hidden" style="display:none;">
					<div id="inline-<?php echo $post->ID; ?>">
						<?php the_content(); ?>
					</div>
				</div>
			</li>
			<?php endwhile;?>
		</ul>
	</section>

I noticed in FF’s console:
ReferenceError: obj is not defined jquery.fancybox-1.3.7.min.js:30

[RavanH]

Hi Corinne,

First, better use class="thumb-link fancybox-inline" without “fancybox image” in there because those are meant for images not inline content. Then also limit the rel attribute to rel="bookmark".

But sadly, after that, the error will still occur because (I suspect) the rel attribute makes the script assume it is an image gallery and tries to preload the next image. It’s an interesting case and I’ll try to find a fix for the next release.

Please stand by as I’ll probably ask you to test a beta version 🙂

Rolf

[Corinne D.]

Thanks for taking a look! I guess I’ll just use images for now. I shall await word on beta testing!

[RavanH]

OK, if you’re up for testing a new script version then please follow these steps.

1. Open http://plugins.svn.wordpress.org/easy-fancybox/trunk/fancybox/jquery.fancybox-1.3.7.min.js in your browser and select the complete file content;
2. Hit Ctrl+C or right-click and choose Copy to copy the file content to memory;
3. go in your sites WP admin to Plugins > Editor and select Easy FancyBox (not the Pro extension) for editing;
4. find in the Plugin Files list on the right the one called “easy-fancybox/fancybox/jquery.fancybox-1.3.7.min.js” and click to open it;
5. select the complete file content and hit Ctrl+V or right-click and choose Paste to replace it with the new script version content;
6. Click Update File.

Next, clear your browsers cache and reload http://maidenandwhelp.com/shellbcheri/ to see if works.

[Corinne D.]

Gave this new script a try and still didn’t work in both Firefox or Chrome.

[RavanH]

Hi Corinne,

Could you set up a test page like you had before? I would need to see it live to know what is (still) going wrong…

[Author]

Posts