Develop Reference

ACF content is empty in fancybox

I have ACF set up to be called into a fancybox. It's pulling in the fields (because I can see the hardcoded header information) but nothing from the ACF. I've set the link to call an ID which is then assigned to the section I want to call when clicked.
I expect to click the image and open the fancy box with the ACF image and content displaying in the fancybox. What I get is header fields and no acf content.
I've tried removing the display none from the class.
I tried hard coding a basic a tag calling a p and that seemed to work, but when I put in the ACF information, it breaks.
I also removed all of the php and just hard coded in an image and content, and it works. It just doesn't like the php calling my ACF.
<a href="#popup" data-fancybox>
<img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
</a>
<section id="popup">
<img src="<?php the_field('project_image', get_the_ID()); ?>">
<h3>About</h3>
<p><?php echo $about_content;?></p>
<hr class="hr-left">
<h3>Features</h3>
<p><?php echo $features_content; ?></p>
<a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>
When the image is clicked, a fancy box will open and display the content within the "popup" div. What's happening is that it's opening the lightbox and populating with empty fields.

I was able to resolve this. I didn't have the information operating inside the loop. See solution below:
<?php while ($loop->have_posts()) : $loop->the_post();
$about_content = get_field('about_content');
$features_content = get_field('features_content');
$button_text = get_field('button_text');
?>

Show image change URL without reload the page

How can I click an image, open the image without reloading with php and javascript?
<?php
echo '<li>
<a href="photo.php?id='.$id.'">
<div class="_th_alb">
<img src="image/'.$allbum_photos.'" >
</div></a>
</li>';
?>
with like image

What you want is called a modal.
You can see some examples right here:
http://www.w3schools.com/howto/howto_css_modal_images.asp
To the modifying URL part:
You can use
window.history.pushState('a string or object', 'Title', '?image=as1234da3sdasd');
Hope this helps

jQuery swap and hide div content based on click

Firstly there are 101 questions similar to this one, however still unable to answer this question.
I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane.
My loop for displaying thumbnail images is as follows:
<?php function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
} ?>
<div id="thumb">
<img src="<?php echo getVimeoThumb($id);?>" alt="">
<h4><?php the_sub_field('child_title'); ?></h4>
</div>
My main feature video is displayed as follows:
<div id="feature">
<h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4>
<iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe>
</div> <!-- end of feature Container -->
The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript.
Questions
How can I swap just the ID and text between these two divs.
I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame.
Many thanks

On your thumb, you could put the id on a rel on your div so you can retrieve it easily via jQuery:
`<div id="thumb" rel="your_id">...</div>`
And a $('#thumb').attr('rel') to get it.
Then you can create a JavaScript function that gives you the full URL from the ID and update your iframe src via $('#feature iframe').attr('src','your_url')

Struggling to expand div based on dynamic data from database (comments feature)

I have been struggling with this common social networking feature for quite some time. What I am trying to do is to expand the div to display comments, I'm sure you know what I am talking about.
Each post a user sends is automatically echo'd with an anchor link Comments. As mentioned, when this link is clicked, it will simply expand the div displaying all comments assigned to that thought_id.
Even if there are no comments assigned to the post, I still want the div to expand to display a text field so any user can post a comment, preferably echo this:
<?php
<form action='' method='post' enctype='multipart/form-data'>
<table style='width:850px;'>
<tr>
<td><textarea name='msg' rows='2' maxlength='255' cols='80' placeholder=' add your comment...'></textarea></td>
<td><input type='submit' name='send' value='Share'/> </td>
</tr>
</table>
</form>
?>
Here is what I have so far:
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
And here is where the comments anchor link is found. Since it is quite lengthy, I have reduced the echo's content to only the relevant code:
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
Other Infomation:
$thought_id is the id of the though the user posts. (table user_thoughts, column id).
I have another table called user_comments, which stores all comments and links it to the thought it is assigned to by post_id.
At the moment, nothing happens when I click comments.

