Howto make the jQuery fullscreen bg img script work for image.php - Wordpress Solution
[Solved] - Howto make the jQuery fullscreen bg img script work for image.php - Wordpress Solution
Try following codes
Can you help me make the [[LINK href="http://papermashup.com/jquery-scalable-fullscreen-background-image/"]]jQuery scalable fullscreen background image script[[/LINK]] work for an image.php call? Below is my current image.php
<?php get_header(); ?>

<img src="---dynamic url of image currently on---" id="background-image"/>
<div class="content">
	<h3><?php previous_image_link( false, 'Previous Image' ); ?> | <?php next_image_link( false, 'Next Image' ); ?></h3>
<?php get_footer(); ?>

Solution - 1

I'm not sure what your problem is, since you haven't provided that much information for us. But, you need to add this to your header.php file, just before the tag:

$(document).ready(function() {

 var bgImage = $('#background-image');		
    function resizeImg() {
      var imgwidth = bgImage.width(),
		   imgheight = bgImage.height(),
		   winwidth = $(window).width(),
		   winheight = $(window).height(),
		   widthratio = winwidth / imgwidth,
		   heightratio = winheight / imgheight,
		   widthdiff = heightratio * imgwidth,
		   heightdiff = widthratio * imgheight;
      if(heightdiff>winheight) {
          width: winwidth+'px',
          height: heightdiff+'px'
      } else {
          width: widthdiff+'px',
          height: winheight+'px'
    $(window).resize(function() {




	overflow: hidden;
    width: 100%;

If you're not including jQuery in your theme, you should also add this to your functions.php file, on the line after the first
	// Load jQuery
	if ( !is_admin() ) {
	   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
And to solve the dynamic image line, I think that something like this might work:
<img src="<?php wp_get_attachment_image_src( $post->ID ); ?>" id="background-image" />

Solution - 2


It's not displaying anything with that function in place, but does work with a static image. Could my global call be off?
Do this to get the global variable, if that helps.

<?php global $post; ?>
<img src="<?php wp_get_attachment_image_src( $post->ID ); ?>" id="background-image" />

Solution - 3

can i ask, is the objective.... when a post or page is selected it displays a different image as the background? if so, i recently did this for a site. doesn't use the image.php at all. the user, when in a post or page, selects/uploads via the wordpress 'featured image' function. its using this jquery plugin http://nanotux.com/blog/fullscreen/ a added background div and some php to grab the featured image if this is indeed what you want to achieve, let me know

Date: 2022-10-21 05:16:49
Category: Wordpress
More for You