News

Build a fit guide with the jQuery UI slider plugin

The Sennep team describes how to create a fit guide similar to the one found on Edwin Europe

EDWINMain

The Sennep team describes how to create a fit guide similar to the one found on Edwin Europe

EDWINMain

DOWNLOAD THE CODE FOR THIS TUTORIAL

Set up your HTML

This example fit guide works by loading a bunch of sequential images into the browser with JavaScript. Then when the user moves the slider we show the particular image relevant to the position, so when the slider is all the way to the left we show the first image. For the purposes of this example and brevity we’ll work with the jQuery UI slider plugin, although the Edwin site features a custom slider.

001 <body>
002 <div id="fit-guide">     
003 <div id="images" data-src="images/    {i}.jpg">    
004 <img src="images/1.jpg">    
005 </div>
006 <div id="slider" data-total="7">    
007 </div>    
008 </div>    
009 </body>
010 

Add your images

When the DOM is ready our jQuery loads in the rest of the images. We do this by reading the total data attribute from the #slider <div> element (7) and then adding the image to the page by replacing the data attribute src on the image. For this example our images are stored within ./images/{i}.jpg where {i} is its frame number one to seven.

001 <script>
002 $(function () {
003 var $slider = $('#slider');    
004 var $images = $('#images');    
005 var total = $slider.data('total');    
006 var src = $images.data('src');
007 for (var i = 2; i <= total; i++) {    
008 $('<img />')
009 .prop('src', src.replace('{i}', i))    
010 .hide()    
011 .appendTo($images);    
012 }
013 // ADD STEP3 CODE HERE    
014 });    
015 </script>

Set up your slider

Now we set up the jQuery UI slider instance telling it that its ‘max’ is the total images we got from Step 2. Add an event listener that fires whenever the user drags the slider. Within this listener, hide all the other images and show the one image we want to see using the nth-child CSS selector combined with ui.value.

001 $slider
002 .slider({     
003 min: 1,    
004 max: total,    
005 slide: function (event, ui) {
006 $('img', $images).hide();    
007 $('img:nth-child('+ui.value+')',     $images).show();    
008 }    
009 });

Load images

At the moment our script isn’t that smart as it doesn’t check whether the images are loaded and ready to be shown to the user. In order to solve this we need to track when images are loaded, and only when they are completely loaded allow the user to slide.

Check the loading state

In order to keep track of loading we need to add an integer that is the total number of images loaded (var loaded). Then we add a load event listener to all the images we’ve added via JavaScript and when this fires we increment the loaded integer. Only then when all the images have loaded (is_loading = false) do we allow the user to slide. However, there is still a problem as a user could feasibly try to drag the slider before everything is loaded and get no interaction.

001 $(function () {    
002 var $slider = $('#slider');
003 var $images = $('#images');    
004 var total = $slider.data('total');
005 var src = $images.data('src');    006 var is_loading = true;
007 var loaded = 0;    
008 for (var i = 2; i <= total; i++) {
009 $('<img />')    
010 .prop('src', src.replace('{i}', i))    
011 .hide()        
012 .appendTo($images);
013 }    
014 $('img', $images).on('load', function () {    
015 loaded++;
016 if (loaded == total) {    
017 is_loading = false;
018 }    
019 });
020 $slider    
021 .slider({
022 min: 1,    
023 max: total,
024 slide: function (event, ui) {    
025 if (!is_loading) {
026 $('img', $images).hide();    
027 $('img:nth-child('+ui.value+')',     $images).show(); 
028 }}    
029 });
030 });    

Finishing touches

So lastly we hide the dragger whilst all the images are loading with a new CSS class. It’s also nice to show a progress bar for the loading, so while receiving load events from the images we update the slider to progress. Also, once all the images are loaded and ready to go we should show the dragger again and reset the progress bar.

001 CSS:    
002 #slider.is-loading .ui-slider-    handle {
003 display: none;    
004 }
005 JAVASCRIPT:    
006 $(function () {
007 var $slider = $('#slider');    
008 var $images = $('#images');
009 var total = $slider.data('total');    
010 var src = $images.data('src');
011 var is_loading = true;    
012 var loaded = 0;
×