I want to implement the magnific popup on my website, I followed all the instructions in the documentation, but nothing happened.
here are the header files I included.
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
This is my initialization code.
<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)
$(document).ready(function() {
$('.portfolio-img').magnificPopup({
delegate: 'a',
type:'image'
});
});
and my code is
<div class=" col-xs-offset-1">
<div class=" twelve columns container">
<div data-anim-type="fadeInUp" class="setwidth25 animate fadeInUp">
<div class="box"> <a class=" portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" BORDER="0" src="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg" height="200" width="200"> </a></div>
</div>
<div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
<div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20841080_1763381967286475_679893694361630086_n.jpg" height="200" width="200"> </a></div>
</div>
<div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
<div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20914365_1763382237286448_3724536977546091967_n.jpg" height="200" width="200"> </a></div>
</div>
<div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
<div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20953405_1763381833953155_7689290877386847638_n.jpg" height="200" width="200"> </a></div>
</div>
</div>
</div>
Console shows no error related to magnific popup,yet it is not working. I searched many related articles but none of them worked. I'm banging my head with this for more than 6 hours.
Is there any problem with my code. How do I make it work? Please help!!... Thanks in advance.
replace this block of code in your code. And make sure your jquery and js path is correct. you used multiple jquery and magnific js that's not necessary. remove it and try only two script file that i include here. i used it from cdn. It works here fine. Hope that will help you.
$('.portfolio-img').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
Seems that you have not wrapped JavaScript code inside <script></script> tags:
<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)
$(document).ready(function() {
$('.portfolio-img').magnificPopup({
delegate: 'a',
type:'image'
});
});
It probably should be:
<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)
<script>
$(document).ready(function() {
$('.portfolio-img').magnificPopup({
delegate: 'a',
type:'image'
});
});
</script>
Related
I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >
You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/
Parallax content slider works once, but then fails to work, without any error. here is the example http://vilamihu.didacticmedia.ro/ , and here are the important bits of code:
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--end slider -->
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Those are in <head>. Here is the body:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img">
<img src="images/slideprimu.jpg" alt="" class="class1" />
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide1.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide2.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide3.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide4.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide5.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide6.jpg" alt="" class="class1"/></div>
</div>
<!--/slide -->
</div>
and here is the jquery:
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
interval: 500
// time between transitions
});
});
Note: the links to photos are good. if I change the "current" setting, then it will start at that photo, go once, and stop. Any ideas will be greatly appreciated! Thanks!
Try this
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
intervalSec: 500
// time between transitions
});
});
I have just changed name of value interval to intervalSec
as per the documentation other things should be okay
Also in the provided link of website you are using older version of jQuery v1.8.3
If possible update it to latest version CDN, as for CSS3 newer version works better(Note: which does not support some old browsers)
Update: In the given website Link there are two JQuery UI of different versions used
jQuery-UI 1.9.2
jQuery-UI 1.9.1
Please remove the older version(the js/jquery-ui.min.js) to avoid any conflict..
today I was trying to solve exactly the same problem.
Even though this answer is probably not required anymore, I will add it for further coders that will encounter the same problem.
The root cause is in bgincrement value. If there is no background that it can "move" it will stop responding without any error. And its total mess.
Setting bgincrement to zero made the slider work again:
$(document).ready(function () {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 0
});
});
I had the same problem... please deactivate all other jquery plugins, let only the slider at place. Do not forget to delete the initiation codes in your custom js file or in your html file as well ! Normally your slider works online after all.
Then you can re-add your plugins step by step and you will recognize with which plugin your slider has incompatibility. I had jQuery Timelinr 0.9.54 plugin which blocked my slider.
This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe
One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!
1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.
I am trying to get a menu to slide from the left when I click on a link. I have been following JSFiddle without success. The div remains in one spot and does not slide. Based on the example the div should be hidden and slide into view with click then slide out when I click again. It starts off hidden then comes into view without sliding and does not slide back. I am very new to jQuery, but have been studying very hard.
In my master page I have set the scripts for the page:
<script src="/Scripts/jquery-1.11.1.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#click").click(function () {
$("#slider").toggle("slide", {
direction: "left",
distance: 280
}, 500);
});
});
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
<div id="box">
<div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
//controls inside here
</div>
</div>
</div>
Is the problem that I am trying this on the master page? I need a menu for each page and would hate to think I have to add to each, but if so then that is fine.
A requirement for the fiddle you are trying to replicate is : jQuery UI 1.9.2
This can be downloaded here : http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/
On the left side of the jsFiddle you can see external requirements/dependencies
Include this just after your jquery reference and it should be fine.
Try this as your code :
<script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"
></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#click").click(function () {
$("#slider").toggle("slide", {
direction: "left",
distance: 280
}, 500);
});
});
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
<div id="box">
<div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
//controls inside here
</div>
</div>
</div>
I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)