We Keep Coding

Only specific img in javascript

Hello,
I'm doing a website with a javascript slider. I want to use only specific images from one folder for the slider, not all of the img in the DOM. Because I'm adding more img which shouldn't be part of the slider....
I'm using this script:
$(function(){
var i= 0;
//when the next button is clicked on
$('.next').on("click", function(){
//increase the display picture index by 1
i = i + 1;
//if we are at the end of the image queue, set the index back to 0
if (i == $('img').length) {
i=0;
}
//set current image and previous image
var currentImg = $('img').eq(i);
var prevImg = $('img').eq(i-1);
//call function to animate the rotation of the images to the right
animateImage(prevImg, currentImg);
});
//when the previous button is clicked on
$('.previous').on("click", function(){
//if we are at the beginning of the image queue, set the previous image to the first image and the current image to the last image of the queue
if (i==0) {
prevImg = $('img').eq(0);
i=$('img').length-1;
currentImg = $('img').eq(i);
}
//decrease the display picture index by 1
else {
i=i-1;
//set current and previous images
currentImg = $('img').eq(i);
prevImg = $('img').eq(i+1);
}
//call function to animate the rotation of the images to the left
animateImageLeft(prevImg, currentImg);
});
//function to animate the rotation of the images to the left
function animateImageLeft(prevImg, currentImg) {
//move the image to be displayed off the visible container to the right
currentImg.css({"left":"100%"});
//slide the image to be displayed from off the container onto the visible container to make it slide from the right to left
currentImg.animate({"left":"0%"}, 1000);
//slide the previous image off the container from right to left
prevImg.animate({"left":"-100%"}, 1000);
}
//function to animate the rotation of the images to the right
function animateImage(prevImg, currentImg) {
//move the image to be displayed off the container to the left
currentImg.css({"left":"-100%"});
//slide the image to be displayed from off the container onto the container to make it slide from left to right
currentImg.animate({"left":"0%"}, 1000);
//slide the image from on the container to off the container to make it slide from left to right
prevImg.animate({"left":"100%"}, 1000);
}
});
Thank you for any help!

Instead of calling $('img') every time you need the list of images, maintain the array of the images that you want displayed.
For example, if you can give all the img tags for the slider class="slider-img" to make this selection easier.
var imgs = $('img.slider-img');
And replace $('img') in your code with imgs.
Or if you want from all the images served from a specific web address or "folder", you can do the following:
var address = "example.com/silder_imgs";
var imgs = $('img').filter(function() { return $(this).attr(a).includes(address) });

image slider, position will not reset

I'm making a simple image slider for the landing page of a website. There are two effects taking place. First, the image transitions by fading the current one in and the subsequent one out, using setInterval. There are also arrow buttons that, when clicked, slide the images forward or backward. The fading is working just fine, but the sliding functions are leaving the images in the offscreen position. Here are:
function slidePrevPic(dur){
var currentPic = $('.active-pic');
var prevPic = currentPic.prev();
if(prevPic.length == 0){
prevPic = $('#pics img').last();
}
$('.arrow').css('pointer-events','none');
setTimeout(function(){
$('.arrow').css('pointer-events','auto');
},dur);
w = $(window).width();
prevPic.css('opacity',.4);
prevPic.css('left',-w);
prevPic.animate({
'left': 0
}, dur);
currentPic.animate({
'left': w
}, dur);
setTimeout(function(){
currentPic.css('left',0);
currentPic.css('opacity',0);
},dur);
prevPic.addClass('active-pic');
currentPic.removeClass('active-pic');
};
function slideNextPic(dur){
var currentPic = $('.active-pic');
var nextPic = currentPic.next();
if(nextPic.length == 0){
nextPic = $('#pics img').first();
}
$('.arrow').css('pointer-events','none');
setTimeout(function(){
$('.arrow').css('pointer-events','auto');
},dur);
w = $(window).width();
nextPic.css('opacity',.4);
nextPic.css('left',w);
nextPic.animate({
'left':0
},dur);
currentPic.animate({
'left':-w
},dur);
setTimeout(function(){
currentPic.css('left',0);
currentPic.css('opacity',0);
},dur);
nextPic.addClass('active-pic');
currentPic.removeClass('active-pic');
};
I was trying to simplify everything to figure out what was wrong, so instead of hiding and showing images or fading them in and out, I'm just animating and setting the opacity. The idea here is pretty simple. All of the pictures are in the same place and all but one have 0 opacity. When the slider is called, the next image is moved offscreen, the current and next image are animated together (moving the current image offscreen), then the position of the current image should be reset. The sliding effect is working well, but the position of the current image is not reset, so that when it cycles back the image space goes white. I am still generally confused about how the timing of function execution with jquery and js is managed, so any help in that general direction is also much appreciated. Also, here is the code that calls these functions:
var picInterval = setInterval(function(){
fadeNextPic(picFadeTime);
},idleTime);
$('#banner #right-arrow').click(function(){
clearInterval(picInterval);
slideNextPic(picSlideTime);
picInterval = setInterval(function(){
fadeNextPic(picFadeTime);
},idleTime);
});
$('#banner #left-arrow').click(function(){
clearInterval(picInterval);
slidePrevPic(picSlideTime);
picInterval = setInterval(function(){
fadeNextPic(picFadeTime);
},idleTime);
});

Slideshow image with buttons

