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
List Cat
  Howto make the jQuery fullscreen bg img script work for image.php - Wordpress Solution Wordpress
  Howto display plugin update info on plugin settings page? - Wordpress Solution Wordpress
  No implementation found for method showToast on channel PonnamKarthik/fluttertoast Code Example whatever
  https://docs.djangoproject.com/en/2.0/howto/static-files/ Code Example python
  howto+add+header+bar+laravel+app Code Example php
  php howto ignore file with BOM Code Example php
  php howto Code Example php
  php PDO howto columns from table Code Example php
  javascript howto get xhr Code Example javascript
  howto include the single quotes in html Code Example html


 

Horje © 2022