Showing two colorbox windows side by side...or within one main frame?

Question

I have a site that I've created for some fellow musicians to learn new songs. Generally we have a link to a Youtube video of a song then a link that opens up the tab (chords, lyrics, etc) for the song. Right now I have links that open those things up individually in colorboxes. Works fine.

What I'd like to do is have one colorbox, or frame, or iframe, etc -- that opens up and in the left side I have the Youtube video and on the right side the tab colorbox ... so as I listen to the song I can scroll down at the same time and look at the tab. Here is a link to the site: http://practice.3cnorth.com/?q=all-songs

Thanks for any ideas.

ER

typologist · Answer

One simple approach would be to just create a content type that includes both items. For instance, "songs". Then, you could:

Embed each youtube video within their corresponding tabs node. 
Then, you could use a module such as Display Suite to display one next to each other (E.g. video on the left column and tabs on the right column).
After this, if you want the tabs to be "scrollable", just set a fixed height in CSS and a "scrolled" overflow. E.g.

.views-field-body pre {
    height: 300px;
    overflow-y: scroll;
}

That should do the trick, the colorbox will open one node, instead of 2 as currently.

Showing two colorbox windows side by side...or within one main frame?

One Answer

Add your own answers!

Ask a Question