How can I set up my gallery pagination correctly?
I'm using this code below but when I change the page, leaves blank spaces and when I'm at the last gallery page and press the next page again, it goes to the first gallery page again.
I'm trying to use this Pagination but I don't know how to set up it, what should I put on ''#demo'' and on var html = template(data); to make the page pagination working on my gallery?
var start = 0;
var nb = 3;
var end = start + nb;
var length = $('.gallery img').length;
var list = $('.gallery img');
list.hide().filter(':lt('+(end)+')').show();
$('.prev, .next').click(function(e){
e.preventDefault();
if( $(this).hasClass('prev') ){
start -= nb;
} else {
start += nb;
}
if( start < 0 || start >= length ) start = 0;
end = start + nb;
if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
<img src="IMG_1.JPG" alt="IMG 1" width="auto" height="auto">
<img src="IMG_2.JPG" alt="IMG 2" width="auto" height="auto">
<img src="IMG_3.JPG" alt="IMG 3" width="auto" height="auto">
<img src="IMG_4.JPG" alt="IMG 4" width="auto" height="auto">
<img src="IMG_5.JPG" alt="IMG 5" width="auto" height="auto">
<img src="IMG_6.JPG" alt="IMG 6" width="auto" height="auto">
</div>
<div style="clear: both;"></div>
← Previous
Next →
Related
I have 4 image slideshows, and I am having trouble with the Javascript. I have given the div both an id and a class name. The class imageContainer is used in the CSS. Therefore I am using id for the Javascript, but it won't work. I can do this with one image slideshow, but I need to have multiple slideshows on the same page.
The HTML code below is not my actual code, it is just placeholder code I wrote to show what I want to achieve. The Javascript code, however, is my actual code.
I appreciate the help.
function openWin(url) {
aWindow = window.open(url, "Window 1", "width=400, height=400");
}
var numslides = 0,
currentslide = 0;
var slides = new Array();
function MakeSlideShow() {
container = document.getElementsById("Gallery");
for (i = 0; i < imgs.length; i++) {
if (imgs[i].className != "imga") continue;
slides[numslides] = imgs[i];
if (numslides == 0) {
imgs[i].style.display = "block";
} else {
imgs[i].style.display = "none";
}
imgs[i].onclick = NextSlide;
numslides++;
}
}
function NextSlide() {
slides[currentslide].style.display = "none";
currentslide++;
if (currentslide >= numslides) currentslide = 0;
slides[currentslide].style.display = "block";
}
window.onload = MakeSlideShow;
<h2>Gallery 1</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/100" />
<img class="img" src="https://via.placeholder.com/101" />
<img class="img" src="https://via.placeholder.com/102" />
<img class="img" src="https://via.placeholder.com/103" />
</div>
<h2>Gallery 2</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/106" />
<img class="img" src="https://via.placeholder.com/107" />
<img class="img" src="https://via.placeholder.com/108" />
<img class="img" src="https://via.placeholder.com/109" />
</div>
<h2>Gallery 3</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/110" />
<img class="img" src="https://via.placeholder.com/111" />
<img class="img" src="https://via.placeholder.com/112" />
<img class="img" src="https://via.placeholder.com/113" />
</div>
<h2>Gallery 4</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/114" />
<img class="img" src="https://via.placeholder.com/115" />
<img class="img" src="https://via.placeholder.com/116" />
<img class="img" src="https://via.placeholder.com/117" />
</div>
ID's must be unique, so, the best way to do this is get all galleries by their class name and start getting images from there. Note that slides is now a bidimensional array to hold gallery and images, something like:
slides[0] = [image100, image101, image102, image103];
I've added indexes for gallery and image to each picture using dataset propperty, so, you only need to know wich image was clicked instead of trying to get from currentslide. Also, numslides is provided from gallery length.
var slides = new Array();
function MakeSlideShow()
{
var containers = document.getElementsByClassName("imageContainer");
for(var x = 0; x < containers.length; x++) {
// Create gallery
slides[x] = new Array();
var imgs = containers[x].children;
for(var i = 0; i < imgs.length; i++) {
// Add image to current gallery
slides[x][i] = imgs[i];
// Set it's display, note that at least 1 images was added
if(slides[x].length == 1) {
imgs[i].style.display = 'block';
} else {
imgs[i].style.display = 'none';
}
// Add gallery and image info
imgs[i].dataset.gallery = x;
imgs[i].dataset.img = i;
// Add onclick event, but we need to send current image
imgs[i].onclick = function() {
nextSlide(this);
}
}
}
}
// This function needs to know wich img was clicked
function nextSlide(pic)
{
// Get gallery and image from dataset to know what to do
var gallery = pic.dataset.gallery;
var img = pic.dataset.img;
// Hide current image
slides[gallery][img].style.display = 'none';
// Search for next
img ++;
// No more images availabel, go to first
if(img == slides[gallery].length) {
img = 0;
}
// Show next image
slides[gallery][img].style.display = 'block';
}
window.onload = MakeSlideShow;
<h2>Gallery 1</h2>
<div id="Gallery1" class="imageContainer">
<img class="img" src="https://via.placeholder.com/100" />
<img class="img" src="https://via.placeholder.com/101" />
<img class="img" src="https://via.placeholder.com/102" />
<img class="img" src="https://via.placeholder.com/103" />
</div>
<h2>Gallery 2</h2>
<div id="Gallery2" class="imageContainer">
<img class="img" src="https://via.placeholder.com/106" />
<img class="img" src="https://via.placeholder.com/107" />
<img class="img" src="https://via.placeholder.com/108" />
<img class="img" src="https://via.placeholder.com/109" />
</div>
<h2>Gallery 3</h2>
<div id="Gallery3" class="imageContainer">
<img class="img" src="https://via.placeholder.com/110" />
<img class="img" src="https://via.placeholder.com/111" />
<img class="img" src="https://via.placeholder.com/112" />
<img class="img" src="https://via.placeholder.com/113" />
</div>
<h2>Gallery 4</h2>
<div id="Gallery4" class="imageContainer">
<img class="img" src="https://via.placeholder.com/114" />
<img class="img" src="https://via.placeholder.com/115" />
<img class="img" src="https://via.placeholder.com/116" />
<img class="img" src="https://via.placeholder.com/117" />
</div>
I have multiple containers with content blocks within them. I've got two a functions that activate by clicking on a button left or right of the container which will scroll it left or right. These two functions work fine for the first container but since I've got four more of these containers that I want to be able to scroll there has to be a simpler way to write these functions to be compatible with all five containers.
I could always copy and paste the same code four more times but that makes for very ugly and redundant code because the only thing that changes is the class of the container that has to be scrolled.
I'm hoping some more experienced front-enders would be able to help me rewrite these functions. I'm not as advanced of a coder so I'm struggeling coming up with a good solution.
Also another problem is that the functions that make the scrolling possible aren't entirely my own code. I found most of it online somewhere and only altered it slightly to make it work for my website. So I'm not exactly sure how all of these statements work, only roughly.
As a possible solution I thought maybe have an array that stores the class names of the containers and have them be pasted in where I do .querySelector to get the class. But sadly I couldn't get that to work the way I wanted it to.
<!-- example code -->
<div>
<h1>Container title</h1>
<div>
<button id="scrollLeft1" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight1" type="button">></button>
</div>
</div>
<div>
<h1>Container title 2</h1>
<div>
<button id="scrollLeft2" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight2" type="button">></button>
</div>
</div>
var buttonOne = document.querySelector("#scrollLeft1");
var buttonTwo = document.querySelector("#scrollRight1");
var buttonThree = document.querySelector("#scrollLeft2");
var buttonFour = document.querySelector("#scrollRight2");
function scrollRight() {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft += 10;
scrollAmount += 10;
if(scrollAmount >= 700){
window.clearInterval(slideTimer);
}
}, 5);
};
function scrollLeft() {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft -= 10;
scrollAmount += 10;
if(scrollAmount >= 700){
window.clearInterval(slideTimer);
}
}, 5);
};
buttonOne.addEventListener("click", scrollLeft);
buttonTwo.addEventListener("click", scrollRight);
buttonThree.addEventListener("click", scrollLeft);
buttonFour.addEventListener("click", scrollRight);
I have created a version of your code which should be reusable between the different containers and also left some comments for better understanding of what is going on.
// create an array with all buttons that scroll left
var leftScrollButtons = document.querySelectorAll("#scrollLeft1, #scrollLeft2, #other-btn-id, .other-btn-class");
// create another array with all buttons that scroll right
var rightScrollButtons = document.querySelectorAll("#scrollRight1, #scrollRight2, #other-btn-id, .other-btn-class");
// create a default configuration object
var configDefault = {
direction: 1, // use 1 for right, -1 for left
amount: 10,
interval: 5,
threshold: 700
}
// scrolling function will use the configuration object for the information that it needs
function horizontalScroll(configObj) {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft += configObj.amount * configObj.direction;
scrollAmount += configObj.amount;
if(scrollAmount >= configObj.threshold){
window.clearInterval(slideTimer);
}
}, configObj.interval);
}
// will iterate over every item of the array (all buttons) and add a click event listener to them
leftScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
var container = ev.currentTarget.parentElement.querySelector('.container');
// from the default configuration object, overrite what you need, in this case, the direction property
var configLeft = Object.assign({}, configDefault, {direction: -1, container: container});
horizontalScroll(configLeft);
debug("Scrolled left", container); // used only for the demo
}));
// will iterate over every item of the array (all buttons) and add a click event listener to them
rightScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
var container = ev.currentTarget.parentElement.querySelector('.container');
// from the default configuration object, overrite what you need, in this case, no need to overrite anything here
var configRight = Object.assign({}, configDefault, {container: container});
horizontalScroll(configRight);
debug("Scrolled right", container); // used only for the demo
}));
// only used for the demo
function debug(action, container) {
var actionSpan = document.querySelector('.action-span');
actionSpan.innerText = action;
var containerSpan = document.querySelector('.container-span');
containerSpan.innerText = container.parentElement.previousElementSibling.innerText;
}
<!-- to test the demo -->
<p>Last action: <span class="action-span"></span></p>
<p>Container: <span class="container-span"></span></p>
<!-- example code -->
<div>
<h1>Container title</h1>
<div>
<button id="scrollLeft1" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight1" type="button">></button>
</div>
</div>
<div>
<h1>Container title 2</h1>
<div>
<button id="scrollLeft2" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight2" type="button">></button>
</div>
</div>
Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.
Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>
This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />
Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/
I'm trying to learn Javascript from the book Head First Javascript (Morrison).
Inside the function findSeat(), the code is supposed to update the image to 'seat_select.png' for every seat that is available and then ask for a confirmation.
However, when I run the code, the images are updated immediately (as expected) only sometimes. Otherwise, the images are updated only after the loop has completed.
Why is this happening?
<html>
<head>
<title>Movie Ticket Finder</title>
<script type="text/javascript">
var seats = [ false, true, false, true, true, true, false, true, false ];
var selSeat = -1;
function initSeats() {
// Initialize the appearance of all seats
for (var i = 0; i < seats.length; i++) {
if (seats[i]) {
// Set the seat to available
document.getElementById("seat" + i).src = "seat_avail.png";
document.getElementById("seat" + i).alt = "Available seat";
}
else {
// Set the seat to unavailable
document.getElementById("seat" + i).src = "seat_unavail.png";
document.getElementById("seat" + i).alt = "Unavailable seat";
}
}
}
function findSeat() {
// If seat is already selected, reinitialize all seats to clear them
if (selSeat >= 0) {
selSeat = -1;
initSeats();
}
// Search through all the seats for availability
for (var i = 0; i < seats.length; i++) {
// See if the current seat is available
if (seats[i]) {
// Set the seat selection and update the appearance of the seat
selSeat = i;
document.getElementById("seat" + i).src = "seat_select.png";
document.getElementById("seat" + i).alt = "Your seat";
// Prompt the user to accept the seat
var accept = confirm("Seat " + (i + 1) + " is available. Accept?");
if (!accept) {
// The user rejected the seat, so clear the seat selection and keep looking
selSeat = -1;
document.getElementById("seat" + i).src = "seat_avail.png";
document.getElementById("seat" + i).alt = "Available seat";
}
}
}
}
</script>
</head>
<body onload="initSeats();">
<div style="margin-top:75px; text-align:center">
<img id="seat0" src="" alt="" />
<img id="seat1" src="" alt="" />
<img id="seat2" src="" alt="" />
<img id="seat3" src="" alt="" />
<img id="seat4" src="" alt="" />
<img id="seat5" src="" alt="" />
<img id="seat6" src="" alt="" />
<img id="seat7" src="" alt="" />
<img id="seat8" src="" alt="" /><br />
<input type="button" id="findseat" value="Find Seat" onclick="findSeat();" />
</div>
</body>
</html>
EDIT: Based on Oleg Yudovich's answer, this is what I added to my code. Now everything works as expected!
<div style="display: none">
<img id="seat_unavail" src="seat_unavail.png" alt="" />
<img id="seat_avail" src="seat_avail.png" alt="" />
<img id="seat_select" src="seat_select.png" alt="" />
</div>
Once you include new image in your html, your browser is download this image and put it to cache, before displaying.This process is take time. If your images is big size, is take more time. So you can solve your problem by caching images before your loop is start running :
<div style="display:none;">
<img id="seat0" src="some image source" alt=""/>
<img id="seat0" src="some image source" alt=""/>
<img id="seat0" src="some image source" alt=""/>
<img id="seat0" src="some image source" alt=""/>
<img id="seat0" src="some image source" alt=""/>
<img id="seat0" src="some image source" alt=""/>
</div>
This hidden block,if you put him on your site start page, will load all images into browser cache.
I created a image loop by using jquery and it works fine. Here is my code.
$(document).ready(function(){
$('.images').hide();
$('#image1').show('slide', {direction: 'right'}, 500);
$('#image1').delay(2000).hide('slide', {direction: 'left'}, 500);
var sc = $('#image img').size();
var count = 2;
setInterval(function(){
$('#image'+count).show('slide', {direction: 'right'}, 500);
$('#image'+count).delay(2000).hide('slide', {direction: 'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 3000);
$('.name').click(function(){
var name = $(this).attr('id');
name = name.replace('name', '');
count = name;
});
});
Here is the html code.
<div id="image">
<img class="images" id="image1" alt="Image loop" src="image1.jpg" width="550px" height="400px"/>
<img class="images" id="image2" alt="Image loop" src="image2.jpg" width="550px" height="400px"/>
<img class="images" id="image3" alt="Image loop" src="image3.jpg" width="550px" height="400px"/>
<img class="images" id="image4" alt="Image loop" src="image4.jpg" width="550px" height="400px"/>
<img class="images" id="image5" alt="Image loop" src="image5.jpg" width="550px" height="400px"/>
</div>
<div id="name">
<div class="name" id="name1">
<img src="image1.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name2">
<img src="image2.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name3">
<img src="image3.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name4">
<img src="image4.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name5">
<img src="image5.jpg" width="80px" height="80px"/>
</div>
The css controls the name sets to the right. My idea is, click the small image on the right to immediately switch the image which user choose.
It seems working a little bit. The setInterval is still runing and the loop is ruined. How can I deal with this properly? Here is the jsfiddle link. Thanks!
You can stop setInterval from running with clearInterval. Specifically, you need to call it on the return value of setInterval.
var interval = setInterval(...
clearInterval(interval);
EDIT: this doesn't apply directly to your problem. What you can do is just create a separate function that does the callback to setInterval. Then, also call that function as part of the callback to the click event. Whether you want to clear the interval or not (halt the animation) is up to you.
The problem occurs because you change the type of count from a number to a string inside your click handler - when you assign name to count. I've edited your code to include parseInt.
$('.name').click(function(){
var name = $(this).attr('id');
name = name.replace('name', '');
count = parseInt(name, 10);
});
Here's a simple working example
var interval;
var times;
function doSomething() {
if (times == 100) {
// Unset the interval:
clearInterval(interval);
} else {
alert("Hey");
times++;
}
}
// Initialize interval:
interval = setInterval(doSomething, 1000);