Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Anetsberger
Michael Anetsberger
4,681 Points

Create lightbox with additional HTML and CSS content.

I am currently working on my first project using the knowledge I've gained through Team Treehouse. Using HTML, CSS, JavaScript and JQuery.

I am just looking for a nudge in the right direction, not necessarily the exact code but I'm trying to figure out how to make this lightbox with the JSon content.

I'm trying to input text, links, and images into a lightbox. I have a JSon data structure built consisting of 62 objects, I need to input that information into the lightbox, and have the overlay built with HTML and CSS, depending on which object is selected at random via the following script:

var roll = Math.floor(Math.random() * models.length);
     var godName = getGod(roll).name;

function getGod(randGod) {
 for (i = 0; i < models.length; i++) {
     if (roll === i) {
         return models[i];
        }
    }    
}

1 Answer

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

So randGod === roll but you don't need to cycle over the array getGod should only bring back one thing randGod. i is the index that will always be 0 initially. So that function can be just one line. No cycling.

Hope that helps.

Michael Anetsberger
Michael Anetsberger
4,681 Points

That does help, but the main issue I'm having is how to create a lightbox that contains more than just an image. The JQuery lightbox course helped me figure out how to do a gallery but I'm having trouble figuring out how to have a styled lightbox/overlay that fills with different content depending on which JSon object is selected by the randomizer.

I apologize if I'm not putting things in the correct terms as I'm still a novice when it comes to this,

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Instead of using animg element use a div and then append whatever tags you want inside of that and style them however you want.

Michael Anetsberger
Michael Anetsberger
4,681 Points

Andrew Chalkley Thanks for your answers, that helped me quite a bit the <div> format. I was able to get the initial popup overlay working, make it a button and have it create the div with the appropriate JSon data. I'm well on my way now. I have more questions but I will try to figure them out on my own and if I get to my wits end I'll be back to ask you some more. Thank you for the help, much appreciated.