launch active link in pop-up dialog

I'm currently working on an Instagram iframe that fetches 9 random images with href links for pictures and spans with the same background. My goal is to display these images in a popup gallery. I've tried using Bootstrap for the popup, but I'm encountering an issue where only the first or last picture opens in the popup.

<a data-toggle="modal" data-target="#myModal1" href="'.$thumbnail.'" class="image"><span style="background-image:url('.$thumbnail.');">&nbsp;</span></a>

<div id="myModal1" class="modal fade" role="dialog" style="overflow-y: hidden;">
<div class="modal-dialog">
<a href="" class=""><div id="pic" class="modal-content" style="background-image:url('.$thumbnail.'); ></div></a>' 
</div>
</div>

Any suggestions or solutions would be greatly appreciated!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Success!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css">
</head>
<body>

<a data-toggle="lightbox"  href="'.$thumbnail.'" class="image"><span id="" style="background-image:url('.$thumbnail.');">&nbsp;</span></a>

<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
});
});
});
</script>
</body>
</html>

Check out the demo[

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

Getting the Value of my Latest Selection in Bootstrap Multiselect

I have a question regarding the following code snippet: <select name="department" id="department-list" class="form-control" onChange="getTeams3(this.value);" multiple> <option value="MONGOOSEAHOY" selected>All departments</option> &l ...

jquerytwitter-bootstrap

Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax. \class{mathjaxCursor}{\text{_}} ...and here is the accompanying css: .mathjaxCursor { font-weight: bold; background-color: red; } This setup results in the following display: ...

htmlcssmathjax

Looking to identify the type of a adorned class in Typescript?

Consider the following scenario: return function IsDefined(object: any, propertyName: string) { .... ] We then go ahead and decorate a property like this: class Test { @IsDefined() p1: String = ""; } Now, when we execute a test inside the ...

javascripttypescriptmocha.jschaitypescript-decorator

Creating Your Own Image Hosting Website: Learn how to consistently display an HTML file with a specific image from the URL

I'm currently in the process of developing my own image hosting site at Everything is functioning as intended, but I am looking to make a change. Currently, when a shared image link is opened, it only displays the image. However, I would like it to ...

javascripthtmlregex.htaccess

Background positioning outside the container

Currently, I am in the process of constructing a website using wordpress. The theme has a predetermined width for all pages within a container. My goal is to confine the text within this container's width while extending the background of the <div& ...

htmlcsswordpress

"Enhance your images with dynamic captions using jQuery

Struggling to create an image caption that only appears when hovering over the specific image? Not sure how to select the correct object? The caption is working, but it's appearing for all images at once. I have attempted to target a single image wit ...

jqueryhtmlcss

Pattern without anything to duplicate

Could someone help me figure out what I'm doing wrong with this regular expression? I need to create a regex that matches phone numbers in three specific formats: "+38 (093) 937-99-92", "093 937 99 92", and "(093) 937 99 92". As I started working on ...

javascriptregex

Bootstrap grid button with maximum flexibility

I am currently exploring the intricacies of the bootstrap grid system. My goal is to create a set of buttons that look like this: https://i.sstatic.net/V5meG.png Each button should expand to fill the width and height of its container. However, when a b ...

htmlcssbootstrap-5

Combining Jquery Ajax with a Spring Boot controller results in the modification of dates

I am encountering an issue with my Ajax call: $.ajax({ type : 'GET', headers : { Accept : "application/json; charset=utf-8", "Content-Type" : "application/json; charset=utf-8" }, url : ...

javajqueryjsonajaxspring-boot

The Reactjs infinite scroll feature continuously displays fresh data

Every time I scroll, my data is always rendering on page 2 and page 1 disappears, and the items.concat function is not working properly. My fetch data code looks like this: const FetchUrl = async (p) =>{ const Url = await fetch(`api-link=${p}`); ...

javascriptarraysreactjsconcatenationnext.js

Loading a div when the page loads

Is there a way to load an action automatically when the page loads? I'm currently working with struts2 and jquery. I need to retrieve all the comments related to a specific element called commentOn. To achieve this, I am sending the value of commen ...

jqueryajaxstruts2

Simple steps for importing JS files in a web application

Upon examining the code snippet below: const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const cors = require('cors'); app.u ...

javascriptnode.jsexpress

Creating a Mui v5 grid item that maximizes its height within a dialog box

I need help setting the height of a Grid Item to occupy all available space in a MUI dialog. In the image below, I am trying to make the Left Side Panel, Main section, and Right Panel extend to fill the orange-colored dialog space. https://i.sstatic.net/ ...

cssreactjsmaterial-uigridmui-x-data-grid

Shifting HTML table in Javascript by toggling checkboxes

When I click the checkbox, the table elements are not displaying inline. I am simply hiding the class "box". Do I need to write a special format? By default, the elements are displayed inline but when I check the checkbox, they shift. The column 'Stat ...

javascripthtmljquerycss

The arrangement of elements varies based on the type of display

I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen. What could be causing this issue, ...

htmlcss

Performing code execution in MVC 5 View every 1 second

I am currently working on a MVC 5 web application and I have a question regarding performing real-time calculations in the view. Below is an example of my view code: var timeRemaining = Model.account.subscriptionEndDate - DateTime.UtcNow; Is there a way ...

htmldatetimerazorasp.net-mvc-5asp.net-mvc-views

Challenge with timing in slideUp and slideDown animations (jQuery)

The element with the class "heady" is designed to slide up when the document height percentage is below 25%. If you scroll back up, it should reappear after a delay of 1400ms. The problem arises when this action needs to repeat, as the class does not sli ...

javascriptjquerydelayslidedownslideup

Tips for preloading a small placeholder image before the main content is loaded

After browsing , I noticed an interesting image loading style. The website initially shows a patterned image before revealing the actual content. This method creates visually appealing content while waiting for the entire webpage to load. Upon inspecting ...

javascripthtmlcssimageload

ensure that angular's ng-if directive sets aside space to display content when triggered by an event

I'm facing an issue with my modal form setup where if a text-field is left blank, a label saying "it is required" is generated below the field, causing the "Proceed" button to move (along with all other elements below it). How can I make sure that DOM ...

javascriptjquerycssangularjs

I am unsure about how to properly implement the reduce function

I am struggling with implementing the reduce function in my code. I have data output from a map function that consists of two documents. For example, one document contains: key "_id":"AD" "values" { "numtweets" : 1, "hastags" : ...

javascriptjsonmongodbmapreduce