Show and hide div from clicking on an image

[jshjohnson]

Hey,

If you go to http://oandg.co.uk.s156312.gridserver.com/#work and select a portfolio item and click ‘More’ you will see an image and a text box with a little ‘i’ in the corner.

I would like to make it so if you clicked the little ‘i’ the text box would disappear and if you clicked it again it would show.

I tried this but it does nothing:

$(‘.rsABlock img.info’).click(function(e) {
e.preventDefault();
$(‘.caption-background’).addClass(‘hidden’);
});

Any ideas?

[CrocoDillon]

Should work: http://jsfiddle.net/gSVfV/

You have some errors though, check your log.

Are you sure you add that click listener after that part of the DOM is loaded?

[CrocoDillon]

You can try to upload that file without compression so you get useful console feedback about that error (line number).

[CrocoDillon]

Ah… you need to attach that click listener after you opened the box and the ‘.rsABlock img.info’ is actually in the DOM. If you can attach a callback to whatever function you use to open the box, that’d be the right place to attach that click listener.

[CrocoDillon]

For example, try to put that function inside this:

$(“.openBoxButton”).click(function() {
$(‘#colorbox’).fadeIn(1200);
$.colorbox();
});

on line 420, right after `$.colorbox();`. That might work… but I’m not sure if it still works after you clicked the ‘next’ arrow.

[CrocoDillon]

Yes, did it work?

[danko]

@CrocoDillon,

I saw your previous post with this code http://jsfiddle.net/gSVfV/ and I want to use this in WordPress post, so, when I click on image to show this div with post content, so I need to have uniqe class for each post and than this code will functionated. So, I can make class of each post like this “post-16” 16 is ID of post, so I need Jquery code something like this

$(function() {
$(‘.rsABlock img.info’ + postID).click(function(e) {
e.preventDefault();
$(‘.caption-background’ + postID).toggleClass(‘hidden’);
});
});

I know that it isnt correct now, but if you can help me..
Thank you!

[CrocoDillon]

@danko,

You don’t really need unique classes for this.

I made a simple demo for you: http://jsfiddle.net/c3rQ2/

Let me know if you need anything else.

[danko]

@CrocoDillon thank you a lot for this code!

I need just more help from you…
I am making this SCREENSHOT
So, I need to click on this thumbnail (wich is wordpress post) and show this box with player and comments, and when click on anything else that box need to close down. So, every box have different content depends on post, I will put it inside POST LOOP. And one more thing, As I made this popUp box the last popUp box in row is outside of window, how to make that the last in row is inside window? If you understand me :) Thank you a lot for help!

[CrocoDillon]

To prevent the popup going outside the window, that’s a little bit too much code for me to work out now as I have little time. I suggest you use some lightbox module instead of some custom jQuery.

For example (I just Googled it, Lightbox 2 only supports images I think): http://fancybox.net/

By the way I don’t know anything about WordPress. Not that much into PHP ;)

[danko]

Thank you a lot! Please check your email, I need something more to ask you if it is not a problem. It is just jquery thing. I am ready to pay if you have some time to help me.

[Author]

Posts