Having trouble with the image slider on JQuery? It seems to be stuck on the first image instead of displaying the one you

As a beginner in JQuery, I am trying to achieve a functionality where an image displayed on a website can be selected on mouse click, and a popup slider containing that image is shown.

I have managed to make it work, but when clicking "next" in the slider, it always starts from the first image instead of showing the next one.

Here is my code:

http://jsfiddle.net/MT7Ag/

    var currentPosition = 0;
    $('#btnNext').click(function() {
        // Copying the selected image to the placeholder
        $('#mimg').attr('src', $('.images .display').eq(currentPosition).attr('src'));
        currentPosition++;
        if(currentPosition == $('.images .display').length) {
            currentPosition = 0;
        }
    });

Issue: When clicking "Safari", it should display the next image, but it always shows "Firefox" (the first one).

Can anyone provide assistance with this problem?

javascriptjqueryhtmlcss

Answer №1

Starting at 0, your position will display the first image even if you click on safari. To update myPos according to the clicked image, use the jquery index function.

$('.display').click(function() {
            myPos = $('img').index(this)+1;
            var sr=$(this).attr('src');
            $('#mimg').attr('src',sr);
          $('#myModal').show();
            $('.modal').show();
        });

http://jsfiddle.net/MT7Ag/1

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

Each time I perform an INSERT operation, I momentarily lose the structure property of my datatable

gif image for reference https://i.sstatic.net/MiWL4.gif I encountered an issue when adding a new record to the data table. I have included a gif image for better understanding. Below is my display function: function display_record() { table = $(&apo ...

jqueryjsonajaxdatatables

Determine the array with the highest value by comparing multidimensional arrays in JavaScript

I have a multidimensional array with names and corresponding integer values. I want to compare the integer values within each nested array to find and return the one with the highest value. var nums = [ ['alice', 'exam', 60], [ ...

javascriptarraysmultidimensional-array

Is there a way to achieve this using JavaScript?

There is a specific text that I want to modify using JavaScript. Within the opening and closing p tags, I would like to remove two characters from the end. Is there a way to achieve this with JavaScript? <p>text</p> ...

javascripthtmltexttags

Accordion checkbox with dynamic features

Currently, I am dynamically populating data into a jQuery accordion. My goal is to include a checkbox just before the <h2> text. <div id="checkbox"> <h2> <span> <input type="checkbox" class="mycheck" value="apple" / ...

javascriptjqueryhtmljquery-ui

Guide on validating an input field with an array type name using the jquery.validate.min.js plugin

I am dealing with input tag fields that each have a name attribute within an array. For example: <div class="form-group"> <label class="col-sm-2 control-label"> <span style="color: red;">*</span> Title</label ...

jqueryinputjquery-validate

What is the most efficient method in Jquery to retrieve the contents of the third column in a row within an HTML table?

Recently, I encountered a situation where I needed to extract the first value from an HTML table using some code. var firstNameinFirstCol = $(this).parents('tr:first').find('td:first').text(); While this approach was successful, I now ...

jqueryhtmlhtml-table

Unable to retrieve the numerical value within the chart

I am a beginner in learning angularjs. I have implemented a contextmenu for displaying table data. <div contextmenu-container="meta.contextmenu"> <table class="table table-striped table-bordered report-table" fixed-header> ...

javascriptangularjsarrays

An error occurred while trying to initialize the ui.bootstrap.demo module in AngularJS

Currently, I am in the process of learning angularjs and have encountered a roadblock. An error keeps popping up: ncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: Error: [$injector:nomod] Module 'ui.bootstr ...

javascriptangularjs

Positioning html images to overlap each other without losing the ability to click

Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com ...

javascripthtmlcsspositioncss-position

Vue3 does not support parameter assignment

I am working on creating a function that takes two parameters, a string and an array. The array is meant to be filled with data obtained from Axios. However, I am encountering the issue {'assignment' is assigned a value but never used.}. My goal ...

javascripttypescriptvue.js

When hovering over the image, it enlarges and gradually becomes transparent, unveiling the hidden text beneath

I've been struggling to achieve the desired effect for quite some time now, putting in hours of effort without success. Essentially, I am aiming to create a div that showcases an image. When the mouse hovers over the image, it should zoom in and fade ...

htmlcss

The Art of Typewriter Magic

Why is the output of the first code block just 'T' repeated, whereas the second block of code works as expected? function typeWriter() { var i = 0, txt = 'Testing', speed = 40, typed = document.getElementById('typewriter&a ...

javascript

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...

cssreact-bootstrapbootstrap-5

Utilizing AngularJS to Retrieve URL Parameters Within a Controller

I am attempting to retrieve URL parameters in my controller: Although I came across this example, I encountered an error that appears to be connected to the loading of necessary modules. app.controller('WidgetCtrl', ['$scope', '$ ...

javascriptangularjsurlurl-parameters

Discover the possibilities of Bootstrap4 CSS and JS Components across various namespaces

Is there a way to add prefixes to each Bootstrap class in CSS and JS files to prevent name collisions within a Bootstrap4 SCSS-based build? I attempted using the bootstrap namespace prefixer tool found at https://github.com/faucamp/bootstrap_namespace_pre ...

cssbootstrap-4

Is it possible to define key strings as immutable variables in JavaScript/Node.js?

Having transitioned from the world of Java to working with Node.js + AngularJS for my current project, I have encountered a dilemma. There are certain "key Strings" that are used frequently in both client and server-side code. In Java, it is common practi ...

javascriptangularjsnode.js

Tips for aligning content in the Login Screen of Framework7?

I've been working on a cross-platform mobile application with Framework7. For the login screen, I followed a tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm Here is the code snippet of my index.html with the login m ...

htmlcsscordovahtml-framework-7

Guidelines for manipulating SVG elements using the Bobril framework

I'm looking to animate the movement of an SVG circle based on mouse input in bobril. Which lifecycle component method should I utilize for this task? I've experimented with onPointerDown, but it seems to only respond to events within the circle i ...

javascriptsvgtypescriptsingle-page-applicationbobril

Unable to properly zoom in on an image within an iframe in Internet Explorer and Google Chrome

My image zoom functionality works perfectly on all browsers except for IE and Google Chrome when opened inside an iframe. Strangely, it still functions flawlessly in Firefox. How can I resolve this frustrating issue? The image link was sourced from the i ...

javascriptcssgoogle-chromeinternet-exploreriframe

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...

javascriptjquerycssjquery-uijquery-ui-dialog