Join Steve Harris for an in-depth discussion in this video Creating a lightbox photo gallery, part of Designing a Portfolio Website with Muse.
The portfolio section of our website uses a Slideshow Lightbox widget to display images in a clean interactive format. However, it can also contain other types of content such as videos. Let's just have a quick look at what it looks like on our website. The Light Box widget fades the background out, and images appear in front. Here's how we built it. On a blank page in our Muse site let's make sure we have lots of room to work. If we click on our Slideshow widget panel, and we click on the Lightbox widget and drag it out under canvas, we can begin to work with it.
Next, I'm going to click inside the widget and I'm going to select all of the items included in the Lightbox portion. So if I click and highlight all of these bottom portion--all of the areas that are surrounded by the black--I can click and drag that out of the way. I'm just moving our Lightbox out of the way for now, so we can style that thumbnails. And I'll bring our page down a little bit so we have more room. Next, we'll click into this thumbnail area and we'll drag this up to the top left. I'm just going to size these thumbnails appropriately. We'll size this container out to fit the full width of our screen, and we'll start sizing the thumbnails out just with the sample images included in Muse.
I want them to be in this three column format; that looks good. Now that we have an idea of how our thumbnails are going lay out, I'm actually just going to delete out those two unnecessary images. We don't need those. I'm just going to leave one in for now. So that we can style the Lightbox and we can add our own images in after. To style the Lightbox I'm to going to click into that container and I'm just going to size our main hero image out to fit the full width of our screen; that looks good. If we click inside, we have the ability to actually adjust how an image sits in our hero image.
However, we're not going to adjust that for now, we're going to wait till we add our own images into the widget. Next, I'm going to change some of the options in this widget. Let's click on the, widget Options in the blue arrow to the right and I'm going to turn off our Counter. I'm also going to turn on our Close Button. What this is going to do is close the window when the Lightbox appears. Notice when I turned on the Close Button we didn't see it appear. That's because it's probably partway up the screen. If I scroll up, I can see that my Close Window button appeared at the top, so let's just click on that and move it back down into place.
Next, I'm going to style our Previous and our Next buttons. So, if we just move these on to the left and up on to the right, I'm going to add some images to sit inside these frames. First, I want to turn off Edit Together, because I know that they're both going to use different images. Next, I'll scale this box out a little bigger and we'll add a fill. For our fill image, we're going to use our Arrow_Circle_Right, and click Open.
We can see that image has filled inside this box. I'm also going to click inside and delete the text arrow that Muse has automatically included. Next, I'm going to click into our States dropdown, select our Rollover state and let's change this fill as well. For that fill, I'm going to use Arrow_Circle_Right_Hover. So, this is a little bit of a different arrow that I've created. It's the same size however it just uses different colors. And we also want to change our Fitting on this box. You can see that the arrow is a little bit tight in this box. So, let's just set the Fitting to Scale To Fit, and we'll make sure that setting is applied to our Normal state.
Okay, now that we've got this finished, we'll repeat these steps to the left side. So, scale the box little bit bigger. We'll delete out our text arrow, fill it with our left pointing arrow, select the Rollover state, and fill it with our rollover left arrow, and change our fitting options to Scale To Fit. Lastly, I'm just going to make sure that these two arrows are the same size.
So, I like the look of the arrow on the right a little bit better. If we move up to our Transform dropdown, we can see this arrow is 43 x 44. So, I'll just set these same settings to left-hand side, 43 x 44; that looks good. Now, they're the same size and our guides tell us they're in the same position. Next, we'll move our captions box over a little bit so it's centered underneath our main image. We'll select the text inside and style it with PT Sans--the font we've been using throughout our site--and let's just center this font underneath.
Lastly, we need to style this Close Window button and we're going to do something really basic with this. I'm just going to remove the fill. I'll add a stroke--a nice white stroke should do. We'll set this at about 2 and we're going to add a state. If we click on to the X itself, we'll leave our Normal state set as white. However, we'll set our Rollover state with a different text color. We'll set this color to orange. And lastly, we'll set our Mouse Down state to gray.
Now that that looks good, let's move our Close Window button underneath our main lightbox. Okay, now that we've got this in place, we need add our own images into the Lightbox widget. If we click onto the widget, select the blue arrow beside and click Add Images and select all of the images we've prepared for our portfolio, and click Open. The widget has added them all automatically. However, everything is looking a little bit tight. So what we need to do is we need to move the lightbox down a little bit to get it out of the way.
The first thing I'm going to do is I'm going to scroll up and I'm going to delete out the sample thumbnail that we don't need. Now that that image is deleted we can see a little bit more of our lightbox. However, I'm just going to click into the Lightbox itself, and let's just highlight all of the elements of it. So make sure we've got our left and right arrows, our Close Window button and our caption. It looks like we've selected the thumbnail. So, if we just hold Shift and click on the thumbnails it will deselect those--and let's move this down out of the way. And it looks like we need a little bit more space. So let's drag our page down a little lower.
That's why I said you need a lot of space to work with this widget. Next, we can check the layout of our photos within the lightbox just by clicking the forward and back button. Everything seems to be fitting quite well. I'm happy with this. Lastly, what we need to do is style states on our thumbnails. So if we click on to our thumbnails, we can add some Normal and mouseover states to these. First, we need to make sure that Edit Together is turned on; it's turned off right now. So, anything we did to the first thumbnail wouldn't carry through throughout all the thumbnails. Once we turn this on if we add a Normal state and we set a small drop shadow--let's change our Blur down to about 4 and our Distance to about 3.
So it's just subtle then we can add our mouseover state. I'm going to change this state to Rollover and let's go ahead and remove the shadow. Now that we've added this, let's go ahead and preview the site to see how it looks. Once we're into the preview of our site, we can see that there is this nice shadow below all of the thumbnails and if we mouse over them, the thumbnail goes away which gives the impression that the thumbnail itself is being pushed into the screen. Next, let's click on one of our images and we can see that our lightbox loaded up.
If we mouseover our forward and back buttons, we can see that they scroll nicely through our portfolio. We might need to make some tweaks such as our Close Window button doesn't appear to be centered under the caption, but we can go back and do that in its Design view. Let's just center this button. And now that our button in centered, I'm going to make one more change to the widget. By selecting the widget and selecting the blue Options arrow, we can change the Transition. I'm going to set our Transition to Horizontal which will give us more of a horizontal sliding effect.
If for any reason you need to rearrange the thumbnails in your Lightbox widget, you can do this very easily. Simply click onto any thumbnail and drag it into a different spot. Let's just put this back into the same place we had it originally. We'll preview it, select one of our thumbnails, and try clicking forward. Now, we can see it slides to the left. This is where the transition comes into effect. Using a Lightbox slideshow widget is a great way to display a portfolio or gallery of images.
Simple additions such as custom forward and back buttons can really help you to take this widget beyond its basic styling and make it your own.
- Planning the site with a wireframe
- Creating master pages
- Building and placing graphics from Photoshop, Illustrator, or InDesign
- Creating buttons and button states
- Adding a header, footer, and navigation widget
- Creating a slideshow
- Setting up a contact form
- Publishing to a third-party hosting solution
- Tracking site traffic with Google Analytics