I'm trying to hide a div if user scrolls down & show it if user scrolls up.
Here's my code,
<div class="baseNav">
# some data
</div>
$(document).ready(function() {
var senseSpeed = 2,
prevScroll = 0;
$(window).scroll(function(e) {
var o = $(this).scrollTop();
var nav = $(".baseNav");
o - senseSpeed > prevScroll ? nav.filter(":not(:animated)").slideUp() : o + senseSpeed < prevScroll ? nav.filter(":not(:animated)").slideDown() : $(window).scrollTop() && nav.filter(":not(:animated)").slideDown(), prevScroll = o
})
});
When user smoothly scrolls down it hides the div, also when user smoothly scrolls up it shows it.
Problem is, in case user scrolls down and then very suddenly scrolls up it doesn't show the div. So, I think it would be a better idea to show the div (in any case) when user (or cursor) is within 100px range from the top.
How can we do that?
by default make the element visible via css
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > 100){
$('.elem').hide();
}
else{
$('.elem').show();
}
});
You can show and hide the div using the inbuilt fadeout and fadedin option of javascript and jQuery.
Please try the below one.
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
The below div will get faded out on scrolling.
<div class="fade">
Scroll down i will become invisible
</div>
</div>
I've been searching on many posts but almost all of them are confusing.
I'm working with animate.css into a which is at the middle of my page.
For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).
Please, don't say about JS Reveal, i'd like to use the animation from animate.css
What i was trying:
HTML
<!-- Others div above -->
<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->
JS
function Animar() {
setTimeout(function(){
document.getElementById("sf-medida").style.visibility = "visible";
$("#titulo-general").addClass("animated fadeInLeft");
$(".sub-titulo").addClass("animated bounceInRight");
$(".titulo-izquierda").addClass("animated swing");
$(".texto-1").addClass("animated fadeIn");
$(".texto-2").addClass("animated fadeIn");
},1000)
}
But it doesn't work, however, i've tried adding
window.addEventListener("scroll", Animar);
But what it does is that the animation is played whenever i scroll on the page,
This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference
$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
if( v1 > v2 ){
console.log('in');
$('.box').addClass('animated flip')
}
});
});
So as per your request, let me try to explain the code line by line
$(document).ready(function(){
This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.
$(document).scroll(function(evt){
This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.
var v1 = $(this).scrollTop();
This code will get the amount of scrolling user had done in pixels.
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.
$('.box').addClass('animated flip')
Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.
I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code
<div class="wow fadeIn">content</div>
Here, take a look: http://mynameismatthieu.com/WOW/docs.html
Here's an example using Jquery.
In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)
The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)
fiddle
note, the video won't load on stack so be sure to view the fiddle
https://jsfiddle.net/Hastig/xszu6b1p/
I scraped it together from these two answers..
Youtube Autoplay
Ladyload Images
$(window).scroll(function() {
$.each($('iframe'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
body {
margin: 0;
}
.filler {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
/* css tricks - responsive iframe video */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: flex;
justify-content: center;
background-color: red;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
<iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>
I have purchased a template for my shopify store that scrolls a site wide absolutely positioned background image at a slower speed than what the user scrolls for a neato perspective effect.
I have found the script used in the template that animated the scrolling effect for the background image. It is as follows:
<script type="text/javascript">
(function($) {
if(device.desktop()){
// PARALLAX INIT
$(window).bind('scroll',function(e){
parallaxScroll1();
});
function parallaxScroll1(){
var scrolled = $(window).scrollTop();
$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.75))+'px');
}
// SMOOTHSCROLL 4 WEBKIT
var platform = navigator.platform.toLowerCase();
if (platform.indexOf('win') == 0 || platform.indexOf('linux') == 0) {
if ($.browser.webkit) {
/* jquery.simplr.smoothscroll - https://github.com/simov/simplr-smoothscroll */
;(function(e){"use strict";e.srSmoothscroll=function(t){var n=e.extend({step:85,speed:600,ease:"linear"},t||{});var r=e(window),i=e(document),s=0,o=n.step,u=n.speed,a=r.height(),f=navigator.userAgent.indexOf("AppleWebKit")!==-1?e("body"):e("html"),l=false;e("body").mousewheel(function(e,t){l=true;if(t<0)s=s+a>=i.height()?s:s+=o;else s=s<=0?0:s-=o;f.stop().animate({scrollTop:s},u,n.ease,function(){l=false});return false});r.on("resize",function(e){a=r.height()}).on("scroll",function(e){if(!l)s=r.scrollTop()})}})(jQuery);
/* jquery.mousewheel - https://github.com/jquery/jquery-mousewheel */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
$.srSmoothscroll({
step: 55,
speed: 100,
ease: 'swing'
});
}
};
};
})(jQuery);
</script>
The issue that I am having is that the scrolling effect moves to quickly, and by the time the user has reached the bottom of the page they are viewing, the background image has prematurely cut off.
I have been fidling around with the values in this script, trying to slow down the effect, with no success. Any insights?
Thanks! You can view this script in action on our site at:
http://ts8276eb.myshopify.com/
the password is: yandasmusic
That code is way too complicated for me to even consider trying to debug.
So I made a much simpler version.
var wrapper = document.getElementById('wrapper'),
checkbox = document.getElementById('scrolleffect');
function parallax() {
if( checkbox.checked) {
wrapper.style.backgroundPosition = "center " + (this.scrollTop / (this.scrollHeight - window.innerHeight) * 100) + "%";
}
else {
wrapper.style.backgroundPosition = "";
}
}
document.body.onscroll = function() {parallax.call(document.body);};
document.documentElement.onscroll = function() {parallax.call(document.documentElement);};
#wrapper {
background: #333 url('http://cdn.shopify.com/s/files/1/0810/2125/t/21/assets/body_bg_img.png?677044079657970527') no-repeat scroll center top;
color: white;
padding: 8px;
}
.spacer {
height: 800px;
}
body {
margin: 0;
}
<div id="wrapper">
<p>Content!</p>
<p style="position: fixed;"><label><input type="checkbox" id="scrolleffect" /> Toggle background scroll effect</label></p>
<div class="spacer"></div>
<p>More content!</p>
<div class="spacer"></div>
<p>Content ends</p>
</div>
The important part here is that the background position is updated according to how far down the page we've scrolled. It ranges from center 0% to center 100%. The convenient thing about background image positioning is that 0% means "align top of image with top of element", and 100% means "align bottom of image with bottom of element". Values are interpolated in-between, so 25% would be "align the top quarter mark of the image with the top quarter mark of the element".
Much simpler.
The numbers appear to be crunched here:
$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.75))+'px');
So it currently scrolls 25% slower than the page. If you lower this number, it will go more slowly...
$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.25))+'px');
I have a Content Editor Web Part where I am using scrolling Javascript to display text. I need to query my news section with all its articles while maintaining the scrolling. I know I can hard code the links, but I would like to not have to enter a new link every time a manager adds news. Is it possible to do this? Or on the other end, is it possible to edit the Content Query Web Part to scroll vertically?
Thanks.
My Javascript is:
<style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid white;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<h4>Your scroller contents</h4>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
The output of the Content By Query Web Part can be modified by editing some XSLT, so you should be able to add the required div's and classes to make it autoscroll with your javascript function.
http://msdn.microsoft.com/en-us/library/bb447557.aspx
I'm building an auto-rotating image-carousel with jquery and I'm trying to get the images to rotate infinitely rather than when it reaches the last image, it 'rewinds' back to the first image and starts again. Unfortunately, I'm rather new at the jquery game, so I'm having some trouble getting this to work. I've tried piecing together code I've found in tutorials online and modifying it to fit my code, but no luck. I think I might have to clone the existing images to appear after they cycle through, but I'm not sure what direction to go in. Any assistance is greatly appreciated. Here's the code I'm working with below:
HTML:
<div class="main_view">
<div style="width:165px; height:98px; margin:0; padding:0; border:0;">
<img src="/content/template_images/wanalogo-blackBG-165x98.png" />
</div>
<div class="window">
<ul class="image_reel">
<li><img src="/content/template_images/Banners/SideBanner/imgscroll1.jpg" alt="Phillies" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll2.jpg" alt="Eagles" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll3.jpg" alt="Flyers" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll4.jpg" alt="76ers" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll8.jpg" alt="NCAA Basketball" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll5.jpg" alt="Concerts" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll6.jpg" alt="Theatre" /></li>
<li><img src="/content/template_images/Banners/SideBanner/imgscroll7.jpg" alt="Family Events" /></li>
</ul>
</div>
<div style="width:170px; height:290px; border:0; padding:0; margin: -290px 0px 0px 0px;">
<img src="/content/template_images/black-fade-border-170x290.png" />
</div>
<div class="botTextBox">
<center>
<div class="botText">
Phillies</p>
<p>Eagles</p>
<p>Flyers</p>
<p>76ers</p>
<p>NCAA Basketball</p>
<p>Concert</p>
<p>Theatre</p>
<p>Family Event</p>
</div>
</center>
</div>
<div class="paging">
1
2
3
4
5
6
7
8
</div>
</div>
Javascript
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 750 );
$(".botText").animate({
left: -image_reelPosition
}, 750 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 1500); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
Edit- CSS:
.main_view {
float: left;
overflow:hidden;
position: relative;
width:170px;
height:475px;
background-color:black;
border:0;
margin:2px;
padding:2px 0px 2px 0px;
text-align:center;
}
.window {
height:290px; width:170px;
overflow: hidden;
position: relative;
background-color:black;
border:0;
padding:0px;
margin:0px;
}
.image_reel {
position: absolute;
top: 0; left: 0;
margin-left:-40px;
}
.image_reel img {float: left;}
.botTextBox {
height:87px; width:1360px;
overflow:hidden;
position:relative;
background:url(/content/template_images/black-side-bottom-170x87.png) no-repeat;
margin:0px;
padding:0px;
}
.botText {
position:relative;
top:0; left:0;
margin:32px 0px 0px 0px;
padding:0;
text-align:center;
}
.botText p {width:170px; float: left;}
.paging {
position: absolute;
bottom: 40px; right: -7000px;
width: 178px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
...actually you can see the flash banner on the right that i'm trying to replace with a jquery one...
Once again, I really appreciate any help with this. Like I said, I'm kinda new at working with jQuery and I've been stumbling over this all day. Thanks a million.
The problem with your carousel is that the block of images remains one giant block, so when you get to the end, you must slide all the way back to the first image to loop, and this is what causes that "rewind" look.
What I would do instead is:
Load each image into an array
Remove all but the first image from the gallery.
Add the next image (in an array next with looping is number % length)
Animate slider to show next image
Reset CSS and remove the now invisible first image
Rinse and repeat.
Below is an example implementation with a recursive function.
I create a slider function that makes use of jQuery's .animate(). In the call back of .animate() I call the slider function again after a brief pause casued by setTimeout().
The example below is quite simple, you can adjust it easily to for example show the slivers of the previous and next image and other things.... This is just to illustrate a simple implementation of an infinite slide with a limited number of images.
I added in a simple implementation of how to show a changing caption under the gallery. The information for the caption is taken from the images HTML codes. This caption could also be placed under each image and slid along with the image.
jsFiddle example
$(function() {
var showing = 0; // which image is showing
var imgs = []; // array to hold images HTML
// Put image elements into an array
imgs = $("#gallery img").toArray();
var numberOf = imgs.length;
// Remove all but first image from DOM
$("#slider").html("");
$("#slider").html(imgs[0]);
// Add title text div
$("#gallery").after('<a id="title"/>');
// The recursive slider function
var nextImage = function() {
// Add next image (only use increment once!)
$("#slider").append(imgs[++showing % numberOf]);
// Show image title
$("#title").html($(imgs[showing % numberOf]).attr("title"));
// Link to original
$("#title").attr("href", $(imgs[showing % numberOf]).attr("src"));
// Animate the slider
$("#slider").animate({
left: '-=200'
}, 2000, function() {
// Remove image to the left
$("#slider img:first").remove();
// Reset CSS
$("#slider").css("left", "0px");
// Call animationg function again
setTimeout(function() {nextImage(); }, 1000);
});
}
nextImage(); // Call next image for the first time
});
The static HTML would consist of:
<div id="gallery">
<div id="slider">
... the images here ...
</div>
</div>
PS: to see the conveyor belt effect at work look at this.
jQuery and JS methods and properties used:
.animate()
.append()
.css()
:first selector
.html()
.length
.remove()
setTimeout()
.toArray()
Peter Ajtai has a nice summary of one method, but I have another one which only requires adding a few lines to your script.
Basically it clones the first image, text and pager link and adds it to the end. When the animation ends on the last image (which is now actually the first), the left positioning of the window is reset to zero and the animation resumes. I tried to add comments with [NEW] so you can more easily find the changes. And, I made a demo so hopefully it will be clear.
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
// [NEW] add one, since we are adding the first image to the end
var imageSum = $(".image_reel img").size() + 1;
var imageReelWidth = imageWidth * imageSum;
// [NEW] included modifying width of botTextBox
$(".image_reel, .botTextBox").css({'width' : imageReelWidth });
// [NEW] clone first image & text and add it to the end, include dummy paging
$(".image_reel li:first").clone().appendTo( $(".image_reel") );
$(".botText a:first").clone().appendTo( $(".botText") );
$(".paging").append(''); // don't include the number in the link
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
// [NEW] Slider Animation
$(".image_reel, .botText").animate({
left: -image_reelPosition
}, 750, function(){
// [NEW] callback function (called when animation is done)
if (triggerID == imageSum - 1) {
// if we're back to the first image, reset the window position
$(".image_reel, .botText").css('left',0);
}
});
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { // If paging reaches the end...
// [NEW] go back to second image (the first is now the last)
$active = $('.paging a:eq(1)');
}
rotate(); //Trigger the paging and slider function
}, 1500); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function(){
clearInterval(play); //Stop the rotation
}, function(){
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
Oh and one last thing... I added the missing <p> in front of the Phillies botText