jquery Archives - Michael Sunarlim

Make Vimeo Lightbox Auto-Closes on Finish Using FancyBox

Michael — Sun, 13 Apr 2014 11:49:15 +0000

FancyBox has been my number one preference when I need to implement a jQuery-based lightbox on any web page I am working on. It is the most customizable and extensible jQuery plugin for this function.

Since version 2.0, it also introduced a concept of ‘helpers’ to reduce the size of the main JS file and also to allow developers to play more with its functionality with less risk of breaking the core functions when they are updated. Below I am going to show a little trick to modify FancyBox’s media helper to allow Vimeo link to auto-close when the video finishes.

Vimeo API

The first step to achieve this is by understanding Vimeo Player JavaScript API and how to enable API calling for the videos. To save your time, there are two items you need to note:

You need to turn on the API using api=1 code and define the player ID ie. player_id=vimeoplayer
Use Froogaloop, a JS mini-library written by Vimeo to communicate with their API. It can be downloaded here.

Modifying Fancybox media helper file

By default, the media helper file from FancyBox does not define the API and player ID. So we need to make minor change with the helpers/jquery.fancybox-media.js:

vimeo : {
    matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
    params  : {
        autoplay      : 1,
        hd            : 1,
        show_title    : 1,
        show_byline   : 1,
        show_portrait : 0,
        fullscreen    : 1,
        api           : 1, // enable Vimeo Player API
        player_id     : 'fancybox-vimeo' // define Player ID
    },
    type : 'iframe',
    url  : '//player.vimeo.com/video/$1'
},

That’s it. You may want to save the helper file to another name, like jquery.fancybox-media.custom.js

Putting them together

First call FancyBox scripts like you usually do, including the customized media helper file and Froogaloop.

Next, let’s try to call FancyBox that auto-closes when the video has finished playing:

Done.

The post Make Vimeo Lightbox Auto-Closes on Finish Using FancyBox appeared first on Michael Sunarlim.

Creating “Sticky” Vertical Menu with jQuery Waypoints

Michael — Mon, 18 Feb 2013 03:32:31 +0000

Before last week, I had thought that making a sticky navigation would require a custom script and take a bit of time. By “sticky” it means an menu or element that is not always on top of the page but then sticks there after you scroll past a certain Y position. That was until I found jQuery Waypoints which makes it very easy to trigger the change in the element’s CSS position value and make it look as it stays on the top of the page.

Unfortunately it is not the end of the challenge. From jQuery Waypoint’s example and other tutorials I found, they only show how to apply it when you have horizontal elements. In my case, I wanted to use it for Bluelounge’s products menu which has vertical orientation and quite long. The way sticky menu works is by changing the CSS position from relative to fixed and our menu’s height is 854px. This means if the viewport is less than that, the bottom area of the menu will not be viewable at all.

View from smaller screen

The idea was to keep the “default behavior” when scrolling past the assigned waypoint but then change the CSS position value when it is near the end of the page, before the footer. With this approach, visitors can scroll through the bottom of the page and see the rest of the menu. Note that our product pages are mostly not too long, so this solution could still be considered. If you have very long pages, then I would not recommend it because your users will have to scroll a lot before they can see the rest of the menu.

When reaching the bottom of the page.

So, how to achieve this? We need to create two waypoints: one at the start of the content (after header) and one at the end of the content (before footer).

The Codes

Here is the simplified version of page HTML structure:

[syntax_prettify linenums=”linenums”]

Cable Management

Sumo

CableBox Mini

CableClip

Desks

StudioDesk

[/syntax_prettify]

And here is the JS code:

[syntax_prettify linenums=”linenums”]
$(‘.productlist’).waypoint({
handler: function(direction) {
$(‘#list-products’).toggleClass(‘sticky-top’); //change position to fixed by adding ‘sticky-top’ class
}
});
$(‘.footer’).waypoint({
offset: $(‘#list-products’).height()+20, //calculate menu’s height and margin before footer
handler: function(direction) {
$(‘#list-products’).toggleClass(‘sticky-top’); //remove ‘sticky-top’ class
$(‘.productlist’).toggleClass(‘sticky-bottom’); //change position to absolute for the wrapper
}
});
[/syntax_prettify]

Finally the simplified CSS code:

[syntax_prettify linenums=”linenums”]
.sticky-top {
position: fixed;
top: 0;
}

.sticky-bottom {
position: absolute;
bottom: 0;
}
[/syntax_prettify]

The Logics

As I have mentioned, Waypoints is really making things easy by allowing you to set your ‘anchors’ within the page. So in line 1 of the JS, when the scroll hits

it will toggle a new class sticky-top for the menu which changes the CSS position to fixed and make it stick to the top of the page.

The harder part is to tell the script that after reaching another waypoint, it has to remove the sticky-top class from the menu and make the menu’s wrapper stick to the end of the page’s content. To do this, we first need to calculate the position of the other waypoint. For this, we have to make use the offset option.

From Waypoints documentation:
Offset
This option determines how far the top of the element must be from the top of the viewport to trigger the callback function.

Since the

is the element that we want to set as the new waypoint, we have to add the offset with the height of the menu by using jQuery’s height() function. I also added an extra 20px because there is 20px bottom margin from the page content to the footer.

Real-life usage

You can see the result on Bluelounge product page. Inside the product page, there are also other scripts running like the tabs and masonry so I have to add additional steps to make all of them work nicely together. But I am not going to the details and will save it for another time.

The technique is not perfect yet, you can probably still notice the page jumps a little. Not to mention a certain minimum height of the viewport is still required, which is half of the menu, so on very small desktop screens this will not work optimally. For now, I am quite happy with this and welcoming any suggestion to improve it further.

Note: New Bluelounge website launched in the beginning of 2015, therefore the result link above is no longer working.

The post Creating “Sticky” Vertical Menu with jQuery Waypoints appeared first on Michael Sunarlim.

CrossSlide

Michael — Sun, 28 Sep 2008 16:42:08 +0000

I really love Slideshow 2! JavaScript class for creating slideshows. It is super easy to use and customize. The only thing I wish it was based on jQuery instead of MooTools.

Well, I just found CrossSlide. I have not actually tested yet, but from the demo it has the basic functions of Slideshow 2! except the navigation bar. The better thing of course because it is based on jQuery, so I am happy to have this option. I am sure over time more feature will be added.

My full support for Tobia Conforto, the creator for this cool jQuery plugin.

The post CrossSlide appeared first on Michael Sunarlim.