Apple slider with jQuery - to work with newer library versions.

Sometimes online you find very nice examples but they are written for large companies where people like to 'show off' their object oriented skills and their prototyping skills. Some sites are complex so it's normal.
I found two examples of this slider, one from apple that is overwriting a lot of functions in their javascript slider, they extended the jQuery almost completely (i.e they extended addClass function???) but maybe at the time they had to do it. Another example I found is jQuery plugin ui-slider.

The problem is that both of them do not work with newer versions (1.3.2, 1.4, 1.4.2), it works with 1.2.6.. Eventually you will have to upgrade.
The reason is that couple of function(s)/method(s) has been rewritten for newer version(s) and it doesn't return the same object(s)/value(s) as before. It's not best explanation, the bottom line it's not working any more.


Here I would like to show the fix or better way to say a simple work around to accomplish the same thing. Also a word about the script, when something is written nicely, there is always chance you can reuse the code and just customize it for your needs.


The nice thing about the script is that it accepts callback functions. That gives you very powerful tool or opportunity to do much more if it's needed.
First, I reused the callback function that author of jquery plugin - ui-slider demo provides.
Second, I used powerful jQuery methods, innerWidth(), outerWidth(), position(), width() etc. to calculate the gallery's position depending how much the slider-handle is moved.

I.E. if lower box is 10px wide and top box is 30px wide, if I move 1px lower box, how much I have to move the top bigger box. you divide 30px by 10px = 3px, so every time you move 1px
bottom box you have to move top box 3px. So that when you reach end of the bottom box, you reach the end of the top box.
It's very simple, but solves the slider, and it works as it should.
Here is the code, I added some comments for extra explanation.

(function() {      
       var container = $('div#slideBlock');
        var ul = $('ul', container);
        
        var p = 0, mltp = 0, k =0, itemsWidth=0;
  
       
 function refreshSwatch() {
      
         itemsWidth = ul.innerWidth() - container.outerWidth();
   p = $(".ui-slider-handle").position();  //slider-handle position
    // itemsWidth = 1993 ; p.left (position max to the left)
    //divide 1993 / 559.7666 = 3.560 (use this number to multiply the p.left, so you can always change the position of gallery )
    mltp = (itemsWidth / $("#slideBlock").width()).toFixed(4);
     //console.log('Debug - mltp: ' + mltp);  //left them for debugging
    k = (p.left * mltp) * -1;  //multiply be negative number to move the galley
    // console.log('Debug: ' + itemsWidth  + '  ;p.left: ' + p.left +' : ;$("#slideBlock").width(): '+ $("#slideBlock").width()  + ' ;k: ' + k);  //left them for debugging
    $("#slideBlock").css('left', k + "px");
};
  
  
  //slider initialization   
  $("#slider").slider({
   orientation: 'horizontal',
   max: 560,
   value: 0,
   min: 0,
   step: 5,
   slide: refreshSwatch,
   change: refreshSwatch
  });
  
 //this bellow if you would like to start at specific line to show specific product/image 
 var pk = 150;   //her it's hard coded, but it could be some dynamic value passed from DB
 $('#slider').slider('value', pk);  //put default value to show specific product to promote (Firefox only)
 $("#slideBlock").css('left', -pk + "px"); //Safari needs it - didn't test in other browsers (this specific customization)
 
})(); 

Here is the demo
Download (zip)