API tools faq
paste
Advertisement
Guest User

kinky slider links fix

a guest
Jan 9th, 2012
333
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.60 KB | None | 0 0
raw download clone embed print report
  1. <!-- Module KinkySlider -->
  2. <!-- sorry , i've made a terrible error, it's fixed here -->
  3. <!-- next version of Kinky Slider will be free of this error -->
  4.  
  5. <link href="{$base_dir}modules/kinkyslider/css/style.css" rel="stylesheet" type="text/css" media="all" />
  6.  
  7. <style type="text/css">
  8.  
  9.     #bazingaSliderContainer {
  10.  
  11.         border-color:   #{$kinkyslider_config.borderColor};
  12.         border-width:   {$kinkyslider_config.borderWidth}px;
  13.         border-style:   solid;        
  14.         width:          {$kinkyslider_calculated_image_width}px;
  15.         height:         {$kinkyslider_calculated_image_height}px;
  16.         margin-top:     {$kinkyslider_config.marginTop};
  17.         margin-right:   {$kinkyslider_config.marginRight};
  18.         margin-bottom:  {$kinkyslider_config.marginBottom};
  19.         margin-left:    {$kinkyslider_config.marginLeft};
  20.  
  21.     }
  22.  
  23.     ul#bazingaSliderContent li {
  24.  
  25.         width:          {$kinkyslider_calculated_image_width}px;
  26.         height:         {$kinkyslider_calculated_image_height}px;
  27.  
  28.     }
  29.  
  30.     ul#bazingaSliderContent li .bazingaHeader {
  31.  
  32.         background:     #{$kinkyslider_config.headerBackground};
  33.         bottom:         {$kinkyslider_config.headerMarginBottom}px;
  34.         color:          #{$kinkyslider_config.headerFontColor};
  35.         font-family:    {$kinkyslider_config.headerFont};
  36.         font-size:      {$kinkyslider_config.headerFontSize}px;
  37.         left:           {$kinkyslider_config.headerMarginLeft}px;
  38.         line-height:    {$kinkyslider_config.headerLineHeight}px;
  39.         padding-top:    {$kinkyslider_config.headerPaddingTop}px;
  40.         padding-right:  {$kinkyslider_config.headerPaddingRight}px;
  41.         padding-bottom: {$kinkyslider_config.headerPaddingBottom}px;
  42.         padding-left:   {$kinkyslider_config.headerPaddingLeft}px;
  43.         height:         {$kinkyslider_config.headerHeight}px;
  44.     }
  45.  
  46.     ul#bazingaSliderContent li .bazingaHeader a {
  47.  
  48.         color:          #{$kinkyslider_config.headerFontColor};
  49.     }
  50.  
  51.     ul#bazingaSliderContent li .bazingaPrice {
  52.  
  53.         background:     #{$kinkyslider_config.priceBackground};
  54.         color:          #{$kinkyslider_config.priceFontColor};
  55.         font-family:    {$kinkyslider_config.priceFont};
  56.         font-size:      {$kinkyslider_config.priceFontSize}px;
  57.         line-height:    {$kinkyslider_config.priceLineHeight}px;
  58.         padding-top:    {$kinkyslider_config.pricePaddingTop}px;
  59.         padding-right:  {$kinkyslider_config.pricePaddingRight}px;
  60.         padding-bottom: {$kinkyslider_config.pricePaddingBottom}px;
  61.         padding-left:   {$kinkyslider_config.pricePaddingLeft}px;
  62.         height:         {$kinkyslider_config.headerHeight}px;
  63.  
  64.     }
  65.  
  66.     ul#bazingaSliderContent li .bazingaPrice a {
  67.  
  68.         color:          #{$kinkyslider_config.priceFontColor};
  69.     }
  70.  
  71.     #kinkyTurnLeft {
  72.  
  73.         background:     #{$kinkyslider_config.headerBackground};
  74.         color:          #{$kinkyslider_config.headerFontColor};
  75.         left:           {$kinkyslider_config.headerMarginLeft}px;
  76.  
  77.     }
  78.  
  79.     #kinkyTurnRight {
  80.  
  81.         background:     #{$kinkyslider_config.headerBackground};
  82.         color:          #{$kinkyslider_config.headerFontColor};
  83.         right:          {$kinkyslider_config.headerMarginLeft}px;
  84.  
  85.     }
  86.  
  87. </style>
  88.  
  89. <script type="text/javascript" src="{$base_dir}modules/kinkyslider/js/jquery.transform-0.9.3.min.js" charset="utf-8"></script>
  90. <script type="text/javascript" src="{$base_dir}modules/kinkyslider/js/jquery.timers.js" charset="utf-8"></script>
  91. <script type="text/javascript" src="{$base_dir}modules/kinkyslider/js/preloader.js" charset="utf-8"></script>
  92.  
  93. <div id="bazingaSliderContainer">
  94.  
  95.    
  96.     <div id="kinkyTurnLeft" class="turnSpan"><span>«</span></div>
  97.     <div id="kinkyTurnRight" class="turnSpan"><span>»</span></div>
  98.     <div id="kinkyPreloader"></div>
  99.  
  100.     <ul id="bazingaSliderContent" class="bazingaPreloading" >
  101.         {foreach from=$kinkyslider_data key=myId item=kinkyitem}
  102.  
  103.             {if $kinkyitem.image neq ''}
  104.  
  105.                     <li>
  106.                         <a href="{$kinkyitem.link}">
  107.                         <img src="{$base_dir}{$kinkyitem.image}" class="kinkySliderImage" />
  108.                         </a>
  109.                         <div class="makeRelative">
  110.                         {if $kinkyitem.header neq ''}<div class="bazingaHeader"><a href="{$kinkyitem.link}">{$kinkyitem.header}</a></div>{/if}
  111.                         {if $kinkyitem.price neq ''}<div class="bazingaPrice"><a href="{$kinkyitem.link}">{$kinkyitem.price}</a></div>{/if}
  112.                         </div>
  113.                     </li>
  114.  
  115.             {/if}
  116.  
  117.         {/foreach}
  118.     </ul>
  119. </div>
  120.  
  121. {literal}
  122.  
  123. <script type="text/javascript" charset="utf-8">
  124.  
  125.    
  126.     var bazingaSlideDelay={/literal}{$kinkyslider_config.speed}{literal};
  127.     var bazingaSlideHeight={/literal}{$kinkyslider_calculated_image_height}{literal};
  128.     var bazingaHeaderFromBottom={/literal}{$kinkyslider_config.headerMarginBottom}{literal};
  129.     var headerOutSwingSpeed= {/literal}{$kinkyslider_config.headerOutSwingSpeed}{literal};
  130.     var headerRotateSpeed= {/literal}{$kinkyslider_config.headerRotateSpeed}{literal};
  131.     var priceAppearSpeed= {/literal}{$kinkyslider_config.priceAppearSpeed}{literal};
  132.     var priceDisappearSpeed= {/literal}{$kinkyslider_config.priceDisappearSpeed}{literal};
  133.     var slideChangeSpeed= {/literal}{$kinkyslider_config.slideChangeSpeed}{literal};
  134.  
  135.     var ieHackTranslateX={/literal}{$kinkyslider_config.headerMarginLeft}{literal};
  136.     var ieHackTranslateY=-{/literal}{$kinkyslider_config.headerLineHeight+$kinkyslider_config.headerPaddingTop+$kinkyslider_config.headerPaddingBottom+$kinkyslider_config.headerMarginBottom}{literal};
  137.  
  138.     $(window).load(function(){
  139.  
  140.         if(!$.support.htmlSerialize && !$.support.opacity) {
  141.  
  142.            var internetExplorerDetected='Jesus Christ...';
  143.  
  144.         } else {
  145.  
  146.             var internetExplorerDetected='Thankfully not!';
  147.         }
  148.  
  149.         var elementsContainer=$('ul#bazingaSliderContent');
  150.         var allElements=$('ul#bazingaSliderContent li');
  151.         var elementsCount=allElements.size();
  152.         var kinkySliderImages=$('.kinkySliderImage');
  153.         var kinkyContainerWidth=$('#bazingaSliderContainer').width();
  154.         var kinkyContainerHeight=$('#bazingaSliderContainer').height();
  155.  
  156.  
  157.         var kinkyTurnLeft=$('#kinkyTurnLeft');
  158.         var kinkyTurnRight=$('#kinkyTurnRight');
  159.         var kinkyTurnHeight=kinkyTurnLeft.height();
  160.  
  161.         kinkyTurnLeft.css('top',(kinkyContainerHeight/2)-(kinkyTurnHeight/2));
  162.         kinkyTurnRight.css('top',(kinkyContainerHeight/2)-(kinkyTurnHeight/2));
  163.  
  164.         if (elementsCount<2) { kinkyTurnLeft.hide(); kinkyTurnRight.hide();}
  165.  
  166.        // we'll mark the last element spat out of the array as 'active' :
  167.        // this is the first element from the top - the first one that appears
  168.        // to the user
  170.        allElements.eq(elementsCount-1).addClass('kinkyActive');
  171.        var findActiveSlide;
  172.        var nextSlide;
  173.        var currentSlide;
  175.        currentSlide=elementsCount-1;        
  177.        // place the price tags next to the header
  179.        allElements.each(function(){
  181.            selectHeader=$(this).find('.bazingaHeader');
  182.            selectPriceTag=$(this).find('.bazingaPrice');
  183.            selectedPriceTagWidth=selectPriceTag.width();
  184.            selectedHeaderWidth=selectHeader.width();            
  185.            selectedHeaderHeight=selectHeader.height();            
  186.            selectedHeaderLeft=selectHeader.css('left');
  187.            selectedHeaderPaddingLeft=parseInt(selectHeader.css('padding-left'));
  188.            selectedHeaderPaddingRight=parseInt(selectHeader.css('padding-right'));
  189.            selectedHeaderPaddingLeftAndRight=selectedHeaderPaddingRight+selectedHeaderPaddingRight;
  190.                        
  191.            priceTagLeft=parseInt(selectedHeaderWidth)+parseInt(selectedHeaderLeft)+selectedHeaderPaddingLeftAndRight;
  193.            selectPriceTag.css('left',priceTagLeft+'px');
  194.            selectPriceTag.data('originalPosition', bazingaHeaderFromBottom + 80);
  195.            /*$(this).click(function(){
  197.                checkIfURL=selectHeader.find('a').attr('href');
  198.                if (checkIfURL!='') {
  199.                    window.location.href=checkIfURL;
  200.                }
  201.                
  203.            });*/
  205.        });
  207.        function bazingaAnimateTo(container, slides, slideNumber, nextSlide, headerOutSwingSpeed, headerRotateSpeed, priceAppearSpeed, priceDisappearSpeed, slideChangeSpeed) {
  208.          
  209.            slides.eq(nextSlide).css('z-index','105');
  210.            slides.eq(nextSlide).css('translate',['0','0']);
  212.            slides.eq(slideNumber).find('.bazingaHeader').animate({translate:['0','70']}, headerOutSwingSpeed,'easeInOutBack');
  213.            slides.eq(nextSlide).find('.bazingaHeader').css('opacity','1.0');
  214.            slides.eq(nextSlide).find('.bazingaHeader').css('rotate','0deg');
  216.            if (internetExplorerDetected=='Jesus Christ...') {
  218.                slides.eq(nextSlide).find('.bazingaHeader').css('translate',[ieHackTranslateX,ieHackTranslateY]);
  220.            } else {
  222.                slides.eq(nextSlide).find('.bazingaHeader').css('translate',['0','0']);
  224.            }
  226.            slides.eq(nextSlide).find('.bazingaPrice').css('opacity','0.0');
  227.            slides.eq(nextSlide).find('.bazingaPrice').css('bottom',slides.eq(nextSlide).find('.bazingaPrice').data('originalPosition')+'px');
  229.            slides.eq(slideNumber).css('z-index','110');
  230.            slides.eq(nextSlide).show();
  231.            slides.eq(nextSlide).find('.bazingaHeader').show();
  234.            slides.eq(slideNumber).find('.bazingaHeader').animate({opacity:'0.0'},100);
  235.            slides.eq(nextSlide).find('.bazingaHeader').animate({rotate:'+=720deg'}, headerRotateSpeed, function(){
  237.                    slides.eq(nextSlide).find('.bazingaPrice').animate({opacity:'1.0',bottom:'-=80'}, priceAppearSpeed, 'easeInOutBack');
  239.            });
  241.            slides.eq(slideNumber).find('.bazingaPrice').animate({opacity:'0.0'}, priceDisappearSpeed);
  242.            
  243.            slides.eq(slideNumber).animate({translate:['0',-bazingaSlideHeight-(20*bazingaSlideHeight/100)]}, slideChangeSpeed, 'easeInOutBack',function(){
  245.                $(this).hide();
  247.            });
  249.            
  251.        }
  253.              
  254.        kinkyPreloader('preloadKinkySliderImages', kinkySliderImages, 500, function() {
  256.            elementsContainer.hide();
  257.            elementsContainer.removeClass('bazingaPreloading');
  258.            elementsContainer.fadeIn(500);
  260.            /* we set the current element to the first element from the top - last from the 'real' top */            
  261.                        
  262.            allElements.eq(currentSlide).find('.bazingaPrice').css('bottom',allElements.eq(currentSlide).find('.bazingaPrice').data('originalPosition')+'px');
  263.            allElements.eq(currentSlide).find('.bazingaPrice').animate({opacity:'1.0',bottom:'-=80'},1000,'easeInOutBack');
  265.            
  266.            if (elementsCount>1) {
  267.  
  268.  
  269.                 $(document).everyTime(bazingaSlideDelay,'changeSlide',function(){
  270.  
  271.                     if (!allElements.is(':animated')) {
  272.  
  273.                         bazingaFindCurrentAndNextSlide('next');
  274.  
  275.                         bazingaAnimateTo(elementsContainer, allElements, currentSlide, nextSlide, headerOutSwingSpeed, headerRotateSpeed, priceAppearSpeed, priceDisappearSpeed, slideChangeSpeed);
  276.                         oldCurrentSlide=currentSlide;
  277.                         currentSlide--;
  278.                         if (currentSlide<0) { currentSlide=elementsCount-1 }
  279.                        allElements.eq(oldCurrentSlide).removeClass('kinkyActive');
  280.                        allElements.eq(currentSlide).addClass('kinkyActive');
  281.                    }
  282.  
  283.                });
  284.           }
  285.  
  286.        }); /* kinkyPreloader() */
  287.  
  288.        $('#bazingaSliderContainer').mouseout(function(){
  289.  
  290.            kinkyTurnLeft.css('opacity','0.0');
  291.            kinkyTurnRight.css('opacity','0.0');
  292.        })
  293.  
  294.        kinkyTurnLeft.click(function(){
  295.  
  296.            $(document).stopTime('changeSlide');
  297.  
  298.            if (!allElements.is(':animated')) {
  299.  
  300.                bazingaFindCurrentAndNextSlide('previous');
  301.  
  302.                bazingaAnimateTo(elementsContainer, allElements, currentSlide, nextSlide, headerOutSwingSpeed, headerRotateSpeed, priceAppearSpeed, priceDisappearSpeed, slideChangeSpeed);
  303.                oldCurrentSlide=currentSlide;
  304.                currentSlide++;
  305.                if (currentSlide>elementsCount-1) { currentSlide=0 }
  306.                 allElements.eq(oldCurrentSlide).removeClass('kinkyActive');
  307.                 allElements.eq(currentSlide).addClass('kinkyActive');
  308.             }
  309.  
  310.         });
  311.  
  312.  
  313.         kinkyTurnRight.click(function(){
  314.  
  315.              $(document).stopTime('changeSlide');
  316.  
  317.             if (!allElements.is(':animated')) {
  318.            
  319.                 bazingaFindCurrentAndNextSlide('next');
  320.  
  321.                 bazingaAnimateTo(elementsContainer, allElements, currentSlide, nextSlide, headerOutSwingSpeed, headerRotateSpeed, priceAppearSpeed, priceDisappearSpeed, slideChangeSpeed);
  322.                 oldCurrentSlide=currentSlide;
  323.                 currentSlide--;
  324.                 if (currentSlide<0) { currentSlide=elementsCount-1 }
  325.                allElements.eq(oldCurrentSlide).removeClass('kinkyActive');
  326.                allElements.eq(currentSlide).addClass('kinkyActive');
  327.            }
  328.  
  329.        });
  330.  
  331.  
  332.        function bazingaFindCurrentAndNextSlide(direction) {
  333.  
  334.            findActiveSlide=elementsContainer.find('.kinkyActive');
  335.            currentSlide=findActiveSlide.index();
  336.  
  337.            if (direction=='next') {
  338.  
  339.                tryNextSlide=currentSlide-1;
  340.                if (tryNextSlide<0) { nextSlide=elementsCount-1; } else {nextSlide=tryNextSlide;}
  341.            }
  342.  
  343.            if (direction=='previous') {
  344.                tryPreviousSlide=currentSlide+1;
  345.                if (tryPreviousSlide>elementsCount-1) { nextSlide=0 } else {nextSlide=tryPreviousSlide;}
  346.             }
  347.         }
  348.  
  349.         $('#bazingaSliderContainer').mousemove(function(e){
  350.  
  351.             kinkyPositionX=e.clientX-$(this).offset().left;
  352.             kinkyTurnLeftOpacityDelta=kinkyPositionX/(kinkyContainerWidth/2);
  353.             kinkyTurnRightOpacityDelta=(kinkyPositionX-(kinkyContainerWidth/2))/(kinkyContainerWidth/2);
  354.  
  355.                        
  356.             kinkyTurnLeft.css('opacity',1-kinkyTurnLeftOpacityDelta);
  357.             kinkyTurnRight.css('opacity',kinkyTurnRightOpacityDelta);
  358.            
  359.  
  360.         });
  361.       });
  362.  
  363.  
  364. </script>
  365. {/literal}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!