show/hide & modal troubles

Question

Explaining the situation.

In a php page, there is a dynamic generated menu, with any number of items/links, like this:

<ul class="main-portf">
<li><a href="#" class="tabs" rel="1" title="item1" >item1</a></li>
<li><a href="#" class="tabs" rel="10" title="item2" >item2</a></li>
<li><a href="#" class="tabs" rel="10" title="item3" >item3</a></li>
<li><a href="#" class="tabs" rel="10" title="item4" >item4</a></li>
</ul>

Each link in the above menu, shows a different gallery of items. Each gallery can have up to 8 items (for now). Clicking for example in 1st link (rel=1), it will show the following gallery:

<div class="thumbspart" id="tabs-1">
<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

...

</div>

All the galleries are pre-loaded in page and nothing is populated with AJAX calls.

All galleries are inside their containers with id="tab-x", where x equals the rel value of the menu link.

Each gallery item has 3 "lines" of data: image thumb, image title, image description/text.

Both links (in thumb and in title) open a modal with the large image plus some other info. The modal script (similar to lightbox) requires a rel attribute to be present in each link. Based on that rel attribute, it groups and counts all gallery items.

The owner of the website asked for a hover effect on the thumb images. So, when user hovers over an image, the image gets a little faded and a new small image appears on top of it. Clicking on the new image should open the modal.

The Problem

My problem was that the new hover image covers the original one with the attached link. So i thought of adding a new link along with the hovering image with all the needed attributes for the modal script to work.

My final js looks like this:

$(".thumb").mouseenter(function () 
{
    var myurl = $(this).find("a").attr("href");
    var myrel = $(this).find("a").attr("rel");
    var mytitle = $(this).find("a").attr("title");


    var testVat = $(this).parent().parent().attr("id");
    var myVar = testVat.split("-");
    var myID = parseInt(myVar[1]);

    $(this).prepend('<a href="'+myurl+'" class="pozhov" rel="'+myrel+'" title="'+mytitle+'"></a>');
    $(this).find("a.testremove").attr('rel', 'rel-'+myrel); // rename rel to avoid conflict with wrong counter
    showGal(myID);
    $('.pozhov').fadeIn(0);

})
.mouseleave (function () 
{
        var myrel = $(this).find("a.testremove").attr("rel");
        var myVar = myrel.split("-");           
        $(this).find("a.testremove").attr('rel', myVar[1]); // restore rel name to original one             


    $('.pozhov').fadeOut(0).delay(0).queue(function()
    { 
        $(this).remove();           
    });
});

In short terms, when user hovers inside the image:

• get my data from the existing url
• create a new link to enclose the hovering image with similar properties/attributes as original link
• rename old rel attribute to something else, to avoid conflicts with the modal script

And when user hovers out of the image:

• restore old name for the original rel attribute
• remove fake link

This should have worked. But it doesn't. Modal on image will failed to open or it will show wrong counter or it will work only once (it won't be executed after first close of it). The modal on link on image title works perfectly.

Some more js code i use for this page (in case it makes a difference) for you:

// tabs galleries

$(".tabs").click(function () 
{   
    $(".tabs").removeClass("active");

    var myID = $(this).attr("rel");
    $(this).addClass("active");

    //hide all "tabs-xx" divs
    $("div[id^='tabs-']").hide();

    // show the one we want
    $("#tabs-"+myID).fadeIn(1000);
    showGal(myID);

return false;
}); 



// function to fire modal script after show/hide    
function showGal(i)
    {
        $("a[rel^='prettyPhoto[gal"+i+"large]']").prettyPhoto({
            // modal options
        });

        $("a[rel^='prettyPhoto[gal"+i+"small]']").prettyPhoto({
            // modal options
        }); 
    }

In case you are wondering for the core scripts:

• Jquery core 1.7.2
• Modal prettyPhoto script (Lightbox clone)