I have an instagram iframe that get 9 random images with href links (for pictures) and span with same background. So I would like to open it in popup like gallery.
I use the Bootstrap for popup, but there is only first one or last one picture open in popup.
<a data-toggle="modal" data-target="#myModal1" href="'.$thumbnail.'" class="image"><span style="background-image:url('.$thumbnail.');"> </span></a>
<div id="myModal1" class="modal fade" role="dialog" style="overflow-y: hidden;">
<div class="modal-dialog">
<div id="pic" class="modal-content" style="background-image:url('.$thumbnail.'); ></div>'
</div>
</div>
Could you help me?
I've done it!
<!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.');"> </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>
Demo is here[http://www.jquery-az.com/boots/demo.php?ex=17.0_1]
Related
I'm trying to create a modal activated by jquery. Inside that modal I have a slider created in webflow, but this slider isn't working.
The webflow support suggests to insert, after the modal activator, this line of code: Webflow.require('slider').redraw();
But it's not working.
Here's my code:
$('#plus-1').on('click', function() {
//apri la modal corrispondente
$("#modal-1").css('display', 'flex');
//$('.slider').redraw();
Webflow.require('slider').redraw();
$('#chiudi-1').on('click', function() {
//chiudi la modal corrispondente
$("#modal-1").css('display', 'none');
});});
<script src="https://www.tecmasolutions.com/clients/princype-2/js/configurator-princype-rev002.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.tecmasolutions.com/clients/princype-2/css/normalize.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/components.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/configurator-princype-rev002.css" rel="stylesheet" type="text/css">
<button id="plus-1" type="button">Click Me!</button>
<div id="modal-1" class="modal-prezzi porta-h240 logged">
<div class="info-wrapper-checkout logged">
<a id="chiudi-1" class="chiudi checkout logged">x</a>
<div id="slider-1" class="slider w-slider">
<div class="w-slider-mask">
<div class="img_int-pack-premium-plus a w-slide">
</div>
<div class="img_int-pack-premium-plus b w-slide">
</div>
<div class="img_int-pack-premium-plus c w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="icon-2 w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="icon-3 w-icon-slider-right"></div>
</div>
<div class="slide-nav w-slider-nav w-round"></div>
</div>
</div>
</div>
I found the missing point.
before the Webflow.require('slider').redraw(); I had to put this:
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
The following is the full testing code. The example is running on
http://public.eitan.ac.il/modal/modal-video.html
I am trying to run a youtube video in a pop up window using Modal, but after closing the window, in Firefox the audio keep on playing. In chrome its working OK.
Any solutions? 10x
var mobileDetect = new MobileDetect(window.navigator.userAgent);
/*
$(document).ready(function(){
$("#myModal").on('hidden.bs.modal', function (e) { $("#myModal #iframeYoutube").attr("src", $("#myModal #iframeYoutube").attr("src"));
});
*/
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function()
{ $("#iframeYoutube").attr("src","#");
})
})
function changeVideo(vId){
var iframe=document.getElementById("iframeYoutube");
iframe.src="https://www.youtube.com/embed/"+vId+"?autoplay=1&modestbranding=1&rel=0&showinfo=0";
if (mobileDetect.mobile()) {
window.location = "https://www.youtube.com/watch?v=" + vId;
return;
}
$("#myModal").modal("show");
}
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="modal.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.2/mobile-detect.min.js"></script>
</head>
<body>
<button class="main-btn">Watch</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria- hidden="true" style="color:white">×</span></button>
</div>
<div class="modal-body">
<iframe id="iframeYoutube" width="700" height="394" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
problem is in your hidden.bs.modal function, replace # by _blank
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function()
{ $("#iframeYoutube").attr("src","_blank");
})
})
I'm working on a solution that displays a list of thumbnails that are medical images. We have a requirement that states if a user clicks a thumbnail a Bootstrap modal should open that display the image (jpg, png or dicom) using the cornerstone.js library.
Using cornerstone seems pretty straightforward. I setup a quick plunker here.
Here's the code for the working plunk:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>This works just fine...</h1>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
</html>
I can't seem to figure out why the images are not loading when I use the same code in a Bootstrap modal. The plunk that I'm trying to get working is here.
Here's the code for the broken plunk:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>When this modal is opened the canvas looks like it's drawn at 0px x 0px...</h1>
<br />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="dicomImage" style="width:512px;height:512px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After hours or trying to figure it out I figured I would see if anyone out there has any ideas. It looks like the plunk with the modal is drawing the canvas at 0x0 pixels...
Any thoughts or help would be GREATLY appreciated. Thanks all.
Update 6/26
I may have found a potential workaround, but it's not as clean as I would like it to be. I also haven't tested it by playing a series of CT images.
My thoughts are to use the working solution from the first plunk and to call .hide() on #dicomImage on document.ready. Then, when a user clicks a thumbnail, I will use:
$(".modal-body").appendTO("#dicomImage);
Not the cleanest solution, but it could work...
below is my HTML model,
<
And below is my JavaScript.
$(document).ready(function() {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$( "#portfolioModal1" ).on('shown', function(){
alert("Shown!");
});
});
$("button").click(function find_route_time()
{
// This function is tested and is working fine.
});
I tried solution from many tutorials, but this is not working. I am unable to understand why? My javascript should generate alert when the Model Opens up but nothing happens.
And below is the link,
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/EAST-CLICK.jpg" class="img-responsive" alt="">
</a>
Here is the fix for your code:
Add Button to your html code as showing below:
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
Replace your JS code with below code:
$(document).ready(function(){
$("#myBtn").click(function(){
$("#portfolioModal4").modal("show");
});
$("#portfolioModal4").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal4").on('shown.bs.modal', function () {
alert('The modal is fully shown.');
});
});
Note - if you want to open popup on page load event then just remove the click event from the script but the issue will be it just going to capture shown event.
let me know if you find this useful.
Here is completed Tested file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Open Popup
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
.....................SOME CODE.....................
</div>
</div>
</div>
<script>
$(document).ready(function () {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal1").on('shown.bs.modal', function () {
alert("Shown!");
});
});
$("button").click(function find_route_time() {
// This function is tested and is working fine.
});
</script>
</body>
</html>
I'm working on a page with two Bootstrap 3 modals in Chrome. Everything appears fine until you leave the developer console open and launch one of the modals. You can repeat the issue with this jsfiddle, again with the latest Chrome, or create an html page with the below code.
http://jsfiddle.net/ow3n/22ENG/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function launchReportModal(){
$('#reportModal').modal();
}
function launchShareModal(){
$('#shareModal').modal();
}
</script>
</head>
<body>
<a href='#reportModal' onclick='launchReportModal()' class='report_link' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#shareModal' onclick='launchShareModal()' class='report_link' data-toggle='modal' data-target='#shareModal'>share</a>
<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Report <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Share <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</body>
</html>
Edit: Using jQuery selectors to launch the modal in the html fixes the issue, but you can still see the problem in jsfiddle regardless.
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
$('#launchShareModal').on('click', function(){
$('#shareModal').modal();
});
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#' id='launchShareModal' data-toggle='modal' data-target='#shareModal'>share</a>
You are trying to activate the modals automatically and activate them manually at the same time! If you read the docs :
Activate a modal without writing JavaScript. Set data-toggle="modal"
on a controller element, like a button, along with a
data-target="#foo" or href="#foo" to target a specific modal to
toggle.
You have both
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
and
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
The error is triggered like this :
$.fn.modal (_relatedTarget)
Modal.toggle (_relatedTarget)
Modal.hide (_relatedTarget)
_relatedTarget is considered as an event in the code :
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
-> Uncaught TypeError: Object http://fiddle.jshell.net/22ENG/2/show/# has no method 'preventDefault'
But _relatedTarget is not an event, it is an element. Appearently data-target has higher rank than your $(element).modal() code.
Solution : Just skip your javascript activation of the modals -> http://jsfiddle.net/QFyv9/ - forked jsFiddle using a unminified version of 3.1.1 bootstrap.js (so I could track down the problem)
I have updated the jsfiddle demo:
http://jsfiddle.net/22ENG/11/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and upgraded bootstrap from 3.1.1 to 3.2.0.
The error is gone, and it toggles twice, as coded.