Jquery attribute rel is screwing everything up

Question

This is hopefully my last question, for today :P.

I have 10 .photo divs with different image each one. html code bellow:

<div class="photo"><!-- Start Photo -->
<div class="transparency"></div>
    <div class="performer"><p><? echo $perf; ?></p></div>
    <a href="<?php the_permalink(); ?>" class="jquery" rel="<? echo ''.$perf.''; ?>"><img src="<? echo ''.$pic.''; ?>" width="180" height="135" alt="<? echo ''.get_the_title().''; ?>" style="display:block"/></a>
</div><!-- End Photo -->

This is what my jquery code does: when i hover a photo div, it loads a flash movie. When I hover out of that div, i want the initial photo to be displayed.

Here is my jquery code:

    $(".photo").hoverIntent(function() {
    $(this).html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0" width="100" height="100"><param name="movie" value="http://static.awempire.com/flash/live_feeds/live_feed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="appletroot=http://static.awempire.com/flash/live_feeds/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto" /><embed src="http://static.awempire.com/flash/live_feeds/live_feed.swf" width="100" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" flashvars="appletroot=http://static.awempire.com/flash/live_feeds/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto"&gt;&lt;/embed&gt;&lt;/object&gt;');
}, function() {
    $(this).html('' + $(".jquery").attr("rel") + '');
});

The problem is, the rel does not corespond with each image. I mean, it gets the rel to the immediate .photo div, mixes them, etc... pretty strange

It should work, i should have the rel coresponding to it's own .photodiv. :(

Answer 1

$(".jquery").attr("rel") translates to give me the elements with class jquery and get the rel attribute. But you haven't assigned any class to your images. I would say check the generated HTML content and see if it is right.

Answer 2

$(".jquery").attr("rel") will get the rel attribute from the first element with class "jquery" (out of the entire document). You want to get the rel from the .jquery element in the current block, which would be

$(".jquery", $(this)).attr("rel")

or fully:

$(this).html('' + $(".jquery", $(this)).attr("rel") + '');

Answer 3

Made id work like this:

    $(".photo").hoverIntent(function() {
    $(this).html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0" width="100" height="100"><param name="movie" value="http://static.awempire.com/flash/live_feeds/live_feed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="appletroot=http://static.awempire.com/flash/live_feeds/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto" /><embed src="http://static.awempire.com/flash/live_feeds/live_feed.swf" width="100" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" flashvars="appletroot=http://static.awempire.com/flash/live_feeds/&amp;appletskin=template8/template01.swf&amp;appletcol=900000&amp;psid=ddany23&amp;campaign_id=20520&amp;pstour=t1&amp;psprogram=REVS&amp;site=jsm&amp;flags=137438953473,137438953504,1,32&amp;lp_lang=auto"&gt;&lt;/embed&gt;&lt;/object&gt;');
}, function() {
    $(this).html('' + $(this).attr("title") + '');

});

Gave the photo div a title instead.