First, here is a working example of what you want to achieve based on your code.
I had to strip the php part off because jsfiddle doesn't interpret it, so next is your code including the PHP bit.
I assumed that you have jQuery loaded as you added the jquery tag to the question.
It's complicated to know why what you tried doesn't work because we're missing important bit such as: how do you load your content into the DOM? dynamically or not (ajax?)
HTML/PHP
<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
<a href="#" class="toggle-comment" data-id="<?=$thought_id?>" style='padding-left: 5px;'> Comments (<?=$num_of_comments?>) </a>
</div>
<div id='toggleComment<?=$thought_id?>' class='new_comment' style='display:none;'>
<br/> <?=$comment_posted_by?> said: <?=$comment_body?>
</div>
</div>
</div>
Your link was missing an href attribute, which is mandatory for it to be displayed properly. So we set it to the commonly used "#" which means blank anchor. We will then need to catch the click event on this link and prevent its default action so we don't see that ugly # in our url
You should avoid storing big chunks of html in a php var and then echo it but use html templates instead.
You should avoid mixing PHP and javascript like this line in your code that assign a php var into a js one var id = <?php echo $thought_id; ?>;
Instead, You can store your thought_ids as a data attribute of your links and easily fetch them using jQuery's data() later.
Javascript
$(function() {
$("a.toggle-comment").on("click", function(event) {
// prevents browser to go to href's #
event.preventDefault();
// uses Jquery's data() function to get comment id from link's data-id attribute
var id = $(this).data('id');
// get element by id and toggle display
var ele = document.getElementById("toggleComment" + id);
$(ele).toggle();
});
});
Here I got rid of your toggle() function and replaced it with a handler function using jQuery's on() that get called each time we click on a link that has the toggle-comment CSS class. It has the advantage of working on dynamically added content after the page is loaded. jQuery's on() documentation page does a great job explaining this (and the deprecated live() page too)
Notice that you will need to add this toggle-comment class to every of your Comments (X) links
If you are new to jQuery, you should consider reading this page to understand what the first line does and why you need it. (referring to enclosing your code into $(function() {...});)
event.preventDefault(); tells the browser to not perform its default behaviour when clicking on the link (which is go to that link and would append # to the address bar)
$(this).data('id'); reads put the clicked link (this) into a jQuery object and use data() to get the value of its data-id attribute, which is set to $thought_id
CSS issue update
See my updated fiddle for your CSS issue, I removed the float inline styles and positioned div.mini_nav using absolute positioning relative to message_wrapper.
I think that this issue is not related to the original question and should be asked in another one.

PHP Code as per OP's
<?php
$thought_id = 1;
$num_of_comments = 10;
$comment_posted_by = "Me";
$comment_body = "test comment body";
//hard coded above vars to achieve assumptions
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a href='' onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
?>
JavaScript
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
return false;
}
</script>
The above code worked for me, as per single record.
Now as you have tagged your question under jQuery
you could simply use
$(".message_wrapper .mini_nav a[href!='']").click(function() {
$(this).parent().next().toggle();
});

You could simply use the <details> HTML tag which acts as a disclosure triangle.
<details>
<summary>View comments</summary>
<ul>
<li>You comments</li>
<li>You comments</li>
<li>You comments</li>
</ul>
</details>
https://developer.mozilla.org/en/docs/Web/HTML/Element/details
The only issue is that it is not supported by the lovely IE browsers.

If I understand your question correctly , this is what you are looking for
https://jsfiddle.net/vrqsz3ev/7/
<div class='message_wrapper'>
<div class="main-msg-container">
<div class='where_msg_displayed'>
<input type="hidden" id="msg-id" value="1">
<div class='more_options'>
MESSAGE1
</div>
<div class='mini_nav'>
<button class="open-comment">comments</button>
</div>
</div>
<div class="hide-mess-details">
<div class='where_details_displayed'>
<div id='toggleComment1'class='new_comment msg-id-1'>
sachin said: Hii guysss (cmt of msg 1)
</div>
<form action='' class="comment-form"method='post' enctype='multipart/form-data'>
<textarea name='msg' placeholder=' add your comment...'></textarea>
<input type='submit' name='send' value='Share'/>
</form>
</div>
</div>
</div>
I made it using jQuery
Some of the things to note while looking into the code is
Uses the concept of flexbox in css3 to style it.
if you click on the share button only the comment of the respective message gets updated . For checking I added a message id along with the form when comment button is clicked .for checking purpose I added an alert (message id of the respective messages) if you click the share button
Now you can add your messages under .where_msg_displayed using php
display all the comments under .where_details_displayed (if you want to , you can add details under there respective messages -little edit is needed)
If you are continuing with this code , with little edits you can achieve the above requirements .

href onclick javascript right click

I have a function in JavaScript something like
function continents(post_id,continent,countries){
location.href="/serv/continent.php?param="+post_id+"&"+continent+"/"+countries;
}
and then I have a anchor tag in my php page
<a href="javascript: void(0)" onclick="continents('<?php echo $row['sno']; ?>','<?php echo $url_con_name; ?>','<?php echo $url_contries; ?>')" >
<div>some date here </div>
</a>
Now the link is working fine but when I right click on that link I don't find open link in new tab and open link in new window.
How can I solve this without removing the function.

There is no href attribute in your a tag, therefore there is no link to open.
The fix is to put a proper URL in your href attribute.
Since you are using jQuery, you likely shouldn't be using onclick attributes anyways.
Do something like this:
<a href="http://example.com/proper/link" id="myLink">
Then attach the JS logic via jQuery:
$('#myLink').click(function(e){
e.preventDefault()
// this will prevent the link from loading the
// href value upon click, but still leave it
// accessible to right-click contextual menu.
the rest of your JS logic here...
})

Add href="#" and onclick event has return false;
Try
<a href="#" onclick="continents('<?php echo $row['sno']; ?>','<?php echo $url_con_name; ?>','<?php echo $url_contries; ?>'); return false;" >
<div>some date here </div></a>