Photo Revealer: How to make image the open.click or close.click

[modrn]

In the demo for ( https://css-tricks.com/examples/RevealingPhotoSlider2/ ) how can I make the Photo itself the open.click or close.click ??

The original:

var $wrap = $('
').append($img).prependTo($this);



var $open = $('More Info >').appendTo($this);



var $close = $('Close').appendTo($info);

Ive tried a multitude of different things to make the photo_slider_img what was being used for open.click and close.click but i cant figure it out?

Can anyone help me.. im sure its simple but im not extremely proficient in js. Mucho Gracias.

[modrn]

Hate to bump after a couple hours but im limited on time for figuring this out or im going to have to go another direction with what im wanting to do.

[Sirlon]

Well i would say

$img.click(function(){



if($img.css("margin-top") == '-150px'){

$this.animate({



width: opts.imgw,



height: (opts.imgh+95),



borderWidth: "10"







}, 600 );







$open.fadeOut();







$wrap.animate({



width: opts.imgw,



height: opts.imgh



}, 600 );







$(".info_area",$this).fadeIn();







$img.animate({



marginTop: "0px",



marginLeft: "0px"



}, 600 );



} else {

$this.animate({



width: opts.orgw,



height: opts.orgh,



borderWidth: "1"



}, 600 );







$open.fadeIn();







$wrap.animate({



width: opts.wrapw,



height: opts.wraph



}, 600 );







$img.animate({



marginTop: "-150px",



marginLeft: "-150px"



}, 600 );







$(".info_area",$this).fadeOut();





}



return false;



});

not testet.

[modrn]

alright ill try it out and get back to you.

[Author]

Posts