How to target separate dynamic div once Cluetip activates?

Question

I have a catalog of products. When you rollover the thumbnail - description of the product appears in tooltip (Cluetip). I need a shadow to appear around the related image when Cluetip is activated.

For that I created separate div with shadow around image and This is how I target div when Cluetip activates:

onActivate:   function() { $("#shadow").fadeIn(1000); }

But the problem is in my case CMS generates div's IDs dynamically, so they have names like #shadow6, #shadow8, #shadow17, etc.

My question is: How to target specific dynamic div's ID, once Cluetip is activated on it?

jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('.thumbnail').cluetip({
            fx: {
                open: 'fadeIn',
                openSpeed: '2000'
            },

            showTitle: false,
            cursor: 'pointer',
            positionBy: 'auto',
            height: '210px',
            topOffset: 0,
            leftOffset: 20,
            local: true,
            sticky: true,
            mouseOutClose: true,

            onActivate: function () {
                $("#shadow").fadeIn(1000);
            },

            onHide: function () {
                $("#shadow").fadeOut(300);
            }
        });
    });
</script>

HTML/PHP (In the loop)

<div id="shadow{$obj_id}" style="position: absolute; display:none;     
    width:150px; height:190px;"></div>
<div class="thumbnail">
    <img src="/images/product.jpg" />
</div>

ACTUAL CODE

<div id="shadow1"></div>
<a href="/shoe-model-name.html">
    <span class="cm-template-box" template="common_templates/image.tpl" id="te3">
    <img class="cm-template-icon hidden" src="/skins/test/customer/images/icons/layout_edit.gif" width="16"     height="16" alt="" />
    <img class="thumbnail" rel="#popupz1" src="/images/product-tmb.jpg" width="150"     height="180" alt=""  /></span>
 </a>

Answer 1

You should be able to refer to your shadow element using the Attribute Starts With Selector like:

$(this).closest('a').prev('div[id^="shadow"]');

This selects the previous element to the first anchor wrapping the cluetip-triggering .thumbnail (ie $(this) ) in case it a. is a div and b. its id starts with the String "shadow". Based on the markup you have shown this should be working.

ie:

onActivate: function(){
   $(this).closest('a').prev('div[id^="shadow"]').fadeIn(1000);                               
},

onHide: function(){ 
   $(this).closest('a').prev('div[id^="shadow"]').fadeOut(300);                               
}

See this working fiddle with your actual markup.

EDIT : Since you seem to have access to the PHP that generates the markup why don't you just use a class to refer to your shadow elements? In case you would have markup like:

<div id="shadow8" class="cluetip-shadow" style="position: absolute; display:none; width:150px; height:190px;" ></div>

<div class="thumbnail" >
   <img src="/images/product.jpg" />
</div>

You could just do:

$(this).prev('.cluetip-shadow').doSth();

Does not make to much of a difference in your case since it is rather simple, but it can get really helpful when things get bigger and more complex.