Category Archives: Javascript

Responsive, Fast Image lightbox with gallery support – Magnific Popup

Responsive, Fast Image lightbox with gallery support – Magnific Popup

The responsive trend has gotten up and beyond being highly popular nowadays. Therefore old tools need to be replaced by the ones which are up to the latest trends.

In time I’ve gone through the following libraries:

Neither of them support responsiveness, so the toolbox need to get updated. Lately I’ve stumbled upon an article on Smashing Magazine which pointed to the new kid in town: Magnific Popup

It didn’t only impress me only with the support of responsiveness, but in fact, with it’s nifty preload capabilities built inside it – you can set it up to preload the next / previous images in the gallery as the user is viewing it. With the modern browser’s capability to load up 6 resources in parallel, it would be sad not to make use of such a feature.

If you’re like me and want to get running really fast, this is a quick recipe to get you going without much fuss:

1. Download the CSS file from here and link to it from your page’s head section:

https://raw.github.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css

<link rel='stylesheet' href='/path/to/magnific-popup.css' type='text/css' media='all' />

2. The Javascript

Load Zepto.js (in case you don’t have / need jQuery already).
Zepto is a lightweight framework which handles most of the things jQuery already does, in case you are not in need of the full-fledged jQuery framework. It’s 3 times smaller when gzipped (10K vs. ~30K for the latest 1.10 jQuery).

<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js" type="text/javascript"></script>

OR

<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>

And then build the Magnific Popup JS using their provided build tool. For the most basic image + gallery support, you only need: image, gallery. (I also add in High-DPI support, Image zoom animation, fast tap for gallery arrows). Copy paste the content in a magnific_popup.min.js file, which you will link to after the zepto/jquery library call.

<script src="path/to/magnific_popup.min.js" type="text/javascript"></script>

And now you only need to trigger the script. Create a new magnific_popup.comp.js file with the following content (download from here):

jQuery(document).ready(function($) {
$.expr[':'].linkingToImage = function(elem, index, match){
return $(elem).is('a') && elem.href && (/\.(gif|jpe?g|png|bmp)$/).test(elem.href);
};

var $imageLinks = $('a:linkingToImage').filter(function() {
return $(this).closest('.pictures').length == 0
}),
$galleries = $('.pictures');

if (typeof $.fn.magnificPopup != 'undefined') {
$galleries.magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,2] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
$imageLinks.magnificPopup({
type: 'image'
});
}
}

A couple of explanation on what it does.

  • it checks for the existance of the magnificPopup script (such that the script doesn’t break the entire JS functionality of your site if you remove the plug-in at some point in time)
  • it creates a new selector which helps in attaching the magnificPopup functionality to all links pointing to images (according to the extension of the files).
  • it starts the gallery mode of magnificPopup on links which are child of a tag with a class of ‘pictures’, adding the previous / next navigation links.
  • the pre-load is activated to pre-load the next 2 images of the currently being viewed one. I find this number to yield the best performance.

Of course you also need to embed this file as well:

<script src="path/to/magnific_popup.comp.js" type="text/javascript"></script>

Enjoy using it!

Read More

How to fix the Twitter blogger.js script and make it work with the oAuth required by the v1.1 API

How to fix the Twitter blogger.js script and make it work with the oAuth required by the v1.1 API

Since the recent deactivation of the v.1 API of Twitter, the highly popular http://twitter.com/javascripts/blogger.js script was left nonfunctional.

There is a straightforward procedure to get it back running again by replacing

<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=screennamegoeshere&include_rts=1&count=1&callback=twitterCallback2"></script>

 

By a call to a .php file that generates the same thing, but while authenticating to the proper twitter application you will be creating.

You would need to mostly follow the steps illustrated here:
http://www.webdevdoor.com/php/authenticating-twitter-feed-timeline-oauth/

In short, here’s how you can get it up and running quickly:

1. Setup a twitter application at https://dev.twitter.com/apps/ (logging in with your own credentials). Save the consumer key & secret and access token & secret.

2. Download the TwitteroAuth library from here. You are only interested in the twitteroauth folder and it’s two files, which you will place next the .php script you are creating.

3. Create a twitterfeed.php file with the content provided in the tutorial, and fill in the variables (twitteruser / number of tweets and all the keys you’ve created at step 1):

You can download my version from here: http://cl.ly/code/1e1C3u2Z1U1c

I’ve only made an adjustment to the json_encode($tweets) part of the script by adding the twitterCallback2 which calls the old blogger script, which lets you use this cross-domain regardless of the server settings.

4. Upload the twitterfeed.php along the twitteroauth with the two files inside next to it to a server running PHP 5+.

5. Replace the old http://api.twitter.com/1/statuses/user_timeline.json call by one pointing to your newly created .php file, like this:

<script type=”text/javascript” src=”http://yourdomain.com/twitterfeed.php”></script>

Read More

Enhance reCaptcha accessibility with disabled images

I’ve encountered an accessibility problem these days… default reCaptcha isn’t properly accessible when the images are disabled.

A solution is to detect the availability of images, and if they are disabled to manually adjust the styling of the problematic elements.
Basically doing this:
reCaptcha made accessible

Now to share how that was accomplished.

1. Uploaded 2 files:

  • blank.gif to the root of the domain
  • captcha-accessiblity-enhancer to the root of the domain (it’s better to store all your JS file in a designated folder, but that is irrelevant for demo purposes)

2. Embeded the JS (before the body closing tag – </body>)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/captcha-accessiblity-enhancer.js" type="text/javascript"></script>

And that’s it. The people with disabled images will be able to properly use the reCaptcha now.

Read More

Internet Explorer & Elements with an ID get a matching global variable in JS

Object doesn't support this property or method

If you’re getting an odd behavior on your scripts in Internet Explorer, try adjusting their name (for example by adjusting their names with a unique prefix) just to make sure that there isn’t any element in the page you’re working on with the same ID as your variable name.

Object doesn't support this property or method

If you want to read a much elaborate explanation, go check out Rick Strahl’s post here: Internet Explorer Global Variable Blow ups, but the above should get you going in no time (and help you avoid some headaches).

Read More

Font resize detection

We all crashed into the problem where a website’s layout gets ruined when zooming in or out the font-size in the browser…

You can read a really good article from ALA giving a nice insight with regards to what approach should you take in the early development phases towards avoiding various zooming problems: http://www.alistapart.com/articles/fontresizing/

Most complex designs don’t allow so much flexibility such that you can make things really scalable via the CSS, so our most used option will probably be a touch of Javascript.
As on most of my projects jQuery is a standard, I chose to use a little jQuery plug-in that does the job of detecting the font-resize event really well:

http://wellstyled.com/en/javascript-onfontresize-jquery-plugin/

Once you caught the event you can do any kind of magic :)

What approaches did you take to solve such situations ?

Read More