I am managing a website for my company that was made by someone else ($24,000) and we edited the slideshow which has images with buttons on the bottom that navigate to the corresponding photo. What we did was add an image with a link and a button to the slideshow. The problem is it works fine in chrome but not in I.E.. In I.E. the button is there but the last button just gives a blank image (the image we added went in the first button). It also gives a strange border around the first (added) image. Here is the HTML. the new first image has a link where the others do not. I have looked through the javascript and jquery and it doesn't appear to dictate anything about how many images/buttons are allowed or anything. Sorry for the long code and I appreciate you taking the time to read it.
<a href="http:\\www.supplysourceoutlet.com" target="_blank">
<img src="/images/home-slideshow/photo-outlet.jpg" alt="" width="684" height="325"></a>
<img src="/images/home-slideshow/photo-01.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-02.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-03.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-04.jpg" alt="" width="684" height="325">
<img src="/images/home-slideshow/photo-05.jpg" alt="" width="684" height="325">
</div>
</div>
<div class="paging">
'
Here is the javascript for the slideshow:
$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determine the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
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
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 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
}, 7000); //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
});
});

The reason for the border and that only the first (added) one links is because it is the only one with an a tag around it. You could add a border="0" to the img tag to get rid of the border like this:
<a href="http:\\www.supplysourceoutlet.com" target="_blank">
<img src="/images/home-slideshow/photo-outlet.jpg" alt="" border="0" width="684" height="325">
</a>
To fix the other part I need to know where the div with the class image_reel is located could you post more of your html?

Two elements of javascript are clashing in Internet Explorer

There are two elements on this page that have Javascript attached. The donate box on the left, and the image slider in the centre. The image slider just rolls round on a time delay while the donate box changes its left-position on hover, then returns when hover is released. This works OK in FF and Chrome.
In IE there seems to be some sort of clash between the two elements. As soon as I run the hover command the slider stops working. The hover also only works once, and needs a page refresh before it'll run again.
Is there any way to fix this?
This is the code for the image slider:
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
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}, {
duration: 2000,
easing: 'easeInOutQuad'
})
}
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//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
return false; //Prevent browser jump to link anchor
});
});
</script>
and this is for the donate box:
$(document).ready(function() {
$('#donatebox').hover(function() {
$('#donatebox').animate({
'left': parseInt($(this).css('left'),10) == 295 ?
$(this).animate({'left': '0px'}, 1000,'easeOutQuad') :
295
});
});
});
It's beyond me so I've worked round it another way that doesn't need parsing (which I really don't understand...)
$(document).ready(function() {
$('#donatebox').mouseenter(
function() {
$('#donatebox').animate({"marginLeft": -5}, 1000, "easeOutBounce");
});
});
$(document).ready(function() {
$("#donatebox").mouseleave (
function() {
$(this).animate({"marginLeft": -5}, 20).animate({"marginLeft": -305}, 700, "easeOutQuad");
});
});

Something's causing a Javascript error in your jQuery "easing" plugin, when the div has eased back into its slot. This is why no scripts are running after you use the Donate box once.
If you use Developer Tools in IE, you'll find that the error is caught. Then (although the animation is decoupled so you can't just go up the callstack) it is deducible that the issue is in the animation that you instigate from your custom.js:
$('#donatebox').animate({
'left': parseInt($(this).css('left'),10) == 295 ?
$(this).animate({'left': '0px'}, 1000,'easeOutQuad') :
295
});
^ Doesn't look right to me.
You also have duplicate HTML node IDs overimage. IDs are unique; perhaps you meant to use classes?

Maybe it help you.
Ticket on jQuery Bug Tracker

This is caused by Invalid Argument exception on Line: 8538 of jquery-latest.js

Animate a paragraph along with rotating images

Basically there are 4 images that scroll off the page. Now when a user clicks the link, that one scrolls off. But I wanted to added an additional animation where a paragraph (".image_text p") appears on page as well and then when another link is clicked, that text goes along with rest of image and scrolls off. Everything works except the animation of the paragraph part.
The problem:
The text is all squished together (there's four paragraphs and they are overlapping each other)
When I click - it doesn't even have time to fade it- and foes swirving off page before it fades.
First time page loads, the first paragraph doesn't even appear at all - when button is clicked, all paragraphs appear. It's supposed to be the first paragraph appears on page load and then click then the next paragraph appears as first scrolls away with image.
The markup and css are correct. I think problem is somewhere in this javascript:
$(function() {
$('#slideshow').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: '../images/img1.png' },
{ src: '../images/img2.png' },
{ src: '../images/img3.png' },
{ src: '../images/img4.png' }
])
$(".paging").show();
$(".paging a:first").addClass("active");
$(".image_text p:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
$activep = $('.image_text p:first');
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
$(".image_text p").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$activep.addClass('active');
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
$(".image_text p").animate({
opacity: .99,
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
$activep = $('.image_text p').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
}, 7000); //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
});
});
CSS for paragraph:
.image_text p {
text-align: right;
width: 500px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
As it can bee seen the reason why the text isn't shown is because the opacity starts at 0. But this is intended because it's supposed to fade in. However, it appears it doesn't fade in but rather only becomes visible when link is clicked and by that time it scrolls off the page.

The solution was to specify how may p tags and multiple that by width of container and then specifying the container with the css declaration overflow:hidden, which hides all p tags except the current. Also, p tags had to be floated left in order to get them to behave inline:
.window {
margin-top: 20px;
height:286px;
width: 655px;
overflow: hidden;
position: relative;
}
.image_text {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.image_text p {
float: left;
margin-left: 10em;
}