0

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?

6
  • Could you share a link to the where this is happening? Also, how are you triggering your js? Nov 15, 2011 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, 2011 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. Nov 15, 2011 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, 2011 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. Nov 15, 2011 at 17:31

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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