Fancybox - combining images and frames in one gallery

Question

I have a container of attachments in a project that I'm working on, which displays thumbnails of files attached to a specific event. When the user clicks the thumbnail, the fancybox window opens to show them an enlarged view of the attached image or text file.

My solution at present is to set up a fancybox type on an iframe, for example:

$(".fancybox_group").fancybox({ type : 'iframe' }); 

This will display both text files and images just fine, but the images have this giant white border around them. I did some google searches and found this solution , but this does not work for me. It just creates two separate instances of fancybox; one for images and one for frames. I would like to be able to scroll through all attachments in one gallery. Is it possible?

Here is a jsfiddle example showing what I'm trying to achieve. I borrowed the code / images from the fancybox example and added another thumbnail to the text document. This is how I created it in my project. Any insight would be appreciated.

Answer 1

You are using fancybox v2.0.6 so other solutions can be deprecated.

To achieve what you want, simply, simply do:

1). Download all javascript files in the following order:

• JQuery
• Fancybox js file
• Js fancybox media js file (you'll find this in the helpers directory)

2). Download fssbox css file

3). Set html for each type of object you want to open in fancybox, for example:

Images:

 <a class="fancybox" data-fancybox-group="gallery" href="image01.jpg"><img src="image01thumb.jpg" alt="" /></a> <a class="fancybox" data-fancybox-group="gallery" href="image02.jpg"><img src="image02thumb.jpg" alt="" /></a> 

If the href your images is something like href='/attachments/76' , fancybox will not know that it is image , because there is no extension (jpg, png, gif). Add the fancybox.image class to your html, for example:

 <a class="fancybox fancybox.image" data-fancybox-group="gallery" href="/attachments/76"><img src="thumb76.jpg" alt="" /></a> 

Ajax content (html or txt files):

 <a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.html">open ajax 1</a> <a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.txt">open ajax 2</a> 

(note the second class fancybox.ajax ... also, you can use thumbnails instead of text in my example)

External pages via iframe:

 <a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://domain.com/page.html">open page in iframe mode</a> <a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://other.com/page2.html">open other page in iframe mode</a> 

(pay attention to the second class fancybox.iframe )

Youtube video:

 <a class="fancybox" data-fancybox-group="gallery" href="http://www.youtube.com/watch?v=2matH4B9bTo">open youtube video</a> 

(note that we do not need to add an additional class, since we use the fancybox media helper)

NOTE : we use the data-fancybox-group="gallery" attribute to set all the items in one gallery (you should set HTML5 DOCTYPE though)

Finally, just use this script:

 $(".fancybox").fancybox(); 

You can add other API parameters, for example:

 $(".fancybox").fancybox({ // other API options padding: 0 // optional etc. }); 

If you also want to use buttons or thumbnails helpers, be sure to download the corresponding js and css files. Also add helpers options to your script like:

 $(".fancybox").fancybox( helpers : { buttons : {}, thumbs : { width : 50, height : 50 } } }); 

LAST NOTE : this is fancybox v2.0.6 +