Seeking assistance with an angularjs issue as a newcomer to the platform. Building a photo gallery where the initial page displays thumbnail photos from twitter and instagram using ng-repeat loop. Hovering over an image fades it out, revealing a button for users to click, triggering a light box overlay with the full-size image. The latest version can be viewed online: . Below is the code snippet. Successfully developed the thumbnail display but facing challenges with the light-box feature, where only the first image in the collection appears regardless of which one is clicked. This seems to stem from an issue within ng-repeat loop. Images are stored in each object under mainImage.url, accessed through x.mainImage.url in the loop. Questioning why it's not functioning correctly and any assistance would be appreciated.
<style>
* {
box-sizing: border-box;
font-family: sans-serif;
}
h1,
h2{
margin-left:10px;
}
.outer-wrapper{
overflow: hidden;
}
.inner-wrapper{
display:inline-block;
vertical-align:top;
padding:5px;
position:relative;
}
...
// AngularJS module, controller, and API calls
</script>