jquery previous and next button in image gallery - javascript

I am making a simple image gallery
http://jsfiddle.net/QEh53/1/
Imgs array can store upto 36 images and i wants to display only first 6 onload. there is one next and back button, I need it when click on Next it will show next 6 images from Imgs array and on clicking Back last 6 images should slide in. if there is no img left in prev or next it should loop through next 6 images.
Thank you for any help.
Edit:
I have tried this with just back button but for some reason it is not removing old list before adding new one http://jsfiddle.net/QEh53/6/
Edit:
here was solution:
jQuery gallery turn over with next and previous buttons

I belive this code will help you: example.js
total is the amount of "pages", you can set it as Math.ceil( totalImages / 6 ).
This, nonstopping pages was called loop in that code. It returns a correct page, as you wanted.
function loop( value )
{
return value < 0 ? total + value : ( value >= total ? value % total : value );
}

Related

Navigation with an if that counts and add elements certain times

I'm looking to create a interactive nav bar for my own personal study purposes, so the idea behind it is if you click on down the number in the corner of the screen changes and a new image and text pops up every time this goes til number(page 5) all the other elements would be on display none except that one page that is active
I'd like to know if it would be possible to create a nav bar and lets say you have a set up nav with 2 buttons up and down how to make certain things not show up and others show up, i think my counter or var is not calculating properly, this is my javascript if statement( more in depth js fiddle https://jsfiddle.net/emilegmn/1L3h51zw/ )
if(numberCount < 1 ) {
add class to nav showing only one button ( down )
}
and this is my counter
numberCount = numberCount + 1
and then after that between 2-4 to show 2 buttons ( up and down )
and at 5 to only show up.
If someone has any things or knows something online that does this, please link me to it if you want!
I have tried finding how to do this but I am still trying to get it all figured out,
Thanks in advance and for your time!
If I understand correctly, is this what you want to achieve:
User clicks between two buttons to make new things appear (like a slider maybe?) but in a nav bar.
To do so you need JavaScript as well as an HTML structure that helps you out. In summary, you could do something along these lines. Granted this only takes into account a sort of "next button", if you want a previous one then you just need to add another function that instead of adding to the current_slide , subtracts from it.
Happy coding!
HTML
<nav id="slider-nav">
<div id="slide-1" class="active"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</nav>
CSS
With this you make sure that only the <div> with class .active is visible
#slider-nav div:not(.active) {
display:none;
}
JS
This would be your sweet JavaScript (jQuery)
//To be placed within your document ready function
const nav_slides =[]; //Holds the id of all your slides
var current_slide = 0;
$('#slider-nav div').each(function(){
nav_slides.push('#' + $(this).attr('id'));
});
/*This would be the part of when clicking happens on the 'next' button in your nav.
Keep in mind that the definition of the function must be within the same
scope as the defined variable, current_slide and nav_slides.
Hopefully, all encapsulated into one single scope that is your api.*/
function nextSlide(){
$(nav_slides[current_slide]).removeClass('active');
current_slide = (current_slide + 1) % nav_slides.length;
//Move on to next slide
//It's a circular counter, when it reaches max slide 4, it'll go back to 0
$(nav_slides[current_slide]).addClass('active');
}
ps: The initialization of current_slide is not dynamic. If in your HTML you happen to change who the first slide with active class is, then you need to update it in your JS. It would be very useful to initialize that current_slide dynamically, in other words, not hard coded out of laziness.

How to show/hide image in intervals?

I'm using jQuery to use it's hide function but I can't seem to get it to work. The image is normally set to a scale of 0 0 0, and after a period of time, the scale changes to 1 1 1 (so, image becomes visible). I want to do this on an interval and can use setInterval for that. However, I also want to hide the image while inside that same interval. So, it becomes visible and then invisible on a loop, basically. Here is the code:
<script>
function PopUp(scale) {
var indicator = document.getElementById('FeelIndicator');
indicator.setAttribute('scale', '1 1 1');
$("#FeelIndicator").hide(8 * 1000) }
setInterval(PopUp, 10 * 1000);
</script>
As of now, the indicator does pop up after 10 seconds, but never becomes hidden. I don't get an error message in the console, but I'm guessing that I'm not using the jQuery code correctly. Any help would be greatly appreciated!
edit: Thank you Jaromanda. I've edited the code but it still doesn't seem work.
Muhammad, I just want it to appear for a few seconds and then disappear. It will also disappear if the user clicks on the image but I'm not worried about figuring out that code.
Your jquery/javascript selectors don't match.
Assuming the actual element Id is #FeelIndicator:
$('#FeelIndicator').hide(8 * 1000)
instead of:
$('#indicator').hide(8 * 1000)

Javascript/Jquery element carousel

