Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    158
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Pausing Jquery Slider

    I am trying to customize a slider I have found online to pause when you `mouseover`and unpause when you `mouseout`. Or give the appearance this is happening.

    The slider is
    Responsive & Immersive jQuery Slider Plugin - Immersive Slider | Free jQuery Plugins

    Great slider. Want to give him credit because I am using his slider and it looks awesome.


    Code:
      <div class="main">
    
          <div class="page_container">
    
            <div id="immersive_slider">
    
              <div class="slide" data-blurred="http://www.codingforums.com/images/bg.png">
    
                <div class="content">
    
                  <h2><a href="page.php" target="_blank">Header</a></h2>
    
                  <p>Text</p>
    
                </div>
    
                <div class="image">
    
                  <a href="page.php" target="_blank">
    
                    <img src="http://www.codingforums.com/images/image.png" alt="Slider 1">
    
                  </a>
    
                </div>
    
              </div>
    
              <div class="slide" data-blurred="http://www.codingforums.com/images/bg.png">
    
                <div class="content">
    
                  <h2><a href="page.php" target="_blank">Header</a></h2>
    
                  <p>Text</p>
    
                </div>
    
                <div class="image">
    
                 <a href="page.php" target="_blank"> <img src="http://www.codingforums.com/images/image.png" alt="Slider 2"></a>
    
                </div>
    
              </div>
    
              <div class="slide" data-blurred="http://www.codingforums.com/images/bg.png">
    
                <div class="content">
    
                  <h2><a href="page.php" target="_blank">Header</a></h2>
    
                  <p>Text</p>
    
                </div>
    
                <div class="image">
    
                  <a href="page.php" target="_blank"><img src="http://www.codingforums.com/images/image.png" alt="Slider 3"></a>
    
                </div>
    
              </div>
              
                        <div class="slide" data-blurred="http://www.codingforums.com/images/bg.png">
                        
                <div class="content">
    
                  <h2><a href="page.php" target="_blank">Header</a></h2>
    
                  <p>Text</p>
    
                </div>
    
                <div class="image">
    
                  <a href="page.php" target="_blank"><img src="http://www.codingforums.com/images/bg.png" alt="Slider 1"></a>
    
                </div>
    
              </div>
              
                                  <div class="slide" data-blurred="http://www.codingforums.com/images/bg.png">
    
                <div class="content">
    
                  <h2><a href="http://www.link.com" target="_blank">Header</a></h2>
    
                  <p>Text</p>
    
                </div>
    
                <div class="image">
    
                  <a href="http://www.link.com" target="_blank"><img src="http://www.codingforums.com/images/image.png" alt="alt tag"></a>
    
                </div>
    
              </div>
    
    
              
    
              <a href="#" class="is-prev">&laquo;</a>
    
              <a href="#" class="is-next">&raquo;</a>
    
            </div>
    
    
      	<script type="text/javascript">
    
      	  $(document).ready( function() {
    
      	    $("#immersive_slider").immersive_slider({
    
      	      container: ".main"
    
      	    });
    
      	  });
    
    
    
        </script>
    Code:
    !function($){
      
      var defaults = {
        animation: "slide",
        slideSelector: ".slide",
        container: ".main",
        cssBlur: false,
        pagination: true,
        loop: true,
        autoStart: 10000
    	};
    	
    	$.fn.swipeEvents = function() {
          return this.each(function() {
    
            var startX,
                startY,
                $this = $(this);
    
            $this.bind('touchstart', touchstart);
    
            function touchstart(event) {
              var touches = event.originalEvent.touches;
              if (touches && touches.length) {
                startX = touches[0].pageX;
                startY = touches[0].pageY;
                $this.bind('touchmove', touchmove);
              }
              event.preventDefault();
            }
    
            function touchmove(event) {
              var touches = event.originalEvent.touches;
              if (touches && touches.length) {
                var deltaX = startX - touches[0].pageX;
                var deltaY = startY - touches[0].pageY;
    
                if (deltaX >= 50) {
                  $this.trigger("swipeLeft");
                }
                if (deltaX <= -50) {
                  $this.trigger("swipeRight");
                }
                if (deltaY >= 50) {
                  $this.trigger("swipeUp");
                }
                if (deltaY <= -50) {
                  $this.trigger("swipeDown");
                }
                if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
                  $this.unbind('touchmove', touchmove);
                }
              }
              event.preventDefault();
            }
    
          });
        };
      
      $.fn.transformSlider = function(settings, pos) {
        var el = $(this)
        switch(settings.animation) {
          case 'slide':
            el.addClass("ease").css({
              "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 
              "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 
              "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 
              "transform": "translate3d(" + pos + "%, 0, 0)"
            });
          break;
          case 'slideUp':
            el.addClass("ease").css({
              "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 
              "-moz-transform": "translate3d(0, " + pos + "%, 0)", 
              "-ms-transform": "translate3d(0, " + pos + "%, 0)", 
              "transform": "translate3d(0, " + pos + "%, 0)"
            });
          break;
          case 'bounce':
            el.addClass("bounce").css({
              "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 
              "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 
              "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 
              "transform": "translate3d(" + pos + "%, 0, 0)"
            });
          break;
          case 'bounceUp':
            el.addClass("bounce").css({
              "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 
              "-moz-transform": "translate3d(0, " + pos + "%, 0)", 
              "-ms-transform": "translate3d(0, " + pos + "%, 0)", 
              "transform": "translate3d(0, " + pos + "%, 0)"
            });
          break;
          case 'fade':
            el.addClass("no-animation").fadeOut("slow", function() {
              el.css({
                "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 
                "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 
                "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 
                "transform": "translate3d(" + pos + "%, 0, 0)"
              }).fadeIn("slow");
            });
            
          break;
        }
      }
      
      $.fn.positionSlides = function(settings, index) {
        var el = $(this);
        if (settings.animation == "slideUp" || settings.animation == "bounceUp") {
          el.css({
            top: (index * 100) + "%"
          });
        }else {
          el.css({
            left: (index * 100) + "%"
          });
        }
      }
      
      
      
      $.fn.immersive_slider = function(options){
        var settings = $.extend({}, defaults, options),
            el = $(this),
            cssblur = "",
            pagination = "";
            
        // Add all the gs sepecific classes  
        el.addClass("immersive_slider")
        el.find(settings.slideSelector).addClass("is-slide");
        
        // Use CSS to blur the first image the plugin found automatically 
        if (settings.cssBlur == true) {
          el.find(".is-slide img:first-child").each(function( index ) {
            var activeclass = ""
            if(index == 0) activeclass = "active"
            var img = $(this);
            
            $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background gs_cssblur " + activeclass + "'>" + img.clone().wrap("<div />").parent().html() + "</div>")
            $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index)
          });
        } else {
          el.find(".is-slide").each(function( index ) {
            var activeclass = ""
            if(index == 0) activeclass = "active"
            var img = "<img src='"+ $(this).data("blurred") +"'>";
            
            $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background " + activeclass + "'>" + img + "</div>")
            $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index)
          });
        }
       
        if(settings.autoStart != 0 || settings.autoStart != false) {
          setInterval(function() {
            el.moveNext();
          }, settings.autoStart);
        }
        
        $(settings.container).find(".is-background").wrapAll( "<div class='is-bg-overflow' />");
        el.find(".is-slide").wrapAll( "<div class='is-overflow' />");
        el.find(".is-slide").each(function( index ) {
          var activeclass = ""
          if(index == 0) activeclass = "active"
          $(this).attr("id","slide_" + (index + 1)).addClass(activeclass)
          $(this).positionSlides(settings, index)
          if(settings.pagination == true) {
            pagination += "<li><a class='is-page " + activeclass + "' href='#slide_" + (index + 1) + "'></a></li>"
          }
        });
        
        $("<ul class='is-pagination'>"+pagination+"</ul>").appendTo(el)
        
        if(settings.pagination == true)  {
          $(".is-pagination li a").click(function (){
            var page_index = $(this).attr("href");
            
            if (!$(this).hasClass("active")) {
              el.moveSlider(settings, page_index)
            }
            return false
          });
        }
       $(".is-next").click(function() {
         el.moveNext();
         return false;
       });
       $(".is-prev").click(function() {
         el.movePrev();
         return false;
       });
       
        
        $.fn.moveSlider = function(settings, page_index) {
          var el = $(this),
              current = el.find(".is-slide.active"),
              next = el.find(".is-slide" + page_index),
              bg_current = $(settings.container).find(".is-background.active"),
              bg_next = $(settings.container).find(".is-background" + page_index + "_bg");
          if(next) {
            current.removeClass("active")
            next.addClass("active")
            
            bg_current.removeClass("active")
            bg_next.addClass("active")
            $(".is-pagination li a" + ".active").removeClass("active");
            $(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active");
          }
          pos = ((page_index.replace('#slide_','') - 1) * 100) * -1;
          el.find(".is-overflow").transformSlider(settings, pos);
          $(settings.container).find(".is-bg-overflow").transformSlider(settings, pos);
        }
        
        $.fn.moveNext = function() {
          var el = $(this),
            total = el.find(settings.slideSelector).length + 1,
            page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1;
          if(page_index_number < total) {
            el.moveSlider(settings, "#slide_" + page_index_number)
          } else {
            if (settings.loop == true ) el.moveSlider(settings, "#slide_1")
          }
        }
        
        $.fn.movePrev = function() {
          var el = $(this),
            total = el.find(settings.slideSelector).length + 1,
            page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1;
          if(page_index_number <= total && page_index_number > 0) {
            el.moveSlider(settings, "#slide_" + page_index_number)
          }else {
            if (settings.loop == true ) el.moveSlider(settings, "#slide_" + (total - 1 ))
          }
        }
        
        el.swipeEvents().bind("swipeRight",  function(){ 
          el.movePrev();
        }).bind("swipeLeft", function(){ 
          el.moveNext(); 
        });
        
      }
      
    }(window.jQuery);

    I've tried a few things as a shot in the dark and had odd results. I tried resetting the default values on mouse in and mouse out states like below. If you set the "autostart" to false (or 0) then it doesn't change slides. When you hovered like this the slide woulddn't change however it would almost 'twitch' back and forth as if it was changing back and forth and obviously had not overwritten the code correctly.

    Code:
       $(".main").mouseover(function() {
               var defaults = {
        animation: "slide",
        slideSelector: ".slide",
        container: ".main",
        cssBlur: false,
        pagination: true,
        loop: true,
        autoStart: false
    	};
         return false;
       });
       $(".main").mouseout(function() {
           var defaults = {
        animation: "slide",
        slideSelector: ".slide",
        container: ".main",
        cssBlur: false,
        pagination: true,
        loop: true,
        autoStart: 10000
    	};
         return false;
       });
    I also tried something similar to the one above where I tried to change the interval directly. With the same results.
    Code:
       $(".main").mouseover(function() {
             setInterval(function() {
            el.moveNext();
          }, 0);
         return false;
       });
       $(".main").mouseout(function() {
          setInterval(function() {
            el.moveNext();
          },10000);
         return false;
       });

    Any ideas of what I can do to make it pause or give it the illusion it is paused when you hover over the slider.

    Thanks


    EDIT: Figured it out. If anyone was curious I had to add if statements on the setInterval chunk of code so it only run once when I would redirect the code back to the top when you were hovered over the slider. I also had to do the same thing for the code that chose what slide was the "active" slide as I didn't the slides would get all wacky.
    Last edited by 7daytheory; 07-31-2014 at 09:15 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •