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

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!

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>';
}

Related

Ghost post_title from my WP LOOP script

The code below is displaying the title in black text before it displays blue title with hyperlink under it.
I only want the link to appear.
if ( $query2->have_posts() ) {
// The 2nd Loop
while ( $query2->have_posts() ) {
$query2->the_post();
if ($post->ID == $do_not_duplicate)
continue;
$permalink = get_the_permalink($query2->post->ID);
$ID = $post->ID;
$titleAtribute = the_title_attribute();
$title = get_the_title();
echo '<h2 id="post-' .$ID.' ">
<a href="'.$permalink.'" rel="bookmark" title="Permanent Link to '.$permalink.' ">
'.$title.'</a></h2>';
}
// Restore original Post Data
wp_reset_postdata();
}
For example, on my website: http://skkelti.cz/, the following text appears in black above the link with the same text:
-Martin Davídek ml. : „Fanoušci jsou vždy to, co vás žene kupředu“-
Where is this coming from and what do I need to do to stop it from appearing?
The problem is with the_title_attribute(). This is displaying the value directly instead of returning it.
The function accepts echo in $args to specify whether to display or return the value. The default value is true (to display it), so pass false to return the value e.g.:
$titleAtribute = the_title_attribute('echo=0');

next_posts_link() in the same category

I was wondering if it's possible to limit next_posts_link() and previous_posts_link() to a specific category in Wordpress.
I've got a website where I display one post every page. Clicking on next and previous arrow, it goes to next or previous post. However I would like to detect if the next or previous post is in the same category BEFORE loading it and remove prev/next arrow in case the post is not in the same category.
Here my partial code:
<?php if(in_category( '1' )) {
echo '<section class="next_nav">';
next_post_link('%link', '<img src="http://www.mywebsite.it/wp-content/uploads/2014/11/next_post.png">', TRUE);
echo '</section>';
echo '<section class="previous_nav">';
previous_post_link('%link', '<img src="http://www.mywebsite.it/wp-content/uploads/2014/11/previous_post.png">', TRUE);
echo '</section>';
}
else {
echo '';
}
?>
When I click on next button, I get the next post but it's not in the same category. I was wondering if it was possible to use get_next_post() or get_adjacent_post() together with the previous function.
How can I get rid of it ?

link to the other website in "the_title()" of the WordPress page

So i have the single-portfolio.php which present one of my project.
This function makes proper title to my projects every time I choose one.
<h1><?php the_title(); ?></h1>
Now whatever project i choose it always transport me to the Angela...
<h1><?php the_title(); ?></h1>
What i want to do is to have proper link to the proper project in the title.
I figured sth like this but it does not work.
<?php
$f = "http://facebook.com/";
$t = "http://twitter.com/";
$l = "http://linkedin.com/";
if (the_title()=='Facebook') {
Echo "<a href=$f> Facebook</a>";
} elseif (the_title()=='Twitter') {
Echo "<a href=$t> Twitter</a>";
} else {
Echo "<a href=$l> Linkedin</a>";
}
?>
What i get on the page is 3 times written Facebook if its Facebook page or 3 times Twitter e.g:
FacebookFacebookFacebook(the only last one "Facebook" is a link)
The problem is that the_title() echos the title, rather than returning it (as documented in the Codex). That means that, for each of your if conditions, the title gets echoed out.
Try using get_the_title() instead - this returns the post title rather than echoing it.
the_title() is a function that returns the title of the current page/post in wordpress. For the FB/Twitter/LinkedIn portion of your code you should just include "Facebook" instead of using the_title()
Use a custom field in your post to store the link in the post. Call the field "url" for example:
now you can read the field in your template and use it:
<?php $url = get_post_meta( get_the_ID(), "url", true ); ?>
<h1><?php the_title(); ?></h1>

Menu highlight based on url pattern

I have a sidebar menu that is created if a specific tag is found in a category. For example
Apples
Oranges
When clicked, the URL pattern would be as below:
/category/?tag=apples
The code that renders the menu is as below:
<?php if ( $term->slug == 'apples' ) {?>
<section class="item">
<h4><a href="<?php $category_id = get_query_var('cat');
echo get_category_link( $category_id );?>?tag=apples"> Apples</a>
</h4></section>
<?php } if ( $term->slug == 'oranges') {?>
<section class="item">
<h4><a href="<?php $category_id = get_query_var('cat');
echo get_category_link( $category_id );?>?tag=oranges"> Oranges</a>
</h4></section>
<? } ?>
<?php } } ?>
I'm having a difficult time to highlight "Apples" with a red background when that is the active URL pattern, and the same with Oranges having an orange background.
I have tried various Jquery fiddle examples that works perfectly on fiddle, but not when i implement them. Most are for static html pages which is easier to do.
This is probably something you should put in a loop, but an example for your apples section:
<section class="item <?php echo ($term->slug === $_GET('tag')) ? 'active' : '';">
<h4><a href="<?php $category_id = get_query_var('cat');
echo get_category_link( $category_id );?>?tag=apples"> Apples</a>
</h4></section>
Note that I have added an active class to the section element so that you can style that (or its children) differently.
Why not verify the $_GET variable and then highlight the active URL ?
if ($_GET['tag'] == 'apples')
echo ''; //Highlight : ON, with CSS
else
echo ''; //Highlight : OFF
Same goes for "oranges".
Since you tagged it with jQuery, you can solve it on the client side:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" :
decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(function(){
var tag = getParameterByName('tag');
if(tag){
$('h4').filter(function(){
return $(this).text().toLowerCase() === tag;
}).css({ color: 'red' });
}
});
Allthough I suggest you solve it directly on the server using PHP. Just an alternative.

How to get the URL of the current page with the title and post it to Digg?

We have a Joomla site and have purchased a template from Gavick.
I need to change the code which is part of a template we have purchased.
If I hardcode the parameters associated to the Digg button as follows then I am taken to Digg's website submission link form and can add the details.
The current code in the template is as follows:
<?php if($this->template->params->get("icon2", 1) == 1) : ?>
<a href="<?php echo $this->template->params->get("icon2_link", ''); ?>"
class="social_icon" id="social_icon2" target="_blank">Digg</a><?php endif; ?>
What I need to do is get the URL of the current page along with the title and post this to Digg.
Never used Joomla but...
<?php if($this->template->params->get("icon2", 1) == 1) : ?>
<a href="http://digg.com/submit?Url=<?php echo $_SERVER["REQUEST_URI"]?>&title=<?=mainframe->getPageTitle()?>&no_mobile=1"
class="social_icon" id="social_icon2" target="_blank">Digg</a><?php endif; ?>
I don't know variable for title.

Categories