Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Howto make the jQuery fullscreen bg img script work for image.php WordPress

  • SOLVED

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">
<nav>
<h3><?php previous_image_link( false, 'Previous Image' ); ?> | <?php next_image_link( false, 'Next Image' ); ?></h3>
</nav>
</div>

<?php get_footer(); ?>

Answers (3)

2011-02-17

Jens Filipsson answers:

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 <em>header.php</em> file, just before the <em></head></em> tag:

<script>
$(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) {
bgImage.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImage.css({
width: widthdiff+'px',
height: winheight+'px'
});
}

$("#background-image").show();

}
resizeImg();
$(window).resize(function() {
resizeImg();
});



});

</script>

<style>

#background-image{
position:absolute;
top:0;
left:0;
z-index:-10;
overflow: hidden;
width: 100%;
display:none;
}

.content{
height:500px;}

</style>


If you're not including jQuery in your theme, you should also add this to your <em>functions.php</em> file, on the line after the first <em><?php</em>

// Load jQuery
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}


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" />


Matt Taylor comments:

@Jens...
The problem is not making the script function. It works great. I'm looking for the code to make this automatically work for a WP gallery image being displayed in image.php.

Thanks~


Jens Filipsson comments:

Did you see the last part of my post?


Jens Filipsson comments:

<strong>To be clear, here's the last part of my answer:</strong>
<em>
And to solve the dynamic image line, I think that something like this might work:</em>

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


Matt Taylor comments:

No I missed that. :)

It's not displaying anything with that function in place, but does work with a static image. Could my global call be off?


Jens Filipsson comments:

I'm really tired and on my way to bed, its 3 in the morning in Sweden, can't really think :) But try the following. If it doesn't work, I'm sure someone in another timezone can give you a good solution! :)

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

2011-02-17

Denzel Chia answers:

Hi,

<blockquote>
It's not displaying anything with that function in place, but does work with a static image. Could my global call be off?
</blockquote>

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" />


Thanks.

2011-02-17

jonnyjaniero answers:

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