Question

I’m using timthumb to display a full screen gallery slider in a wordpress site. What I want to do is resize that image to fit the viewport of the vistors machine. At the moment the values are static.

I know php can’t detect viewport size, so I assume I need to use jquery.

   var viewport_Width = $(window).width();
   var viewport_Height = $(window).height();

The problem I have is I don’t know how to connect that output to this piece of PHP with static values that tells timthumb how big to make the image:

 <div class="cover"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&amp;h=800&amp;w=1280&amp;zc=1" alt="<?php the_title(); ?>" width="1280" height="800" /></a></div>

Please explain it slowly as i am fairly new to PHP.

Answer 1

Use javascript to remove the height and width attributes of your imgs, and then use CSS to set their width and or height to 100%.

 $('.cover img').each(function(){
    $(this).removeAttr('width')
    $(this).removeAttr('height');
});