Pass WP post content to a JQuery plugin (Fancybox) - now with link

Question

I've been struggling with this for days... hopefully this will bring some light into it.

I'm building a portfolio WP. It only displays image thumbnails, with a.video elements that call the fancybox. In the tags, the attributes have the information for the fancybox to load the content. The "href=" is the url of the video to show, the "title=" is the title of the post, etc.

I want to somehow bring the content of the post to the fancybox window and display it as the title (caption under the video).

My approach so far has been to bring the content of the post into the <a> tags and then passing that content into the FBox .js file.

I've brought the post content (the_content) to a custom attribute for <a>, eventid= and also have brought it to INSIDE the tags.

I've got that working: the post content are loaded in the index page both as the "eventid=" attribute and as the text inside the <a> tags.

This is how the Fbox calling element is loaded inside the WP loop in the index.

<a class="thumbnail-frame excerpt-text <?php if($video_url !='' || $embeded_code != '')         : ?>video<?php else: ?>shots<?php endif; ?>"
<?php if($video_url !='' || $embeded_code != '') : ?><?php else: ?>rel="set-<?php    the_ID(); ?>"<?php endif; ?> 
href="<?php if($video_url !='' || $embeded_code != '') : ?>#embed-<?php the_ID(); ?><?php else: ?><?php echo $upload_image_1; ?><?php endif; ?>" 
title="<?php the_title(); ?>" eventid="<?php the_content(); ?>"><span class="post"><?php the_content(); ?></span></a>

However, I'm still having trouble in sending that text into the FBox javascript plugin so that the content is grabbed from the index and loaded in the Fbox.

The most I've done is

 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
 return '<span id="fancybox-title-over">' + jQuery("a.video").html() + '</span>';

That posts the content of the FIRST post only inside the Fbox (it gets the content of the first a.video element it finds).

I've tried with

 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
 return '<span id="fancybox-title-over">' + jQuery(this).html() + '</span>';

But it returns a null or undefined value and it prints it in the Fbox.

I'm stuck, I don't know how to grab the specific text content for each post and bring it into the FBox. I was thinking maybe using a global variable?

I'm a student so I'm clearly super novice, I just really want to surpass this obstacle.

Here's the link to the blog so you understand what I'm talking about.

http://realitynext.heliohost.org/wordpress/

Thanks!

Are you trying to store the entire content of a post within those href and title tags? If so, that's going to get pretty rough. I'd recommend using ajax to query a custom function, then return the post you want and in the success of the ajax, change the content within the fancybox. — Ohgodwhy
that titleFormat function won't work if you don't set the option 'titlePosition': 'over'(check the span ID) ... of course, the title won't be "under" the video. — JFK
@Ohgodwhy the content of the posts is very short, so I thought it would be possible to store that content in the attributes. It is actually loading correctly on the index page! Also, I have been able to show that content as the title of the Fbox when I select $("video.a").attr("eventid") or even $("video.a").html(). The problem there is that it will only bring the content of the first video.a elements it finds (i.e. the <a> for the first post). Where I'm stuck is how to retrieve the content of those attributes for the specific <a> that called Fbox. (this) doesn't seem to work. — jsebcortes
@JFK, I have gotten to display the title under the video on the Fbox popup... so I don't think that's the problem. :) — jsebcortes
I have found a solution for it: I found the line on the fancybox plugin where the "title" field is grabbed by Fancybox. I changed it to grab the attr("caption") instead of the attr("title"). It does what I want to do. I didn't want to meddle with the original plugin code, so I'm not "answering" my question yet, but I got it working at least. — jsebcortes

Michal Trojanowski Michal Trojanowski · Accepted Answer · 2012-10-04T20:24:15

If you want to get all the a.video elements you need the .each() iterator:

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
  var string =  '<span id="fancybox-title-over">';
  jQuery("a.video").each(function() { string = string + $(this).html(); });
return string + '</span>';
}

And if you want only the content of the element that was clicked you need this:

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
  return '<span id="fancybox-title-over">' + jQuery(currentArray[currentIndex]).html() + '</span>';
}

Pass WP post content to a JQuery plugin (Fancybox) - now with link

1 Answers