Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it:

$(".selection_thumb").each( function(i) {
    $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++i)+".jpg'><img src='img/folder/"+(++i)+".jpg' alt='alttext' /></a>");  
});

However, the issue is that it is loading like this:

<a data-lightbox="image-1" href="img/folder/folder/1.jpg"><img src="img/folder/2.jpg" alt="alttext" /></a>

Instead of how it should be:

<a data-lightbox="image-1" href="img/folder/folder/1.jpg"><img src="img/folder/1.jpg" alt="alttext" /></a>

It seems to be loading different numbers 1 and 2 instead of 1 and 1.

Any assistance would be greatly appreciated

javascriptjqueryhtmlcssforeach

Answer №1

It is important to remember to use i++ instead of ++i because they operate differently.

Using ++i will return the value of i after it has been incremented, while i++ returns the value of i before incrementing.

Referenced from What's the difference between ++i and i++ in JavaScript

Answer №2

Attempt this:

let cache = null;

$(".selection_thumb").each( function(index) {
    cache = ++index; 
    $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+ cache +".jpg'><img src='img/folder/"+ cache +".jpg' alt='alt text' /></a>");  
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to invoke a class method from the HTML that is specified within its constructor function?

class Welcome { constructor() { this.handlePress = this.handlePress.bind(this); this.htmlContent = `<a onclick="this.handlePress">Link</a>`; } handlePress(e) { console.log('planet'); } } The HTML structure appears ...

javascripthtmlclassconstructorevent-handling

Ways to hear a variable using Google Translate

We're utilizing HTML5 and Javascript. Imagine we have a list containing the names of all players from Barcelona (for example, name = 'Lionel Messi'). I want to make the player's name audible. To achieve this, I would use: var narrator ...

javascripthtml

Troubleshooting: Wordpress Ajax call failing with 500 Internal Server Error

Dealing with Ajax calls in a custom page template on Wordpress can be more complex than expected. I've struggled to get it running smoothly without crashing my entire site. It's puzzling why this particular approach is necessary when other Ajax c ...

phpjqueryajaxwordpressinternal-server-error

Scrolling the Ionic framework to a position below zero

My ion scroll is synchronized with another component for scrolling. I achieve this by using the function scroll1.scrollTo(left, top, false); Unfortunately, this function does not allow scrolling to a negative position, such as scroll1.scrollTo(left, -50, ...

javascriptangularjsionic-framework

Can the image upload file size be customized or adjusted?

Recently, I've come across a standard input file code that looks like this: <Label class="custom-file-upload"> <input type="file" onChange={onDrop} /> Upload Photo </Label> I have been thinking about limiting the size of the ...

javascriptreactjsfilefile-upload

Bootstrap allows you to create a responsive grid

I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...

htmlcssbootstrap-4

Tips for updating content (wishlist) without the need to refresh the page

Currently experimenting with the TMDb API to enhance my PHP skills. I've successfully created a wishlist feature and now looking to optimize the script. A function is implemented on each movie page for adding movies to the wishlist. function getButt ...

javascriptphpjquery

I'm having trouble managing state properly in Safari because of issues with the useState hook

Encountering Safari compatibility issues when updating a component's state. Though aware of Safari's stricter mode compared to Chrome, the bug persists. The problem arises with the inputs: Whenever an option is selected from the dropdown, it cl ...

javascriptreactjstypescriptecmascript-6

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

javascriptjqueryhtml

Pinterest Style Card Layout using React-Semantic-UI

Utilizing semantic-ui-react in React, I am working on displaying cards with varying heights based on the amount of text. I am aiming for a pinterest style layout where each card's height adjusts according to the content it contains. .... <Card.Co ...

cssreactjssemantic-uisemantic-ui-react

Display conceal class following successful ajax response

Upon clicking the button, the following script is executed: $.ajax({ url: "<?php echo CHILD_URL; ?>/takeaway-orders.php", type: 'POST', async:false, data: 'uniq='+encodeURIComponent(uniq)+'&menu_id=' ...

javascriptphpajax

There seems to be a complete absence of rendering in this particular vue

Upon initializing a fresh Vue project using Vue CLI 3 and removing all default views and components, I proceeded to add two new views. To my surprise, these views did not render when changing the URL; instead, I was met with a blank page and no error messa ...

javascriptvue.jsvuejs2vue-router

Error: It seems like Material UI has updated their export structure and now `makeStyles` is no longer available in the

The export of makeStyles from @mui/material/styles has been deprecated. Despite importing from @mui/styles throughout my project, this error continues to appear. I have already tried removing the node_modules folder and reinstalled, but the issue persis ...

javascriptreactjsnpmmaterial-ui

Vue.js does not support animation for the Lodash shuffle function

I'm having trouble getting the lodash's shuffle method to animate properly in Vue.js. I followed the code from the documentation, but for some reason, the shuffle occurs instantly instead of smoothly. When I tested the animation with actual item ...

javascriptvue.js

Using React for form validation

I'm facing a challenge while trying to develop a user registration form, especially when it comes to displaying form validation errors. Issues: 1) The input fails to post (via axios) to the database upon submission for inputs without errors. 2) The e ...

javascriptreactjsexpressvalidationaxios

Can a JavaScript framework be created to ensure all browsers adhere to standards?

As someone who isn't an expert in JavaScript, I wonder if it's feasible to create a comprehensive embeddable JavaScript file that ensures all browsers adhere to standards. Could there be a compilation of known JavaScript hacks that compel each br ...

javascriptcssdomstandards

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

javascripthtmlpassword-protection

A step-by-step guide on creating a chainable command in Cypress

Imagine having a variable called username. Now, consider a chainable function that needs to verify whether the username is empty or not. Original Method: if(username !== "") { cy.get('#username').type(username) } Expected Outcome: ...

javascriptnode.jstestingnpmcypress

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

csshtmlmasking

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

htmlcss