Help With FancyBox

JavaScript
1

Hi Guys,

I just bought a one page template from ThemeForest.net and it has a Project Gallery (Photo Gallery) which uses Fancybox. I tried emailing the developer but they refuse to offer any advice/assistance on this issue.

I’m trying to figure out how to make this so when you click on a thumbnail, it will allow you to look at a group of photos. Anotherwards, each thumbnail has its own “gallery” and not just one image.

The web template is http://www.purmediallc.com/Clients/CENConstruction and you can go down to the Projects section to see what I mean.

I have looked for this info everywhere and seen answers but I’m not a coder and don’t have a clue how to make it work how I need it to.

I’d really appreciate anyone’s help. Thanks so much!

2

Well, the simple thing to do here would be to link to a single image that contains all the images within it—a polyptych, so to speak. (The only shortcoming of that idea might be that this is something you want the client to be able to do via a CMS, perhaps.)

Example:

<div class="frame">	
    <img data-type="mText" src="img/services/01.jpg" class="img-responsive" alt="//" />
    <div class="hover">
        <h5>WolfGang Puck</h5>
        <p>Demolition</p>
        <a href="img/services/01-foursome.jpg" class="btn btn-default fancy" title="WolfGang Puck - Demolition">View</a>
    </div>
</div>
3

Ralph,

Thanks for the quick response!

You guessed it right - this is for a client. I’m more of a web guy and my designer is not available for a while so I’m trying to do this myself lol.

They will have a CMS to work with so for the time being I’m just trying to make it so when they click a thumbnail, they can sort through a bunch of images in that specific gallery.

4

Hm, in that case I’d look at a different script. It’s no big deal to replace what’s there with something else. The question is, what to replace it with? It would help if you could be more specific about what functionality you need—on both ends. For example, what do you mean by “they can sort through”?

5

I suppose the best way would be to use ajax when you click on an image to load a list of image files that you can then pass to the fancybox object. This fiddle shows how the markup would look for adding images to a gallery without them actually being on the page.

6

Okay that’s exactly what I want…but where does that javascript go lol. Remember I’m not a programmer and this template has the file somewhere I’m assuming.