TUTORIAL

Fancybox and Supersize

Fancybox

First of all which image viewer you choose is matter of taste and needs. And sometimes of skills.

Instead of using the LightBox image viewer that came with the theme I decided to go for the “FancyBox for WordPress” plugin as it has the best setting for any option one like. You can tweak almost ever parameter for FancyBox that the jquery library offers. And it simply looks great with the transparent overlay image description, the elastic in and out animation and no borders around the image but a shadow. But as I said before, it’s a matter of taste.

FancyBox also gave me the option to display multiple galleries on one page to handle as separate galleries. Which is helpful when you want your visitor to continue reading before viewing the next set of pictures.

Supersize

While writing this tutorial I’m using background slider on my blog. I tried many different background plugins but I wanted one that gives me options to fix the image at the top of the screen and stretch it to the full browsers size. That is WP-Supersized. It also gives you an option to stop when the image gets to small, which goes together very well with responsive designs.

The only problem is that FancyBox and Supersize doesn’t like each other. When both installed and you open an image to be viewed it only comes up with the name of the image and the close button – no picture at all. After some research I found a solution that worked on first try:

In the file /wp-supersized/includes/WPSupersized.php somewhere around line 55 you will find this one:

 wp_register_script('jquery_animate_enhanced', content_url().
'/plugins/wp-supersized/js/jquery.animate-enhanced.min.js'
,array('jquery'),self::supersized_jquery_animate_enhanced_version);

Delete or comment this line and FancyBox and Supersized become best friends.

Theme Problems

The next problem to fix was that the theme didn’t understand what was going on now with FancyBox and opened two frames everytime you click on an image to view. One frame for LightBox with came with the theme, and another for FancyBox.

To fix this open the custom.js file of the theme at /wp-content/themes/infocus/lib/scripts. You need to use FTP software to access the file. Around line 120 comment this out:

jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto({
overlay_gallery: false, social_tools: '', 'theme': prettyphotoTheme
});

Another problem with the theme was now, that the height of the header is fixed. So when resizing the browser window, the header height stay the same, but the background image height change. I wrote a small script to change that and added it to the themes header.php file, right after the <header> tag.

To implement the code, first look for the newest jquery library and upload it to your site, no matter if the theme also link to its own jquery library later.

<script type='text/javascript' src='http://www.mouseclick.com/wp-content/uploads/jquery/jquery-1.8.3.min.js'></script>

Then add the code in the header.php

<script>
jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame()
{
var w = $(window).width();
var r = parseInt ($(window).width() / 5.94);

$("#header").css( 'height', (w < 768) ? 130 : r);
$("#header").css( 'background-size', (w < 768) ? 768 : w);
}
</script>

Please note that the number 5.94 is the ratio of my background images. The ratio describes the proportions from width to height. This is important as a picture must be resized proportional. You can calculate your ratio by dividing the longer side of the image by the shorter side.

Example: an image size of 1000px width and 500px height gives you a ratio of 2. Now reducing the width by 500px you can’t change the height by 500px. You have to change the height by ratio which is 500px (width) / 2 (ratio) which gives you the new height of the image of 250px. No matter how you resize an image, as long as you do it proportional, the ratio will always be the same.

The script also considers the responsive design of the theme. At a width of smaller than 768px of the browser window, the theme switch to an alternative layout of the header. Because of that the header should not increase more. Otherwise the background image would be too small and the navigation bar outside the background image. Therefore the script stops the height of the header at a width smaller than 768px and set the header fixed to 130px instead, which is calculated by the ratio of the height.

At a smaller width of 768px the script also sets the background image according to the responsive design to a fixed size of 768px in width and stops it from being resized to death.

At least there are two function calls needed: one when the page is loaded the first time. And a second one when the page is been resized.

NextGEN

Just a side note that I’m using NextGEN Gallery instead of the standard WordPress gallery functions. One of the many reasons is that with NextGEN you can easily link the images of the galleries to whatever setting is required to implement almost ANY image viewer you like, no matter what image parameter the viewer need. In this case it’s a placeholder that you have to insert in the effect menu of NextGEN:

class="fancybox" rel="%GALLERY_NAME%"

Now this parameter will be inserted to the source code of all your images that you manage with NextGEN.

AND THATS IT!! I hope you like the tutorial and it is helpful for you.

Cheers,
Alexander

  1. Pilar MartinezPilar Martinez04-14-2013

    Muy bueno. Me gusta mucho el modo en que se expone. Un abrazo!

  2. Woah this blog is wonderful i like studying your posts. Keep up the great paintings! You realize, a lot of persons are searching round for this info, you can help them greatly.

Dein Kommentar

*