hide clicked item

[alienfactory]

I am using fancybox in an unconventional way and it would be cool if i
could hide
the target element after it is clicked and then unhide when exiting
the overlay

I am not very good at javascript and jquery if anyone knows how, or at
least guide me in the right direction and help that would be great.


I think just changing the css visibility to hidden should work. i need
the DOM reference to stay so display none will not work


Thanks
Terry

[alienfactory]

ok i figured out the very basics to do this but does not quit work. it
hide all class names target i tried to use (this) but does not work

also the following code break where the zoom comes in it now comes
from the upper right corner

anybody have any suggestion to target only the item that is clicked on

$(".target").fancybox( {
'zoomSpeedIn': 900,
'zoomSpeedOut': 500,
'easingIn' : 'easeOutCubic',
'easingOut' : 'easeInBack',
'overlayOpacity': 0.5,
'frameHeight': 499,
'frameWidth': 345,
'imageScale': true,
'overlayShow': true,
//'callbackOnStart':function(){ $(".target").hide();
},
'callbackOnClose':function(){ $(".target").show
();

[alienfactory]

ok got a better version that addres the loosing of the reference point
for the callback function.

this keeps the dom element so it can be refered to by fancybox

ut i still need to be able to target on the clicked item by using the $
(this) but id does not work si i had to use #(".target") and as you
would expect it hides all the class items marked target


Some one please help:)

$(".target").fancybox( {
'zoomSpeedIn': 500,
'zoomSpeedOut': 300,

'easingIn' : 'easeOutCubic',
'easingOut' : 'easeInBack',
'overlayOpacity': 0.5,
'frameHeight': 499,
'frameWidth': 345,
'imageScale': true,
'overlayShow': true,

'callbackOnStart':function(){ $(".target").css({'visibility':
'hidden'});
},
'callbackOnClose':function(){ $(".target").css
({'visibility': 'visible'});
}
});

[JFK]

try this:

$(".target").fancybox({
'zoomSpeedIn':500,
'zoomSpeedOut':300,
'easingIn': 'easeOutCubic',
'easingOut': 'easeInBack',
'overlayOpacity': 0.5,
'frameHeight': 499,
'frameWidth': 345,
'imageScale': true,
'overlayShow': true,

'callbackOnStart':function(){$(".target").hide();},

'callbackOnClose':function(){$(".target").show();}

});

you could make a reference to any element with a different class (or
ID) on callbackOnStart and callbackOnClose, i.e. you can hide/show a
specific text or image within your screen

<h1 class='disappear'>I will disappear if you open fancy box</h1>

then
$(".target").fancybox({ //this will open in fancybox
'callbackOnStart':function(){$(".disappear").hide();},
'callbackOnClose':function(){$(".disappear").show();}
});

[alienfactory]

actualy that does not work for my project i have multiple items see
http://www.macpeeps.com/codabooks

the call back does not function correctly here is what should work
//'callbackOnStart':function(){ $("this).hide();
},
this works fine but hides all the classes named target if you see what
i am tring to do you will notice that i only want the item being
clicked to be handled

//'callbackOnStart':function(){ $(".target").hide();
},

here is what i utlimalty got to work almost. this only works after the
first item is clicked then hides only the item being clicked

'callbackOnStart':function(){ $('.target').click(function(){$
(this).css({'visibility': 'hidden'}); });

[JFK]

ok, I didn't get that 'it hides all class name target' and I guess you
just want to hide ONLY the one clicked
if so, try this:

$(".target").fancybox({
'zoomSpeedIn':500, .... etc

// NO callbackOnStart

'callbackOnClose':function(){$(".target").show();}
});

and then on each link:

<a class="target" href="link01" onClick="$(this).hide();"></a>
<a class="target" href="link02" onClick="$(this).hide();"></a>
<a class="target" href="link03" onClick="$(this).hide();"></a>
...etc
it should do the trick

[alienfactory]

SWEEEEEEEEET i got it to work or i should say You got it to work

Now if you have any ideas about the content that is loaded it does not
scale during the animation