Javascript sliding Image Gallery - no jQuery - javascript

Does anyone have any tips on making a pure JS image slider? I am looking to have it pause after each image and restart after going through all the images. All that I can find are jQuery plugins and I am look to do this with only JS.

i'd go for something like this:
var sliderTool = {
_totalItems : 0,
_visibleItems : 6,
_currentOffset : 0,
_timeout : null,
next : function(){
...
},
prev : function(){
...
},
play : function(){
...
},
pause : function(){
...
}
};
as a base.
every time you set timeout, save it into the _timeout field so you can clearTimeout(sliderTool._timeout) whenever you want.
next and prev can contain animations or just a simple image replacement. you can add a separate timeout for animation and for intervals between slides.
you can add an "add()" method to the sliderTool and on window.load or "body onload" add all the images and then run the start() method. you can also dynamically add images after page is loaded
maybe also add init() for autoloading and basic setup.
again, this is a basic draft of a possible solution. once you get running you'll probably run into more specific questions. Overall, as an approach, i recommend trying to come up with some solution first before asking for a general advice ;)

Related

Change image and Text on Scroll (Javascript)

I dont have much experience in javascript but trying to achieve a slideshow like in https://district2.studio/ where the text and image changes as you scroll. In the example no matter the amount you scroll at a time or inbetween the image changing animation, the image will change only once at a time. I'm trying to achieve this using javascript only and no additional plugin or libraries. Hope someone can help me.
You have some errors.
First of all, you have to wait the DOM is ready. You could movet he entire before de body tag closes to ensure that or use window.onload
class prop elements it's an array.
window.onload = function() {
document.getElementById("image1").onscroll = function() {
if(document.getElementById("image2").classList.contains("scroll")){
document.getElementById("image2").classList.remove("scroll");
} else {
document.getElementById("image2").classList.add("scroll");
}
};
}
Something like this should work

Jscroll pagination plugin

