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) });

Multiple slide shows on one html page

I have tried to put two side shows onto one page, I cannot get the second one to work, I have tried multiple fixes I found on line and none of them work and make it worse. Here is my code
$(document).ready(function()
// execute the slideShow, set 4 seconds (4000) for each image
slideShow(6000);
});
function slideShow(speed) {
// append an 'li' item to the 'ul' list for displaying the caption
$('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
// set the opacity of all images to 0
$('ul.images li').css({opacity: 0.0});
// get the first image and display it
$('ul.images li:first').css({opacity: 1.0}).addClass('show');
// call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
// pause the slideshow on mouse over
$('ul.images').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no images have the show class, grab the first image
var current = ($('ul.images li.show')? $('ul.images li.show') : $('#ul.images li:first'));
// trying to avoid speed issue
if(current.queue('fx').length == 0) {
// get the next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.images li:first') :current.next()) : $('ul.images li:first'));
// get the next image caption
var desc = next.find('img').attr('alt');
// set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
// hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
function slideShow(speed) {
// append an 'li' item to the 'ul' list for displaying the caption
$('ul.images1').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
// set the opacity of all images to 0
$('ul.images1 li').css({opacity: 0.0});
// get the first image and display it
$('ul.images1 li:first').css({opacity: 1.0}).addClass('show');
// call the gallery function to run the slideshow
var timer = setInterval('gallery2()',speed);
// pause the slideshow on mouse over
$('ul.images1').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery2()',speed);
}
);
}
function gallery2() {
//if no images have the show class, grab the first image
var current = ($('ul.images1 li.show')? $('ul.images1 li.show') : $('#ul.images1 li:first'));
// trying to avoid speed issue
if(current.queue('fx').length == 0) {
// get the next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')?$('ul.images1 li:first') :current.next()) : $('ul.images1 li:first'));
// get the next image caption
var desc = next.find('img').attr('alt');
// set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
// hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
This is my HTML
First gallery
<div class="gallery">
<ul class="images1">
<li class="show"><img width="880" height="100" src="images\imageedit_6_7692684616.gif" alt="photo1" /></li>
<li><img width="880" height="100" src="images\imageedit_20_2328314159.gif" alt="photo2" /></li>
</ul>
</div>
This is the second gallery
<div class="gallery2">
<ul class="images">
<li class="show"><img width="930" height="400" src="images/offshore banner pic writing.png" alt="photo_one" /></li>
<li><img width="930" height="400" src="images/Drillig Pipe travels under the sea writing.jpg" alt="photo_two" /></li>
<li><img width="930" height="400" src="images/shutterstock_71875879_writing.jpg" alt="photo_three" /></li>
<li><img width="930" height="400" src="images/shutterstock_92549716_writing.jpg" alt="photo_four" /></li>
<li><img width="930" height="400" src="images/shutterstock_64614868_writing.jpg" alt="photo_five" /></li>
</ul>
</div>

HTML: Adding picture with link to slideshow of images with buttons

So I have a slideshow on my website with images with no links. It also has buttons on the bottom to navigate to the other pictures, one for each image. I am trying to add another image, this one with a link to another part of the website. I would believe to add the picture
to the list of
<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">"
"
I would just add the same but add
<img src="/image/home-slideshow/photo-06.jpg" alt="" width ="684" height="325">
The question I had was is there anything else I have to change somewhere else?
Also, I have to add a button for that image, would adding this linked photo to the slideshow affect the buttons in some weird way?
EDIT:
here is my slideshow javascript. But it doesnt look like it makes them strictly images?
$(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
});
});

fadein fadeout javascript slideshow

Im trying to create a simple fade in fade out image slideshow in javascript. Ive managed to create one that shows one image, fades out and then fades another image in but this is not what im going for. What i want is so that when the first image fades out, there is already another image behind it and when the other image also fades out, theres another image behind that one too. Im trying to avoid having the part of the webpage that holds the slideshow from being empty at any time during the slideshow. Can anyone help me out by editing my code or showing me how I can achieve this?
var count = 1;
setInterval(function(){
if (count <= 3){
$("#slideshow").fadeOut(2000);
setTimeout(function(){$("#slideshow").attr("src","breakup/"+ count +".jpg")},2000);
$("#slideshow").fadeIn(2000);
count++;
if (count>3){
count = 1
}
}//end if
}/*end function*/,5000);

It's probably easiest to pre-load all of your images
css:
<style>
.slider{
position: relative;
}
img {
position: absolute;
top:0;
left:0;
}
</style>
Javascript:
<script>
var count = 1
setInterval(function(){
var old= $('#img-' + count);
old.fadeOut(2000);
count++;
if (count>3){
count = 1
}
var next= $('#img-' + count);
next.fadeIn(2000);
}, 5000);
</script>
html:
<div class="slider">
<img id="img-1" src="breakup/1.jpg">
<img id="img-2" src="breakup/2.jpg">
<img id="img-3" src="breakup/3.jpg">
</div>

Try this http://jsfiddle.net/wfvD6/.
Basically it clones the old image and put it over the new image, then fadeout old and fadein new at the same time.
//clone the old image
var ghost = slider.clone();
//remove id
ghost.removeAttr('id');
//make the ghost image just over the old image
var pos = slider.position();
ghost.css({
position: 'absolute',
top: pos.top,
left: pos.left
});
ghost.insertBefore(slider);
//$("#slideshow").attr("src","breakup/"+ count+".jpg");
//change image
setImage(count);
//fadeout ghost
ghost.fadeOut(2000, function () {
ghost.remove();
ghost = null;
});
//fadein slider
slider.fadeIn(2000);

I have created this fiddle http://jsfiddle.net/xmLk4/ You should set the images for slide 1 and 2 after the fadeout in order to allow loading of the image before it fades in.
function fade(){
$("#slide2").fadeOut(2000, function() {
// set new image slide 2
}).delay(2000).fadeIn(2000, function() {
// set new image slide 1
}).delay(2000);
}
setInterval(fade, 8000);
fade();

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