I am extremely new to Javascript and although some is intuitive, I feel moderately lost.
Trying to create a Jquery Magnific-popup website to showcase vimeo videos since it is a free plugin.
I would like thumbnails to link to this pop-up script.
I find myself getting very confused about what files to include and which to not use since I am new to Javascript.
I have been working with this website:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Which scripts do I use and which do I leave out to do that?
Please help! I appreciate any help
Thanks
What exactly are you unsure about including? The Magnific documentation is pretty good for that at the link you pasted.
Basically you'll get the 3 files they say, and include them in the order you see on their page. CSS, then jquery then magnific. Your paths to those files will vary depending on where you save them.
The Vimeo stuff, I've no idea.
you can look Jquery stuff, it may help you to solve all your Javascript needs. First of all, JQuery is nothing but, its Javascript package, it have many useful predefined functions, properties and more... first look the JQuery page
http://jquery.com/
if you looking popup forms, just look the link
http://jqueryui.com/dialog/#modal-form
Here you have a very simple example for a pop-up image:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/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>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class="test-popup-link" href="img/img.jpg">Open popup</a>
</body>
<footer>
<script>
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
</script>
</footer>
</html>
Related
Hello amazing people in here!
My Goal: Display a Bunch of images neatly on
http://1110kd.blogspot.in/
using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)
Progress till now:
step 1: Pasted JS files in head section
step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images
Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(
Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).
[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]
Thank you so much in advance.
Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/
First, when I try your link, the first thing I see is the following image.
You have to fix this before trying to do something else.
A possible solution will be to use a CDN instead.
So to resume, here's a possible template:
<!DOCTYPE html>
<html>
<head>
GooglebaseData goes here ...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
</head>
<body>
All your content
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$("#basicExample").justifiedGallery();
</script>
</html>
With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>
I found this really cool plugin for Bootstrap that measures password strength. It looks good, and I want to use it, but I can't figure out how to make it work. According to the Github page, all you have to do to use it is "Just invoke the plugin on the password fields you want to attach a strength meter to.". Unfortunately, they don't tell you where to put the files, nor which javascript files you actually need to use.
I've been Googling every possible iteration of ways to add or install plugins for Bootstrap, and have come up empty each time. Does anyone have an answer here?
I guess the github pages can be confusing with all those source files. All you need to do is get the latest minified file from this page:
https://github.com/ablanco/jquery.pwstrength.bootstrap/tree/master/dist
Download it, upload it, and load it into your HTML somewhere after your original bootstrap javascript file using
<script type="text/javascript" src="file/location/pwstrength-bootstrap-1.2.3.min.js"></script>
When you've done that, add the following javascript code to invoke the plugin on a class or element:
$(document).ready(function(){
$(':password').pwstrength();
});
Just include the plugin css and javascripts after defining bootstrap in head of your html page.
something like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="your plugin source"></script>
To add to previous solutions: also make sure to include jquery in your html because it's required by bootstrap's js.
Okay, I'm currently working on a website and I wanted to embed a timeline into each post. I am using WordPress. The timeline I insert would differ from post to post so this timeline cant be inserted into the actual theme I'm using? I'm also very new to PHP, HTML, and JS. But I have searched a ton of forums and cannot for the life of me figure out how to do this. Anyway Here is a link to my timeline. http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html
And here is a link to the timeline embedded on my website using iFrame. http://www.derikgrass.com/events/?p=526
iFrame would work great only that the iframe needs to be much bigger than the timeline itself as the timeline extends when you click on events in the timeline as you can see from the links I provided. Here is the timelines html code:
<meta charset="utf-8">
<title>TimelineXML</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/timelinexml.sleek.css">
<section class="demo">
<p> <br/><br/> </p>
<div class="demo-box">
<div id="my-timeline">
<div class="timeline-html-wrap" style="display: none">
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script defer src="js/mylibs/timelinexml.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts -->
I want to embed this directly into specific posts I create. If anyone would be able to help me write the code in order to embed this timeline, I would be EXTREMELY appreciative. Thanks.
I think what you mean is that you just want to put his in your html
<iframe src="http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html" scrolling="no" height="400" width="900"> </iframe>
And change the width.
But you should go to the source (so follow that link) and you'll see he uses a nice js file to make it work. If you do that you'll see he's using this script:
http://codecanyon.net/item/jquery-timelinexml/1448100
I don't like scripts from there seeing I believe they are funky websites, but hey, it's your computer and server. You decide.
I'm puzzled by what might be a really simple thing to do or understand.
So I downloaded jQuery UI package with the themeroller with these settings. I only chose datepicker and a custom theme. But when I try to use it the calendar doesn't look right:
I'v added these to my test page:
<link rel="stylesheet" type="text/css" href='Scripts/jqueryui/css/redmond/jquery-ui-1.10.4.custom.min.css' />
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.11.0.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jqueryui/js/jquery-ui-1.10.4.custom.min.js") %>'></script>
After investigating more, I realized that the custom css file that was created for me doesn't include the class .ui-datepicker.
So the question is, is this by design? Do I need to add still another base jquery ui css-file? I did not see any mention of this if that is the case. And why is that not included in my package if I need to do that? Or is this a bug? What should I do to get a package that only includes the css/js I need for only datepicker?
Thanks!
Try using this Google Code source
EDIT:
got it. Simply u need to select the Widget tick like this page
I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>