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

<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 functions.php file, on the line after the first
	// 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" />


Solution - 2

Hi,

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


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