Using JavaScript to create a paging system for a gallery of images with a maximum number

Question

Using JavaScript to create a paging system for a gallery of images with a maximum number

Let me explain my current setup: I have an image gallery on my website displaying 10 images at a time along with a pagination bar. These images are populated using a loop that iterates over a JSON file. It's all working smoothly so far!

The code looks something like this: for i=0; i <10; i++ create div with styles and images[i].image;

Now, my query is: I'm looking to show the next set of 10 images on page 2. So, when a user clicks on page 2, they should see images numbered from 11 to 20. I stumbled upon the jQuery plugin called 'Jpaginate'... Do you think this plugin can help me achieve that? Could someone guide me on how to approach this using variables, counts, and objects?

Appreciate your assistance, Mike

javascript json pagination

Answer 1

Answer №1

Here is an example of how you can tackle this problem. While it may not be perfect, the concept is what's important. Take some inspiration from this and work towards your goal.

var imgSrc = "https://s-media-cache-ak0.pinimg.com/236x/36/a5/7b/36a57b0f0ab16e885fcc230addb695c2.jpg";
var json = [];
for (var i = 0; i < 36; i++)
  json.push({
    Title: "Title " + (i + 1),
    Source: imgSrc
  });

/*
For simplicity, I'm creating an array with 36 objects (3x3 gallery)
with 9 images per page
*/

var pageLimit = 9;
var page = 1;

showImages();

$("#btnPrevious").click(function() {
  if (pageLimit <= 9) {
    pageLimit = 9;
    page = 1;
  } else {
    page--;
    pageLimit -= 9;
  }
  showImages();
});

$("#btnNext").click(function() {
  if (pageLimit >= json.length) {
    pageLimit = json.length;
  } else {
    page++;
    pageLimit += 9;
  }
  showImages();
});

function showImages() {
  $(".images").empty();
  for (var i = pageLimit - 9; i < pageLimit; i++) {
    var template = $("<div></div>").addClass("template");

    var img = $("<img>");
    img.attr("src", json[i].Source);
    img.attr("alt", json[i].Title);

    var br = $("<br/>");

    var title = $("<span></span>").html(json[i].Title);

    template.append(img).append(br).append(title);

    $(".images").append(template);
  }
  $("#page").html("Page " + page);
}

.gallery {
  width: 100%;
  height: 500px;
  border: 1px solid black;
  background-color: lightgray;
  text-align: center;
}
.images {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  margin-bottom: 15px;
}
img {
  height: auto;
  width: 33%;
  margin: 20px 5px;
}
.template {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="images"></div>
  <button id="btnPrevious">
    &lt; Previous
  </button>
  <span id="page"></span>
  <button id="btnNext">
    &gt; Next
  </button>
</div>

Please ignore the CSS as it was quickly put together. If anyone skilled in CSS could improve it, that would be awesome. Maybe a question within a question?

Answer 2

Here is an example of how you can tackle this problem. While it may not be perfect, the concept is what's important. Take some inspiration from this and work towards your goal.

var imgSrc = "https://s-media-cache-ak0.pinimg.com/236x/36/a5/7b/36a57b0f0ab16e885fcc230addb695c2.jpg";
var json = [];
for (var i = 0; i < 36; i++)
  json.push({
    Title: "Title " + (i + 1),
    Source: imgSrc
  });

/*
For simplicity, I'm creating an array with 36 objects (3x3 gallery)
with 9 images per page
*/

var pageLimit = 9;
var page = 1;

showImages();

$("#btnPrevious").click(function() {
  if (pageLimit <= 9) {
    pageLimit = 9;
    page = 1;
  } else {
    page--;
    pageLimit -= 9;
  }
  showImages();
});

$("#btnNext").click(function() {
  if (pageLimit >= json.length) {
    pageLimit = json.length;
  } else {
    page++;
    pageLimit += 9;
  }
  showImages();
});

function showImages() {
  $(".images").empty();
  for (var i = pageLimit - 9; i < pageLimit; i++) {
    var template = $("<div></div>").addClass("template");

    var img = $("<img>");
    img.attr("src", json[i].Source);
    img.attr("alt", json[i].Title);

    var br = $("<br/>");

    var title = $("<span></span>").html(json[i].Title);

    template.append(img).append(br).append(title);

    $(".images").append(template);
  }
  $("#page").html("Page " + page);
}

.gallery {
  width: 100%;
  height: 500px;
  border: 1px solid black;
  background-color: lightgray;
  text-align: center;
}
.images {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  margin-bottom: 15px;
}
img {
  height: auto;
  width: 33%;
  margin: 20px 5px;
}
.template {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="images"></div>
  <button id="btnPrevious">
    &lt; Previous
  </button>
  <span id="page"></span>
  <button id="btnNext">
    &gt; Next
  </button>
</div>

Please ignore the CSS as it was quickly put together. If anyone skilled in CSS could improve it, that would be awesome. Maybe a question within a question?

Answer 3

Answer №2

To customize your pagination feature, consider developing your own plugin. Make sure to keep track of the current page and update your factory accordingly.

For instance, you can iterate through a range of items on the current page by using a loop like: for i=current_page * count_per_page; i < count_per_page * (current_page + 1); i++, generate a div with corresponding styles and images[i].image;

Answer 4

To customize your pagination feature, consider developing your own plugin. Make sure to keep track of the current page and update your factory accordingly.

For instance, you can iterate through a range of items on the current page by using a loop like: for i=current_page * count_per_page; i < count_per_page * (current_page + 1); i++, generate a div with corresponding styles and images[i].image;

Using JavaScript to create a paging system for a gallery of images with a maximum number

Answer №1

Answer №2

Similar questions

The event.target.x attribute on the <i /> tag element

Can you tell me what that sequence of characters is at the conclusion of a styled-component?

Constructing an Http Post URL with form parameters using the Axios HTTP client

Creating a 2-dimensional array using Json in C# MVC: A step-by-step guide

Is it impossible to run a node.js application as a background service using npm-windows on Windows operating system?

Using Fullcalendar Moment to retrieve the current time plus an additional 2 hours

Tips for creating and saving an executable file using data obtained from a server

JavaScript error type mismatch

There was an unhandled type error stating that "undefiened" is not a function while processing a JSON

Tabulator automatically inserted 'numrow' after retrieving the data

Retrieve the element by its Id for precise targeting on a particular webpage

What is the method for setting the height of a CSS grid item and aligning a grid item to a specific side?

Is there a method to obtain the image path in a similar manner to item.src?

Tips on how to trigger the function upon receiving the response value by concurrently running two asynchronous functions

Python script encounters KeyError while accessing IPify VPN Checker API

How can I show name and value pairs as columns in SQL Server?

The OnClick function seems to be unresponsive, however, there are no error messages displaying in

How to Eliminate the Hashtag from the URL in AngularJS Version 1.x

PHP and jQuery: Using 1 Query to Retrieve Multiple JSON Strings and Looping Through Them to Populate a Multiselect

What is the best way to make message properties accessible to the public while also being able to access them within a web