JAVASCRIPT   67

customSlider.js

Guest on 12th September 2021 10:22:55 AM

  1. // JavaScript Document
  2.  
  3. var shiftAmnt = 225;
  4. var counter = 0;
  5. var counters = 0;
  6. var total;
  7. var ramont;
  8. var lamont;
  9. $(document).ready(function(e) {
  10.        
  11.     total = $(".thumbHolder").find('.thumb').length;
  12.        
  13.         ramont = $('.left_Ar').offset().left;
  14.         lamont = $('.rght_Ar').offset().left;
  15.        
  16.        
  17.         $('.left_Ar').hide();
  18.         $('.rght_Ar').hide();
  19.        
  20.        
  21.                
  22.                
  23.        
  24.        
  25.         thumbSlider();
  26.         opneBigimg();
  27.         bigImgSlider();
  28.         BigimgArrow();
  29.         opneBigimgLink();
  30.        
  31.         $(".thumbHolder .thumb").find('a').eq(0).click();
  32.        
  33. });
  34.  
  35.  
  36. function thumbSlider()
  37. {
  38.        
  39.         $(".thumbHolder").width(total*230);
  40.        
  41.         $(".thum_left_Ar").click(function(e) {
  42.         e.preventDefault();
  43.                
  44.                 if(counter<total-4){
  45.                         counter = counter+1;
  46.                         //alert(counnter);
  47.                         }
  48.                         $(".thumbHolder").animate({"left":counter*shiftAmnt*(-1)});
  49.     });
  50.        
  51.         $(".thum_rght_Ar").click(function(e) {
  52.         e.preventDefault();
  53.                
  54.                 if(counter>0){
  55.                         counter = counter-1;
  56.                         }
  57.                         $(".thumbHolder").animate({"left":counter*shiftAmnt*(-1)});
  58.     });
  59.        
  60. }
  61.  
  62. function opneBigimg()
  63. {
  64.         $(".thumbHolder .thumb").find('a').click(function(e) {
  65.                 e.preventDefault();
  66.                
  67.                 var attrNo = $(this).attr('href');
  68.                 attrNo = attrNo+"?nocache"+new Date().getTime();
  69.                 //alert(attrNo)
  70.                 $('#imgUrl').attr('src',attrNo);
  71.                 $('#imgUrl').hide();
  72.                
  73.                 $('#imgUrl').load(function(){
  74.                         $('#imgUrl').fadeIn();
  75.                         });
  76.                        
  77.                 counters = $(this).parent().index();
  78.                 //alert(counters)
  79.                
  80.     });
  81. }
  82.  
  83.  
  84.  
  85.  
  86. function opneBigimgLink()
  87. {
  88.         $(".thumbHolder .thumb").find('a').click(function(e) {
  89.                 e.preventDefault();
  90.                
  91.                 var relLink = $(this).attr('rel');
  92.                 //alert(relLink)
  93.                 $('#linkUrl').attr('href',relLink);
  94.                 //counters = $(this).parent().index();
  95.                 //alert(counters)
  96.                
  97.     });
  98. }
  99.  
  100. $(document).keydown(function(e) {
  101.     switch(e.which) {
  102.         case 37: // left
  103.                 if(counters>0){
  104.                         counters = counters-1;
  105.                         //alert(counters)
  106.                         }else{
  107.                         counters =      total-1;
  108.                         }
  109.                 $(".thumbHolder .thumb").find('a').eq(counters).click();
  110.         break;
  111.  
  112.      
  113.         case 39: // right
  114.                 if(counters<total-1){
  115.                         counters = counters+1;
  116.                         //alert(counters)
  117.                         }else{
  118.                                 counters=0;
  119.                         }
  120.                        
  121.                 $(".thumbHolder .thumb").find('a').eq(counters).click();
  122.         break;
  123.  
  124.      
  125.         default: return; // exit this handler for other keys
  126.     }
  127.     e.preventDefault(); // prevent the default action (scroll / move caret)
  128. });
  129.  
  130.  
  131. function bigImgSlider()
  132. {
  133.         $(".left_Ar").click(function(e){
  134.                 e.preventDefault();
  135.                
  136.                 if(counters<total-1){
  137.                         counters = counters+1;
  138.                         //alert(counters)
  139.                         }else{
  140.                                 counters=0;
  141.                         }
  142.                        
  143.                 $(".thumbHolder .thumb").find('a').eq(counters).click();
  144.                
  145.         });
  146.        
  147.         $(".rght_Ar").click(function(e){
  148.                 e.preventDefault();
  149.  
  150.                 if(counters>0){
  151.                         counters = counters-1;
  152.                         //alert(counters)
  153.                         }else{
  154.                         counters =      total-1;
  155.                         }
  156.                 $(".thumbHolder .thumb").find('a').eq(counters).click();
  157.                
  158.         });
  159. }
  160.  
  161. function BigimgArrow()
  162. {
  163.        
  164.        
  165.        
  166.        
  167.        
  168.         $(document).mousemove(function(e) {
  169.                
  170.                 //console.log( "pageX: " + e.pageX + ", pageY: " + e.pageY );
  171.                
  172.                
  173.                
  174.         //console.log(ramont +" current "+e.pageX);
  175.                
  176.                 if((e.pageX>(lamont-200)) && (e.pageX<(lamont+200)) )
  177.                 {
  178.                         $('.rght_Ar').show();
  179.                 }else{
  180.                         $('.rght_Ar').hide();
  181.                 }
  182.                
  183.                 if((e.pageX>(ramont-200)) && (e.pageX<(ramont+200)) )
  184.                         {
  185.                                 console.log(ramont +" current "+e.pageX);
  186.                                 $('.left_Ar').show();
  187.                         }else{
  188.                                 $('.left_Ar').hide();
  189.                         }
  190.                
  191.                
  192.         });
  193. }

Raw Paste


Login or Register to edit or fork this paste. It's free.