I am trying to implement the very basic example of magnific-popup ("Single image lightbox" in the official examples) on a page, but I can't get it to to work - when clicking on the thumbnail it just opens the fullsize image in the browser.
This is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
</head>
<body>
<div id="page">
<a class="image-popup-vertical-fit" href="tbig.jpg">
<img src="tsmall.jpg">
</a>
</div>
</body>
</html>
Any idea what might be going wrong? I don't see any error in the console.
I have added delegate:'a' to the script as per another topic, but it doesn't seem to help.
I suppose it's something pretty basic, but it really is eluding me...
Thanks!
With the delegate:'a' the following did not work. Without it I believe it does as you are expecting
<html>
<head>
<link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js'></script>
<script>
$( document ).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type:'image', // no delegate:'a'
closeOnContentClick:true,
mainClass:'mfp-img-mobile',
image: { verticalFit:true }
});
});
</script>
<title>Magnific Popup</title>
</head>
<body>
<div id='page'>
<a class='image-popup-vertical-fit' href='//farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg'>
<img src='//farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg' width='150px' height='150px' />
</a>
</div>
</body>
</html>
Related
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I am trying to implement galleria.js in my webpage. I have followed the documentation and have created index.html accordingly. All I am getting is the compilation of the images one after another, but not the galleria view.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div class="gallery">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out2.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:800,
height:600
});
});
</script>
</body>
</html>
I checked the docs of galleria.js but I think the issue is basically the selector in your code. You are getting an element with id "gallery" and you dont have any element with that id,just an element with that class :)
$('#gallery').galleria({
ans I think it should be
$('.gallery').galleria({
After several attempts the following works fine with me. I have missed to put https:// before the jquery address.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div id="gallery">
<img src="galleria/im/out.jpg">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:1450,
height:740
});
});
</script>
</body>
</html>
I need display youtube videos when click an image, it displays youtube videos as new popup.
Here is my code:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> - jsFiddle demo</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"> </script>
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="youtubepopup.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("a.youtube").YouTubePopup({ autoplay: 0 });
});
</script>
</head>
<body>
<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>
when click an image it didn't change anything.
Can anyone help me?
Thank you!!!
Try this
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> - jsFiddle demo</title>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"> </script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("img.youtube").YouTubePopup({ idAttribute: 'id' ,'clickOutsideClose': true,});
});
</script>
</head>
<body>
<img id="4eYSpIz2FjU" class="youtube" title="..." src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg">
</body>
</html>
DEMO
In the code below, the color box is working and the image showing. When I tried to integrate Jcrop with it, it doesn't.
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script src="../colorbox/colorbox/jquery.colorbox.js" type="text/javascript">
</script>
<script src="../jcrop/js/jquery.Jcrop.js" type="text/javascript">
</script>
<link href="../jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="../colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$(".example1").colorbox();
$(document).bind('cbox_complete', function(){
$('#colorbox .example1').Jcrop();
});
});
</script>
</head>
<body>
<p>
<a href="../jcrop/demos/demo_files/flowers.jpg" class="example1">
crop
</a>
</p>
</body>
Remove the script files to the master / parent page, and this should now work..