Jump to content

How to use fancybox?

Recommended Posts


Assuming you are talking about using Fancybox for the front end of your site, then implementing it is as easy as if for a static HTML website.

So, initially, simply follow the instructions on the Fancybox website to install the fancybox files. 

To link this to a PW image field it is pretty much the same as for a static site, but you need to get PW to create a thumbnail - which is easy!


// Create the thumbnail
$thumbnail = $page->image_field_name->size(200,100);

// Add the link for the original image and the Fancybox bits:

echo "<a href='{$page->image_field_name->url}' class='fancybox' rel='group' >";

// Add the thumbnail

echo "<img src='{$thumbnail->url}' >";

// End the link

echo "</a>";


And that is pretty much it. (just typed this out, so watch out for mistakes!)

It gets a little more complicated if you are wanting Fancybox to work on an image inserted into TinyMCE or CKEditor. In that case, assuming you inserted the image and selected "Link to larger version" you need a bit of JQuery to add the facybox class and the rel attribute.

But this is simple for jquery - just add the following to the bottom of your page or in an included javascript file:

$(document).ready(function() {

$('.blog img').closest("a").addClass("fancybox ").attr('rel', 'group');


In the above I have assumed the output of my TinyMCE field is within a div with the class .blog - this is so that I am only applying the jquery where I want it!

The "closest" looks for the closest <a> tag to an <img> tag (and in our case it will be the one wrapped round the image) and then we add the fancybox class and the rel attribute.

Good luck!

Link to post
Share on other sites

Teppo pointed us to this jQuery selector for linking to images only if they are in ProcessWire.


Next I want to point out, if you set a maximum height & width for the image, you always know the maximum image size for the popup image.

  • Like 2
Link to post
Share on other sites
  • 6 months later...

Want to throw one more in. Because the other selector will match if there's an image with a wrapped link to an other format. Say PDF

$("[href^='/site/assets/files/']").filter(function() {
    return this.href.match(/.*[jpg|png|gif]$/i);
  • Like 1
Link to post
Share on other sites
  • 5 months later...

I'm hoping you smart folk can help me out. I cannot for the life of me figure out why fancybox is not working in my PW install - 2.5.2

Here's my head code

<!-- FANCY BOX -->
              <!-- Add jQuery library -->
              <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

              <!-- Add fancyBox -->
              <link rel="stylesheet" href="<?php echo $config->urls->templates?>fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
              <script type="text/javascript" src="<?php echo $config->urls->templates?>fancybox/source/jquery.fancybox.pack.js"></script>

              <!-- END FANCYBOX -->

Template code (I'm pointing to the assets with the method below because I have Amazon S3 module install which changes $file->url to the cloudfront URL, which I don't want for this. 



foreach($page->images as $file) {
  $large = $file->width(500);
  $thumb = $file->width(300);
echo "<a href='../../site/assets/files/$page->id/$large->name' class='fancybox' rel='group' ><img src='../../site/assets/files/$page->id/$thumb->name' ></a>";



And lastly, the footer

<script type="text/javascript">
	$(document).ready(function() {

I'm getting thumbnails but when I click them, it simply goes to the actual url of the file, instead of opening in fancybox.

Any help is greatly appreciated!



Link to post
Share on other sites

What errors are you seeing with Web Inspector and Developer Toolbar?

I googled the error before posting but the only suggestion that I could see was to ensure that jquery was being called first, which it is.


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By formmailer
      I am planning to make my existing site (http://www.zwedenweb.com) responsive, but need some help to get started.
      The first question: modify the existing theme or start from scratch? I figured that starting from scratch is probably best. Am I right there?
      Second: I think I'll go with Zurb's Foundation, but don't really know where to start. Is there a guide or write up how to create a foundation theme in PW? I searched the forums, but didn't find the stuff to get me started.
    • By alec
      Hello comunity! I have made google map info window with image inside. But I have problem with image folders. In MarkupGoogleMap.js i have added code bellow. Now, problem is when I add new image, it goes to another folder, here I have made route to "1023" folder, but PW generate every time new folder for images. So, my route to "1023" folder, works only for some images. Is there solutions for images url?
      // info window         var contentString = '<div class=\"chapter-bubble\">' +                      '<div class=\"chapter-bubble-title\">' + title + '</div>' +                                          '<img width="200" src="/process/site/assets/files/1023/' + map_name + '"/>' +                     '<div class=\"chapter-bubble-number\">' + map_number + "</div>" +                     '<div class=\"chapter-bubble-url\">' + '<a href=\"' + url + '\">Visit Chapter Site</a></div>';       var infowindow = new google.maps.InfoWindow({ content: contentString });  
  • Create New...