I have an "attached files" container in a project I'm working on which shows thumbnail images of files that have been attached to a specific event. When a user clicks a thumbnail, a fancybox window opens up to show them a larger preview of the attached image or text file.

Right now, my solution consists of setting the fancybox type to iframe, like so:

$(".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 searching on google and found this solution, but it doesn't work for me. This simply creates two separate fancybox instances; one for images, and one for iframes. I would like to be able to scroll through all of the attachments in one gallery. Is this possible?

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

I have an "attached files" container in a project I'm working on which shows thumbnail images of files that have been attached to a specific event. When a user clicks a thumbnail, a fancybox window opens up to show them a larger preview of the attached image or text file.

Right now, my solution consists of setting the fancybox type to iframe, like so:

$(".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 searching on google and found this solution, but it doesn't work for me. This simply creates two separate fancybox instances; one for images, and one for iframes. I would like to be able to scroll through all of the attachments in one gallery. Is this possible?

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

• javascript
• jquery
• fancybox

1 Answer 1

You are using fancybox v2.0.6 so other solutions may be obsolete.

To achieve what you want is simple, just do:

1). Load all javascript files in this order:

• jQuery
• Fancybox js file
• Fancybox media js file (you find this within the helpers directory)

2). Load the fancybox css file

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

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 of your images is something like href='/attachments/76' fancybox won't know it is an image because the lack of extension (jpg,png,gif). Add the class fancybox.image to your html like :

<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>

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

External pages via iframe :

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

(notice the second class fancybox.iframe)

Youtube videos :

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

(notice that we don't need to add any additional class since we are using fancybox media helper)

NOTE: we are using the data-fancybox-group="gallery" attribute to set all the elements within the same gallery (you should set a HTML5 DOCTYPE though)

Finally, simply use this script:

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

You may want to add other API options like:

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

If you additionally want to use the buttons or thumbnails helpers don't forget to load the proper js and css files. Also add the helpers options to your script like:

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

LAST NOTE: this is fancybox v2.0.6+