I am trying to make a javascript/jquery carousel. I have an unordered list and inside the ulist i have more lists. I get the first lit with:
list = $(wrapper).find("li:eq(0)").show()
On the button-next down i want it to show next list so it would be:
list = $(wrapper).find("li:eq(1)").show()
on the button-previous i want the list to show previous list. How could I achieve something like this, to append ("li:eg(x+1/x-1)).show()
Introduce a variable to keep track of the current list. When a user clicks the next button, increment it by one, and vice-versa for when previous is clicked. Then use this variable in your selector.
list = $(wrapper).find("li:eq("+ currentList +")").show()
Sidenote: You might want to introduce some bounds checking so currentList never goes below 0 and never exceeds the number of lists you have available.
//On previous click
if(currentList - 1 > 0){
//do something
}
//assign a variable to keep track of the upper bounds
var maxList = $(wrapper).find('li').length;
//On next click
if(currentList + 1 < maxList - 1){
//do something
}

RxJS Polling for row updates on infinite scroll

I was watching Matthew Podwysocki event on https://www.youtube.com/watch?v=zlERo_JMGCw 29:38
Where he explains how they solved scroll on netflix. Where user scroll for more data as previous data gets cleaned up and more adds up (but scroll back shows previous data again).
I wanted to do similar, but I grabbed netflix demo code:
function getRowUpdates(row) {
var scrolls = Rx.Observable.fromEvent(document, 'scroll');
var rowVisibilities =
scrolls.throttle(50)
.map(function(scrollEvent) {
return row.isVisible(scrollEvent.offset);
})
.distinctUntilChanged();
var rowShows = rowrowVisibilities.filter(function(v) {
return v;
});
var rowHides = rowrowVisibilities.filter(function(v) {
return !v;
});
return rowShows
.flatMap(Rx.Observable.interval(10))
.flatMap(function() {
return row.getRowData().takeUntil(rowHides);
})
.toArray();
}
But I'm bit confused on how to pass new data or page data according to the scroll here.. Can someone give little explanation on how I can do the following:
fetch first list (I can do that)
fetch more list as user scroll down (using paging next page)
remove previous fetched data from memory, and refetch on request (scroll up).
Here is how I would do it in general lines. If this seems to give you satisfaction, I'll edit and add more details.
Version 2 : (For first one, see edit changes)
Premises :
The tag containing the dynamic list will be called "the zone".
Each row of the list will be contained in another DIV which can contains anything.
A page is enough rows to cover the zone.
Three javascript "constants" : numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter
JavaScript variables to hold required data : rows[page#], heights[page#], currentPageNumber = 1, maxPageNumber = 0
page# : # is the page number
rows[page#] shall contains a way to get them back from database, not real DOM objects.
Steps / Events :
Add the zone tag.
Load numberOfLinesOnFirstLoad rows.
If total rows height inferior zone height multiplied by three, then load numberOfLinesToLoadAfter rows. Repeat step 3 if rows added, otherwise continue to step 4.
maxPageNumber +=1. Find the next rows that full fills the zone. Add those rows to rows["page" + maxPageNumber] (as an array). Calculate the height of those and add it in heights["page" + maxPageNumber].
Repeat step 4 until no more rows and then continue to step 6.
When scrolling down and page1 (which means last element of rows["page1"]) is not visible, add another below : page4.
maxPageNumber += 1. Load numberOfLinesOnPageLoad rows.
If total new rows height inferior zone height, then numberOfLinesToLoadAfter rows. Repeat step 8 if rows added, otherwise put total new rows height in heights["page" + maxPageNumber] and the new rows as array in rows["page" + maxPageNumber] and continue to the step after entering this one (so either 9 or 11).
Still scrolling down, if page2 is not visible, remove the page1 elements from DOM and adjust scroll position by removing page1.height (heights["page1"]).
Load page 5 (step 7 and 8).
So now, there is page2 to page5 in the zone which page2 and page5 are not visible. If page3 is fully visible, than page4 is not, otherwise a part of page3 and page4 are visible. (Just to indicate possibilities, but not important)
When scrolling up and page2 is starting to be visible (so last element of rows["page2"]), load page1 by using rows["page1"], add page1.height (heights["page1"]) to scroll position and remove page5 from DOM. Here you can either remove it from variables rows && heights and maxPageNumber -= 1, but you can also keep them so that reloading this page is done in one process (so loading a page would imply to check if page definition already exists in those variables).

using jquery to display words consecutively

I have a page that has 2 columns of words, 20 total, that are of a certain class (dim) and each a unique id. The ‘dim’ class defines the words as hidden. I have the following jQuery code running when I press a button:
$().ready(function()
{
var x = 20; // will be dynamic later :-)
$("#btn1").click(function()
{
for(i=1 ; i <= x ; i++)
{
//alert(i);
$(".dim").removeClass("hilite");
// this 'turns off' all the words
$("#wrd-"+i).addClass("hilite");
// this turns on the i'th word
}
});
});
When I uncomment the alert line I’m able to see that each word becomes visible and then hides again, just like it’s supposed to. The only problem is that it happens too fast. I want a way to make each loop wait a given number of nanoseconds. I’ve tried the setTimeout method but I can’t get it to do anything. Any idea how to slow this down? I’ve tried using .show and .hide but all the effects seem to happen at once.
My goal is to have the first word in column 1 display for 2 seconds. Then it goes away and word 1 in column 2 displays for 2 seconds. Then word 2 column 1, then word 2 column 2 and so on.
Thanks
You shouldn't need IDs like #wrd3 to step through the list of elements.
I haven't tailored the DOM selection for you, but this code will show and hide each item in a set, with a pause between. The interval in .fadeIn means the item will be showing for that about of time before the .fadeOut() function starts.
var things = $('.foo');
var index = 0;
things.hide();
var showHide = function() {
things.eq(index).fadeIn(2000,function(){
$(this).fadeOut(2000);
});
index++;
setTimeout(showHide,3000);
};
showHide();
Of course, you can change the fades to .show() and .hide(), or whatever other animation you want.

Categories

Resources