Menu icon Foundation
Clearing Lightbox using Font Awesome?

Hi all,

I'm working on a portfolio site, and I'm wanting to know if there's a way to launch Clearing Lightbox image galleries using Font Awesome icons instead of image thumbnails.

The way I have it set up right now, the specific row contains 4 divs, each to launch their own separate galleries (based on the artistic medium). Right now, they simply contain an h3 with the name of the medium, and a related Font Awesome icon below it. Ideally, the entire div would be clickable in order to launch its specific gallery.

Here's the bit of code related to that section:

<!-- Begin Port Row -->
    <div id="port-row" class="row">

        <div class="port-cta large-12 columns">
            <p>Click any of the fancy links below check out my work:</p>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Web Design</h3>
            <i class="fa fa-code"></i>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Graphic Design</h3>
            <i class="fa fa-picture-o"></i>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Illustration</h3>
            <i class="fa fa-pencil"></i>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Photography</h3>
            <i class="fa fa-camera-retro"></i>
        </div>

    </div>
<!-- End Port Row -->

And to help visualize that, here's what that looks like on the page, with styling.

Screen shot 2014 10 15 at 10.43.55 am

I tried a test version earlier using the example code on the Clearing Lightbox page under the "Start From a Featured Image" section. It launched the gallery, but it then continued to display the icon as the thumbnail for the first image it pulled up. In addition, it didn't seem to let me navigate to the other images in the gallery unless they too were images instead of icons. I don't want any icons showing up in the gallery though; using image thumbnails as per the official documentation is how I plan to use it.

So basically what I'm wondering if I can do is:

- Use Font Awesome icons or an entire div to launch a Clearing Lightbox gallery, instead of image thumbnails
- Hide the icon, after the gallery has been launched, and switch focus to another image that isn't tied to that icon
- Still navigate the gallery using image thumbnails, as per the regular documentation

I might be trying to do things in a non-ideal way, or in a way that isn't possible within the current Foundation framework, but there it is. If I can't use icons, I could possibly fall back and use SVGs/PNGs instead, but I'd like to avoid that since I'm already running out of time.

Any suggestions or support would be appreciated, and I can provide additional clarification, if necessary.

Thanks!

clearing lightboxfont awesomeimage gallery

Hi all,

I'm working on a portfolio site, and I'm wanting to know if there's a way to launch Clearing Lightbox image galleries using Font Awesome icons instead of image thumbnails.

The way I have it set up right now, the specific row contains 4 divs, each to launch their own separate galleries (based on the artistic medium). Right now, they simply contain an h3 with the name of the medium, and a related Font Awesome icon below it. Ideally, the entire div would be clickable in order to launch its specific gallery.

Here's the bit of code related to that section:

<!-- Begin Port Row -->
    <div id="port-row" class="row">

        <div class="port-cta large-12 columns">
            <p>Click any of the fancy links below check out my work:</p>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Web Design</h3>
            <i class="fa fa-code"></i>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Graphic Design</h3>
            <i class="fa fa-picture-o"></i>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Illustration</h3>
            <i class="fa fa-pencil"></i>
        </div>

        <div class="port-category medium-6 large-3 columns">
            <h3>Photography</h3>
            <i class="fa fa-camera-retro"></i>
        </div>

    </div>
<!-- End Port Row -->

And to help visualize that, here's what that looks like on the page, with styling.

Screen shot 2014 10 15 at 10.43.55 am

I tried a test version earlier using the example code on the Clearing Lightbox page under the "Start From a Featured Image" section. It launched the gallery, but it then continued to display the icon as the thumbnail for the first image it pulled up. In addition, it didn't seem to let me navigate to the other images in the gallery unless they too were images instead of icons. I don't want any icons showing up in the gallery though; using image thumbnails as per the official documentation is how I plan to use it.

So basically what I'm wondering if I can do is:

- Use Font Awesome icons or an entire div to launch a Clearing Lightbox gallery, instead of image thumbnails
- Hide the icon, after the gallery has been launched, and switch focus to another image that isn't tied to that icon
- Still navigate the gallery using image thumbnails, as per the regular documentation

I might be trying to do things in a non-ideal way, or in a way that isn't possible within the current Foundation framework, but there it is. If I can't use icons, I could possibly fall back and use SVGs/PNGs instead, but I'd like to avoid that since I'm already running out of time.

Any suggestions or support would be appreciated, and I can provide additional clarification, if necessary.

Thanks!

Rafi Benkual almost 5 years ago

Pretty sure I've tried this before. The JS takes the main thumbs that launch the lightbox images and makes it the thumbs below the featured image. You would have to change the JS to accomplish what you are trying to do. Might be easier to do a full screen modal with a thumb gallery or image slider.

Derek Viars almost 5 years ago

That's what I was afraid of...Unfortunately, I really don't know any JS yet, so I won't be able to work around it very well on my own.