i have download this good plugin
http://andersonferminiano.com/jqueryscrollpagination/
and i use this code for do a call to my db and show all the result. The my problem is that i can't stop the showing results when are finish in the database, i wouold like stop the pagination and no repeat the same result. how can i do it? thank you so much
$(function(){
$('#content').scrollPagination({
'contentPage': 'democontent.html', // the page where you are searching for results
'contentData': {}, // you can pass the children().size() to know where is the pagination
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
'beforeLoad': function(){ // before load, some function, maybe display a preloader div
$('.loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
$('.loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results loaded stop pagination (only for test)
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element with delay
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
That plugin actually isn't very good. I'm looking at the plugin's code, and sure enough, it doesn't provide a way to detect when you're at the end of the content.
If you go to the plugin page and scroll down, it appears to be working quite nicely. However, when you look at the file democontent.html (he's hidden the text, you have to view the source) where the data is being retrieved from, you'll see it's only 17 items. But, it keeps loading bogus data as you scroll down.
Not only does the plugin not detect the end of the data, but it also doesn't provide a way of stopping at all. If you'll notice, Anderson told the plugin to stop after 100 items are loaded, but he did this only in his example instead of writing this feature into the plugin.
So, that's why your content isn't stopping. You could try modifying his plugin yourself, but if you'd rather just change plugins, I'd recommend Infinite Scroll, by Paul Irish.
You can use mkscroll plugin with is provide you more functionality link for mk scroll is below.
https://github.com/maulikkanani/Scroll-Pagination
jQuery(window).mkscroll({
limit:10,
total:100,
});
there are many other option in that.
If any one phasing the problem here is the solution: the jscroll will stop the loading the content once the 'next page' link is not available.. so please check when you want to stop loading the content then 'next page' link is not getting loaded in the last content which is appended.

Trigger event on animation complete (no control over animation)

I've a scenario that requires me to detect animation stop of a periodically animated element and trigger a function. I've no control over the element's animation. The animation can be dynamic so I can't use clever setTimeout.
Long Story
The simplified form of the problem is that I'm using a third party jQuery sliding banners plugin that uses some obfuscated JavaScript to slide banners in and out. I'm in need of figuring out a hook on slideComplete sort of event, but all I have is an element id. Take this jsfiddle as an example and imagine that the javascript has been obfuscated. I need to trigger a function when the red box reaches the extremes and stops.
I'm aware of the :animated pseudo selector but I think it will need me to constantly poll the required element. I've gone through this, this, and this, but no avail. I've checked jquery promise but I couldn't figure out to use that in this scenario. This SO question is closest to my requirements but it has no answers.
P.S. Some more information that might be helpful:
The element isn't created by JavaScript, it is present on page load.
I've control over when to apply the plugin (that makes it periodically sliding banner) on the element
Most of the slideshow plugins I have used use changing classes at the end of the animation... You could extend the "addClass" method of jQuery to allow you to capture the class change as long as the plugin you use is using that method like it should:
(function($){
$.each(["addClass","removeClass"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
oldmethod.apply( this, arguments );
this.trigger(methodname+"change");
return this;
}
});
})(jQuery);
I threw together a fiddle here
Even with obfuscated code you should be able to use this method to check how they are sending in the arguments to animate (I use the "options" object when I send arguments to animate usually) and wrap their callback function in an anonymous function that triggers an event...
like this fiddle
Here is the relevant block of script:
(function($){
$.each(["animate"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
var args=arguments;
that=this;
var oldcall=args[2];
args[2]=function(){
oldcall();
console.log("slideFinish");
}
oldmethod.apply( this, args );
return this;
}
});
})(jQuery);
Well since you didn't give any indication as to what kind of animation is being done, I'm going to assume that its a horizontal/vertical translation, although I think this could be applied to other effects as well. Because I don't know how the animation is being accomplished, a setInterval evaluation would be the only way I can guess at how to do this.
var prevPos = 0;
var isAnimating = setInterval(function(){
if($(YOUROBJECT).css('top') == prevPos){
//logic here
}
else{
prevPos = $(YOUROBJECT).css('top');
}
},500);
That will evaluate the vertical position of the object every .5 seconds, and if the current vertical position is equal to the one taken .5 seconds ago, it will assume that animation has stopped and you can execute some code.
edit --
just noticed your jsfiddle had a horizontal translation, so the code for your jsfiddle is here http://jsfiddle.net/wZbNA/3/

Jquery Cycle changing options on the fly

I want to change the options for jquery cycle dynamically on the page. Specifically, I want the speed to drop. According to one of it's creator, you can use 'cycle.opts' to do this. In my example I have specifically
$('.cycle-streams').cycle({
fx: 'scrollVert',
continuous: 1,
speed: 1000,
delay: 0,
easing: 'linear'
});
var changedOpts = $('.cycle-streams').data('cycle.opts');
$('.cycle-streams').mouseover(function() {
var changedOpts = $('.cycle-streams').data('cycle.opts');
changedOpts.speed = 1000000000000;
$('.cycle-streams').data('cycle.opts', changedOpts);
});
I've been working on this for some time now and am lost as to what I'm doing wrong. Any help would be appreciated. The jsfiddle is here... http://jsfiddle.net/bmXgj/
I changed your fiddle to this:
var changedOpts = $('.cycle-streams').data('cycle.opts');
$('.cycle-streams').mouseover(function() {
//hover in
$('.cycle-streams').cycle('pause');
changedOpts.speedIn = 500;
changedOpts.speedOut = 500;
$('.cycle-streams').cycle('next');
$('.cycle-streams').cycle('resume');
});
$('.cycle-streams').mouseout(function() {
//hover out
$('.cycle-streams').cycle('pause');
changedOpts.speedIn = 3000;
changedOpts.speedOut = 3000;
//$('.cycle-streams').cycle('next');
$('.cycle-streams').cycle('resume');
});​
I noticed that you were re-declaring 'changedOpts' for some reason. When I watched this variable in the console, it was coming out as undefined. Since you already defined it I just kept using it.
also you were never resetting the state of the cycle. I added pause and resume. It appears to work now but it is not perfect. The last side needs to clear before the new speeds will be used, so drastic jumps (3000 to 500 for example) allow for a noticeable delay when trying to speed up. I also added a next statement.
I noticed that when the plugin was handling next it was clearing the timeouts. So I figured if I stored the remaining time (Pause), then moved to the next slide (next), then resumed the show (resume) that the time would be restored. This seems to be working.
The 'next' action, is not needed when going from fast to slow because you will not usually notice the 'orphan' slide when leaving the container because it is cycling quickly. I put it in there for good measure in case your speeds are not that far apart.
Also I noticed you were only changing one speed. I am assuming, without looking at the guts of the plugin, that the 'speed' option is used at initialization only. After adding the other two speeds I got the right action. After reviewing the 'guts' of the plugin, I am certain that the speed option is used for synchronizing the other two speeds. If they all do not match you may get out of sync. The initialization code uses the 'speed' to set 'speedIn' and 'speedOut', so we need to change those two to affect the 'running' speed.
http://jsfiddle.net/bmXgj/6/
EDIT: did not need to pause and resume.
EDIT2: I did need the pause and resume, but I also needed a next. Also the 'speed' option can be ignored once it is set the first time to start the cycle. It appears to be shorthand for speedIn = speedOut = X

Best way to rotate html on a page

I need to be able to rotate between five distinct pieces of html in my webpage every 8 seconds.
What's the best way to do this? JQuery or native JS is fine.
There are definitely a lot of plugins for that.
But here's some basic structure you could use if you want to do it yourself:
// assuming all your divs have the class `rotating-content`:
$(document).ready(function() {
var divs = $('.rotating-content').hide();
var curr_div = divs.first().show();
function nextcontent() {
// hide current div, then move the next one or the first div, and show it
curr_div = curr_div.hide().next().add(divs.first()).first().show();
setTimeout(nextcontent, 5000); // 5 seconds
}
setTimeout(nextcontent, 5000);
});
You mean like a slideshow? You can use jQuery Cycle plugin from malsup,
here's an example: http://jsfiddle.net/JKirchartz/zLekb/ (none of this extra stuff is necessary, this is just an example I've been recycling)
if you want it to change every 8 seconds change timeout to 8000 (it's measured in milliseconds)

Categories