Question

I’m trying to get some rollovers working using jQuery. The trouble is that the image source has to be got using some php code.

If I do it inline like this with javascript it works:

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   onmouseover="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,0); ?>'"
   onmouseout="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,1); ?>'"
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" name="roll<?php the_ID(); ?>"/>
</a>

$thumburl variable is the exactly that; url of the particular thumbnail. The thumbgen bit does some size and colour conversions. When together they give me a url of a b&w and colour images that get swapped. I’m using WordPress so I have to use the php rather than just specify the image src because the size and colour conversions are done automatically for the user.

First question, is doing the code inline like this bad?
Second. I’m struggling to write a jQuery function for the rollover because of the php.
I presume it would be like this:

$(document).ready(function() {
   $('.project img').hover(
    funcation(){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';},
    function (){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';});

But I have no idea where to include this:
$thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

can you even combine php and jQuery in one?

Thanks

Answer 1

You can simplify the PHP a bit like this:

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" data-hover="<?php thumbGen($thumburl,300,0,1,0,0); ?>" />
</a>

Then do something like this in jQuery, using that data attribute:

$(function() {
   $('.project img').each(function() { 
     $.data(this, 'orig', this.src); 
   }).hover(function() {
     this.src = $(this).attr('data-hover');
   }, function () { 
     this.src = $.data(this, 'orig');
   });
});

What this does is store the original src for each image using $.data(), then on hover we grab whatever new src attribute is, which we store in data-hover (a data attribute we created), and when hovering out we get that original src and restore it.