Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I have single.php rendered within Fancybox. For the purpose of resizing an image within single.php I am obtaining the image height in javascript using:

var contentheight = jQuery('.postimage').height();

The first load of single.php within Fancybox successfully populates the "contentheight" variable and I am able to resize the image as per my needs. However, when I use Fancybox's left/right navigation buttons to navigate to next post, the "contentheight" variable never gets populated. Any ideas on what could be causing this erratic behavior?

share|improve this question
Could you share a link to the where this is happening? Also, how are you triggering your js? – Johannes Pille Nov 15 '11 at 1:36
@JohannesPille I am working with a local install. I don't quite understand when you say: triggering your js. I have all js files loaded using wp_enqueue_script() in the header. I have a page template that has link to single.php with class defined for Fancybox. Clicking the link loads single.php in Fancybox. Both the page template and single.php call the header using <?php get_header(); ?> as normally done. – John Nov 15 '11 at 14:46
Triggering: If you just include a js function in a page nothing is going to happen at all. Something has to make that function run at a given time. I assume you're using either the javascript load event or the jQuery .ready() method. I am also assuming that either triggers correctly on the first load, but not when navigating to the next post's content. I am sure it's a trivial solution, but your question is (almost) impossible to answer as long as the behavior can not be observed anywhere and you're sharing just one line of code. – Johannes Pille Nov 15 '11 at 15:32
@JohannesPille Thx for the reply. Well after some digging around this appears to be caused because of the browser caching the image. I came up with a simple solution to retrieve the image height using PHP getimagesize() and printing it as the ID of the image. Later, in JS I used: var contentheight = jQuery('.fluidimage').attr('id'); to retrieve the height and perform the necessary action. Btw, initially I was calling the desired function within jQuery(document).ready(function(). Again, Thx for the help. – John Nov 15 '11 at 17:18
Good find and good for you that you figured it out! Did you know that you may answer your own question (and accept it also)? Will help others with the same question, make for one fewer unanswered question on the site and make you'll gain some rep as an aside. – Johannes Pille Nov 15 '11 at 17:31
show 1 more comment

1 Answer

up vote 1 down vote accepted

Finally I came up with the solution to retrieve the image height using PHP getimagesize() and printing it as the ID of the image. Later, in JS I used: var contentheight = jQuery('.fluidimage').attr('id'); to retrieve the height and perform the necessary action.

Here's the PHP code:

<?php
$imageurl = $pathtoimage;
$image_size = getimagesize($imageurl);
$image_height = $image_size[1];
// For image width, use $image_width = $image_size[0];
?>

<img id="<?php echo $image_height; ?>" class="fluidimage" src="<?php echo $imageurl; ?>" />

Here's JS code to transfer the image height to JS variable, which you use in your own function within the JS:

var contentheight = jQuery('.fluidimage').attr('id');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.