When the fullscreen modal is opened, the initial image displayed is not the same as the one that was clicked on

Seeking assistance: I've been struggling with a problem for quite some time now and could really use some help from you guys.

My issue involves an 'AngularJS' webapp that retrieves posts from an 'FB page' via 'OpenGraph' in JSON format. It then displays these posts as cards containing images and text, which users can scroll through. Currently, the app is set up to display 10 cards successfully, but there's one hiccup - when a user clicks on an image within a card, it always redirects them to the first image. From there, they can navigate through the rest of the images.

I'm looking to change this behavior so that clicking on an image will bring up that specific image instead of the first one. Can anyone provide guidance on how I can achieve this? :)

The 'JSON' data returns a 'data array' consisting of 10 sets of data.

Here is the function responsible for loading the image in the modal, currently set to '0' indicating the first picture:

  $scope.openModal = function() {
  $ionicSlideBoxDelegate.slide(0);
  $scope.modal.show();
  };

I would appreciate any insights on how I can modify this to show the clicked picture instead.

If you'd like to see a demo, please leave your email for an invite to view the app using 'Ionic View'.

Full code provided below:

... (complete code not shown for brevity)

Answer №1

To successfully use the openModal() function, make sure to pass a parameter from the view like so:

View

<div class="modal image-modal transparent" ng-click="closeModal($index)">

Then, in your openModal function in the controller, handle the parameter as shown below:

Controller

$scope.openModal = function(index) {
  $ionicSlideBoxDelegate.slide(index);
  $scope.modal.show();
};

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

I am having trouble making an HTTP GET call to my API using AngularJS

I'm currently working on a Web Application and have encountered an issue with making HTTP GET calls from Angular to my API. The strange thing is that I've tested my API in both the browser and Postman (using Chrome) and it works perfectly fine. T ...

Click to remove the ellipsis from the backbone

Some Background Info I am working on creating a feed similar to Twitter where each row expands on click to show more information. The data is fetched from a JSON file sent from the backend to the frontend, and I am using Backbone.js for rendering. My fee ...

Role="presentation" containing a <form> element within

<nav> <ul class="nav nav-pills pull-right"> <li role="presentation"> <form action="/logout" method="POST" id="logout-form"> <a href="#" onClick="document.getElementById('logout-form&ap ...

The <iframe> generated by Create-React-App often hinders my ability to interact with or modify the application directly, requiring me to remove it using the browser's element editor

After conducting a global installation of create-react-app, I encountered an issue where instead of editing the rendered content directly in the browser while working on a project, there is a mysterious container created around my app. Upon closer examina ...

Material UI does not support the inline attribute for applying CSS properties

Trying to adjust the CSS for Material-UI When setting the width, everything works fine. However, when attempting to set display inline, an error occurs ---> "inline is not defined" Can anyone provide guidance on how to resolve this issue? Sharing my cod ...

Can we incorporate various CSS libraries for individual components on our React site?

Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

I am looking to keep another div displayed when hovering over it - in this example, it says "hello." The div I want to remain visible is not a child element of the main div where I initiate the hover event. document.write("<base href=\"" + docum ...

AngularJS: Utilizing angular-filter for grouping by two columns

I may come across as a bit confusing, so please allow me to clarify. Note: An operational piece of code (POC) has been included with this post. I have an array of objects with 3 properties: name name team team_rank $scope.players = [ {name: & ...

CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...

Building a Loading Bar with Two Images Using JavaScript and CSS

I am currently experimenting with creating a progress bar using two images: one in greyscale and the other colored. My goal is to place these two divs next to each other and then adjust their x-position and width dynamically. However, I'm having troub ...

How can you alternate a button's text using jQuery?

Seeking advice on jQuery and Javascript: Take a look at this HTML snippet: <div class="quandoo-widget" id="quandoo-booking-widget"></div> <script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"& ...

JavaScript Drag Events in Microsoft Edge (Including IE)

My drag event is functioning properly in Chrome, Safari, Firefox, and Opera. However, I encountered an error when running it on Microsoft Edge and IE: SCRIPT438: Object doesn't support property or method 'setDragImage' Below is the code sn ...

Identify and click on the child span within the li element using Cypress

I am struggling to select a li element and click/check on the span with the checkbox class, but I can't seem to make it work. Here is what I have attempted: <div id="list-widget"> <ul class="tree"> <li class ...

Exclude React Native module and import web module in Webpack

Currently, I am facing a challenge in my project where I need to alias a different package specifically for a webpack configuration. The issue revolves around the VictoryJS library (link: https://formidable.com/open-source/victory/). In my React Native app ...

ASP.NET Core 3.1 dynamic image resizing

<div class="col-md-6"> <div class="border"> <img height="300" width="400" src="~/Images/vg.png" class="rounded"/> <p>This is a sample paragraph.</p&g ...

I want to design a bootstrap row with two col-**-6 columns, and within the second col-**-6, I want to add another two columns so that they stack on top of each other

I've managed to get it working to some extent, but I still need the col-**-6 elements to not stack on top of each other on smaller screens. This image shows what I'm aiming for: Each color represents a col-**-6. That's the layout I want, ...

Combine the arrays to utilize ng-repeat

I'm working with several arrays and I need to display them in a table using ng-repeat. Is there a way to combine arrays like name=[name1, name2] and type=[type1, type2] into a single array data=[..] so that I can use ng-repeat for data.name and data.t ...

Using Google fonts offline: a step-by-step guide

Is it possible to download Google fonts and link them offline for a localhost webpage? ...

How to add rows at a particular index within another row using ng-repeat

Check out this code snippet: <tr ng-repeat="param in tags[$index].parameters"> <td class="previewParamName">{{param.name}}</td> <td> <div ng-if="is_array(param)"> &l ...

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...