Calling jquery colorbox on dynamic content

[scgroove]

Hello ... I've completed a photo gallery for a client that includes 4 different photo albums that all run the colorbox plugin to generate slide shows (http://www.crucean.com/gallery.php).

I thought the four albums stacked on top of each other looked a little to bulky ... I wanted to make a little javascript player that would advance the four photo albums into a div (id="albums") depending on which button is clicked.

Here's what I have ... it works perfectly ... except now the colorbox plugin doesn't work (http://www.crucean.com/galleryNew.php).

I think this is because the content that I am calling colorbox on, is generated dynamically by the JS code variables (albumCont1, albumCont2, albumCont3 and albumCont4) ... yet, it doesn't seem like that should matter ... HTML is HTML, right? Shouldn't matter how it was generated?

The other possible cause of this may just be the path that colorbox uses to search for <a> tags that have the rel="album#" tags ... right now it is set to:

$("a[rel='album1']").colorbox({transition:"fade"});
$("a[rel='album2']").colorbox({transition:"fade"});
$("a[rel='album3']").colorbox({transition:"fade"});
$("a[rel='album4']").colorbox({transition:"fade"});

Any ideas on how to call my plugin on this dynamically generated content?

Thanks
| sc

[nemrod]

You need to add the elements to the DOM properly for it to work like that.

What you should really do is have it all in the HTML right from the start, however, and just hide the divs with CSS. Upon clicking the buttons you use jQuery to change the CSS of the divs, showing the one corresponding to the button and hiding the others.

[scgroove]

That's a nice bit of info ... I wouldn't have thought to do that. Thanks!

Sweet avatar BTW! The pipe adds a nice air of sohpisitcation.

| sc

[nemrod]

Originally Posted by scgroove

That's a nice bit of info ... I wouldn't have thought to do that. Thanks!

Sweet avatar BTW! The pipe adds a nice air of sohpisitcation.

| sc

No problem (I'd be delighted if you'd click the green (+) by the post by the way ), and thank you Pipe-smoking is quite relaxing and also quite obligatory if you've got a beard, hehe.

[scgroove]

I hear you ... once I grew a beard I was shocked to find a smoking pipe had been sent to me in the mail ... some things just go together.

[nemrod]

Originally Posted by scgroove

I hear you ... once I grew a beard I was shocked to find a smoking pipe had been sent to me in the mail ... some things just go together.

You serious? xD

I'm actually thinking of starting a blog about pipes, I'm still a novice with only about five pipes and six or seven tobaccos, but it's fun to write about.

[scgroove]

Are you still out there? I'm trying to execute your jquery suggestion but my brain no parse the simple or something ...

I think my trouble is in targeting the buttons that will advance my photo galleries ... each button should load the appropriate gallery ... can you look to see how I blew the button targeting? Here's the link ...

http://www.crucean.com/galleryJquery.php

Smoke one for me ...
| scott

[nemrod]

Originally Posted by scgroove

Are you still out there? I'm trying to execute your jquery suggestion but my brain no parse the simple or something ...

I think my trouble is in targeting the buttons that will advance my photo galleries ... each button should load the appropriate gallery ... can you look to see how I blew the button targeting? Here's the link ...

http://www.crucean.com/galleryJquery.php

Smoke one for me ...
| scott

$('.albums input id #butt1_1').click(function(){

should work better if you change it to

$('.albums input#butt1_1').click(function(){

and you have to remove the onclick for the inputs, the method is undefined and will throw an exception

[scgroove]

Still no worky ... hmmmm ... I wonder, is it because I used an id and a class on the same div? As in:

<!-- begin album1 div -->
<div id="gallery1" class="albums">

http://www.crucean.com/galleryJquery.php

Thanks again.
| scott

[nemrod]

Originally Posted by scgroove

Still no worky ... hmmmm ... I wonder, is it because I used an id and a class on the same div? As in:

<!-- begin album1 div -->
<div id="gallery1" class="albums">

http://www.crucean.com/galleryJquery.php

Thanks again.
| scott

You need $(function() { /*code here*/ }); surrounding the code starting at line 48 ending at line 73

[scgroove]

Beautiful ... should have seen that coming. All of my functions should have been nested in the giant mondo function ... thanks for your help!

Now i just want to make it degrade for the non js clowns ... people without javascript should just see the four photo albums the way it was before ... I have a few ideas on how to try this ... more later if I go down in flames ...

[nemrod]

Originally Posted by scgroove

Beautiful ... should have seen that coming. All of my functions should have been nested in the giant mondo function ... thanks for your help!

Now i just want to make it degrade for the non js clowns ... people without javascript should just see the four photo albums the way it was before ... I have a few ideas on how to try this ... more later if I go down in flames ...

Since it's all in the code they will actually show. The hide() methods won't be called on the albums Unless you've hidden them with CSS first

[scgroove]

Okay ... that makes sense ...

I got it now to where jquery hides the four input buttons when javascript is disabled ... pretty cool.

http://www.crucean.com/galleryJquery.php

Do you see any problems with the way i did this?

| sc

[nemrod]

Originally Posted by scgroove

Okay ... that makes sense ...

I got it now to where jquery hides the four input buttons when javascript is disabled ... pretty cool.

http://www.crucean.com/galleryJquery.php

Do you see any problems with the way i did this?

| sc

It's an interesting solution and seems to work, but to separate the JS from the mark-up I would instead use regular CSS to set "display: none" on the div surrounding the buttons and use jQuery at the top of the page to set "display: block" (or .show(), same effect). If the user doesn't have JS they will simply stay hidden, but if they have JS it will show the buttons.