I am trying to make a gallery on my webpage using magnific popup but I can't get the image to show up in a popup it only shows up in a separate tab. How can I get it to show up in gallery view and enabled cycling through all the images in the web page's gallery? In addition, how can I change the size of the lightbox being displayed and the size of the thumbnail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.modal-dialog {}
.thumbnail {margin-bottom:6px; height: 280px;}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
}
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
});
</script>
</head>
<body>
<div id="main" role="main">
<br />
<br />
<br />
<div class="parent-container">
Open popup 1
Open popup 2
Open popup 3
</div>
</body>
</html>
The problem is with your HTML mark up !!
Open popup 1 This won't work.
<a class="test-popup-link" href="path-to-image-1.jpg">Open popup 2</a>
But this will work.
Check Codepen
Related
I am trying to create a modal with jquery modal (https://jquerymodal.com/). I wanna load the page content into a modal via AJAX (as it says in example 4). I tried the code below but it doesn't show the modal.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
</body>
</html>
modal.html
<div class="modal">
<p>Second AJAX Example!</p>
</div>
try to change the place of calling jQuery file and place it in the head tag
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
And then give the link tag an ID
second example
and then add the script to the bottom of the DOM (before closing the body tag)
<script>
// Open modal in AJAX callback
$('#manual-ajax').click(function(event) {
event.preventDefault();
this.blur(); // Manually remove focus from clicked link.
$.get(this.href, function(html) {
$(html).appendTo('body').modal();
});
});
</script>
I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">
My media query file doesn't work even if the files are placed properly.
What's going wrong? Is it because of Bootstrap?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/mq.css" rel="stylesheet" />
<!-- Bootstrap Style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Reset Style -->
<link rel="stylesheet" href="css/normalize.css">
<!-- Main Style -->
<!--Font Awesome-->
<script src="js/animatie.js"></script>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/css.css">
</head>
mq.css is the file for media queries:
#media screen and (width: 1920px) {
h1 {
font-size: 222vw;
}
.fa-social {
height: 1.7vw;
width: 1.7vw;
}
body {
background-color: white;
}
}
It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
And the CSS is:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
I have added all of the background-properties in the css and the div has a size.
My file structure is like this:
I see several things that can cause the issue:
There is double equal here: <div id=="container header_div">. Should
be single. In addition, I see two words in the id separated by
space. ID's cannot be chained like classes, and this is not a valid
syntax. Since you style #header_div, the id attribute on the div
should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in
the same directory as the page.html, the filepath should be:
url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.
By doing this, I was able to see a background image in my test. I hope this helps.
Not exist <div id="container header_div"> in you css, change to <div id="header_div">
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id="header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");
My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/