How to use fancybox?

[alec]

Hot to implement fancybox module for images, what do I need to do? 

[Joss]

Hi

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!

<?php

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

<script>
$(document).ready(function() {

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

});
</script>
 

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!

[Martijn Geerts]

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

$('a[href*="/assets/files/"]:has(img)').addClass('fancybox');

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.

[alec]

Thank you very much for this answer. I am new to PW, and I am still exploring this awesome CMF.

[Martijn Geerts]

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);
}).addClass('to-fancy');

[Jonathan]

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. 

<?php

include("./_head.php");

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>";
}

include("./_foot.php");

?>

And lastly, the footer

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

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!

Cheers,

Jono

[Peter Knight]

Happens to me sometimes when I am calling two query scripts or the Fancybox JS isn't loading properly.

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

[Jonathan]

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.

[tpr]

Get rid of all the JavaScript errors you see in the Console before trying to solve the FancyBox issue.