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) });
Related
jQuery(window).scroll( function(){
/* Check the location of element */
jQuery('.logoscrollbg').each( function(i){
var logo = jQuery(this).outerHeight();
var position = jQuery(window).scrollTop();
/* fade out */
if( position > logo ){
jQuery(this).animate({'opacity':'1'},100);
}else{ jQuery(this).animate({'opacity':'0'},100);}
});
});
Above is my script for a class (the header) with should blend in when the page is being scrolled down and blend out when you are on the top of the page, with other words the start.
I don't understand javascript at all, but I do a little php and I was wondering if someone could help me write there a elseif tag and later make the else tag so that is the page is loaded the class(.logoscrollbg) isn't visible and when u start scrolling it gets visible and when you get to the top it gets invisivle again :)
The script works like this right now: when I enter the site it shows the bar(bad), later when scrolling it stays or well is there(good), then when getting to top again it fades out(good).
The code inside your scroll event needs to be run when the page is loaded as well as when it scrolls.
jQuery(function() {
// object to hold our method
var scrollCheck = {};
// define and call our method at once
(scrollCheck.check = function() {
// only need to get scrollTop once
var logo, position = jQuery(window).scrollTop();
/* Check the location of element */
jQuery('.logoscrollbg').each(function() {
logo = jQuery(this).outerHeight();
/* fade out or in */
// cleaned this up a bit
jQuery(this).animate({'opacity': position > logo ? 1 : 0}, 100);
});
})();
jQuery(window).scroll(function(){
// call our method
scrollCheck.check();
});
});
It looks to me like this will only fire when you scroll. Try updating your js to this:
jQuery(window).on('scroll, load', function() {
/* Check the location of element */
jQuery('.logoscrollbg').each( function(i){
var logo = jQuery(this).outerHeight();
var position = jQuery(window).scrollTop();
/* fade out */
if( position > logo ){
jQuery(this).animate({'opacity':'1'},100);
}else{ jQuery(this).animate({'opacity':'0'},100);}
});
});
*note: You may want to fire the callback on document load instead of window.
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);
});
Goal
Create a responsive slide for low ram devices.(immagine a set of many images at high resolution.. mobile device would crash).i want to show only one image and preload N images.
Scenario
Let's say i have 77 images (nI=77,variable).
Obiovsly i want to load the first image, but also want to preload 2 images per side (nP=2,variable).
That is a total of 5 boxes ( center, 2left, 2right ).nB=nP*2+1.
On init i want to disply the boxes/images as follows(the number is the image index)
[75][76][0][1][2]
0, the first image is atm the only visible image.
Now comes the tricky part.
If i press < (next) the static visualizzation is:
[76][0][1][2][3]
but every box moves! so if we start with a default position set:
[75][76][0][1][2]//image index
[ 0][ 1][2][3][4]//box index
[-2][-1][0][1][2]//box position
<
[76][0][1][2][ 3]//image index
[ 1][2][3][4][ 0]//box index
[-2][-1][0][1][2]//box position
Pressing left loads the the following image into the first box, moves the first box into the last position, every other box moves (one offsetwidth) to the left.
>
[74][75][76][0][1]//image index
[4][ 0][ 1][2][3]//box index
[-2][-1][0][1][2]//box position
Pressing right loads the the preceding image into the last box, moves the last box into the first position, every other box moves (one offsetwidth) to the right.
Some relevant js
var I=ARRAYOFIMAGES,
nI=images.length,
nP=2,
nB=nP*2+1,
nC=0,
slideWidth=slide.offsetWidth; // CURRENT IMAGE INDEX 200px variable
function defaultPos(a,b){//[-400, -200, 0, 200, 400]
for(a=[],b=0;b<nB;b++){
a[b]=(b-nP)*slideWidth
}
return a
}
function currentInd(a,b){//[75, 76, 0, 1, 2]
for(b=[],a=0;a<nB;a++){
b[a]=(a+nC-nP+nI)%nI
}
return b
}
function next(e){
nC=++nC%nI;
d=1; // direction
calculate()
}
function prev(e){
nC=(--nC+nI)%nI;
d=0;
calculate()
}
function calculate(){
//for(BOXES){
// if(ISIMAGE2CHANGE){box[l].style.backgroundImage='url('+I[IMAGEINDEX]+')')}
// box[l].style.webkitTransform='translate3d('+POSITION+'px'+',0,0)';
//}
}
Partially working DEMO
First Demo
http://jsfiddle.net/VfYR4/
New Demo (shorter but not loading proper image)
http://jsfiddle.net/7Nedw/1/
Note: adjust the delay to -webkit-transition:-webkit-transform 1000ms ease 1000ms; to see what is going on.
Problem
The math is wrong. if the index is 0 and i move backwards the positions and indexes are messed up.
the function returns the wrong index to load,position and in which box to load.
Give your HTML markup like this
<img src="" data-src="images/1.jpg" alt="img0"/>
<img src="" data-src="images/2.jpg" alt="img1"/>
<img src="" data-src="images/3.jpg" alt="img2"/>
<img src="" data-src="images/4.jpg" alt="img3"/>
And use this method, when you will press your left or right button:
function preLoadImages() {
var $image = $(".my-image");
var $imageUnloaded = $(".my-image[src='']");
for(var i=current;i<current+4;i++) { //(current+1) is image index shown to user
var j = (i+$image.length)%$image.length;
console.log("Image to be loaded : "+j);
var $this = $($image[j]);
if($this.attr('src') == '') {
$this.attr('src',$this.data('src'));
}
}
}
You can change the logic slightly if you want to change the number of preload images on each side.
I have two background photos, I want to show the first background photo if the page is not scrolled to 500, if the page is scrolled more than 500, then I want to show the second background, both backgrounds must be positioned fixed and stretched to the screen.
Only texts must move when page scrolls, and the background must change if the scoll is more than 500.
http://jsfiddle.net/2Pfsy/37/
$(document).ready(function () {
var imageControl = function (event) {
var fromTop = $(window).scrollTop();
url = null;
console.log(fromTop);
if (fromTop < 500) {
url = 'http://i.hizliresim.com/KdrGVV.png';
} else if (fromTop > 500) {
url = 'http://4.bp.blogspot.com/-mHaVHhUegKs/UjHp6DruPeI/AAAAAAAAGx8/m_je_crr1v0/s1600/wp+cortana+screenshot+mashup.jpg';
}
$('body').css('background', 'url(' + url + ')');
};
$(window).scroll(imageControl);
});
http://jsfiddle.net/2Pfsy/43/
updated your jsfiddle
changed background to background-image in js and added background-attachment: fixed in css
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();