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 comment
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 comment
Share on other sites

  • 6 months later...
  • 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 comment
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 comment
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

  • Create New...