Can't get magnific popup to work, two javascript errors - javascript

I am trying to make a lightbox gallery and have used the example source code.
Here is the documentation I read over: http://dimsemenov.com/plugins/magnific-popup/documentation.html
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: $ is not defined
I am not sure what the errors mean or what to do with them.
In a video tutorial I watched, they said something about a jquery conflict being a potential problem. On a different page of the website, I used a Kwicks sliding menu (which also used jquery). That's the only thing I can think of.
I would really appreciate any help you would be able to give me!
Thank you! There are no more errors, but now I need to make the hovering on the image work with the zooming in magnifying cursor.
I have made the hovering work, now I need to make the zooming in magnifying cursor work. I have attached a page of what I what the cursor to be when it hovers.
Example: http://dimsemenov.com/plugins/magnific-popup/
I have figured out the zoom cursor! Thanks for all the help!

The documentation of the plugin Magnific popup you are using suggests -
Including files
<!-- 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="magnific-popup/jquery.magnific-popup.js"></script>
Remember : You need to include jQuery file reference, for the plugin to work; rather every jQuery plugin. And in the specified order. This is the sole reason behind $ not defined and undefined in not a function.

Related

How can I add jQuery (SharePoint 2010)?

I have a HTML page that I need to be linked to within our organization's SharePoint 2010 portal. I have all needed files (CSS, images, jquery) stored in the same document library. The CSS seems to be working fine but I'm having trouble getting the jQuery to work. Any suggestions or thoughts on what could be the issue here? Thank you.
**Update: The HTML page consists of one image (image map) that I have sectioned into 100 or so clickable areas. When clicked, a jQuery plugin activates and (SHOULD) display a tooltip directly to the right of the clickable area. My issue is that the tooltip is being displayed to the right of the WHOLE image instead. So I think I was wrong in my initial question about the jQuery not working. The tooltip plugin indeed activates, it is just appearing outside the image instead of on top of the image where it should be. This works properly in a local environment but once the files are uploaded to the SharePoint server this behavior happens. Is there some internal JS/CSS files within SharePoint that I can/need to override? Thanks for helping!
Need some more details, is jQuery not loading at all? Or just errors calling jQuery functions? I'm guessing you're getting errors calling jQuery functions. You'll want to use jQuery.noConflict(); to prevent conflicts with SharePoint javascript functions. The $ symbol that jQuery uses by default is also used by SharePoint. So you call jQuery.noConflict(); at the top of your javascript, and then you just swap using the $ for calling jQuery functions to just writing jQuery. So $(document).ready becomes jQuery(document).ready. $.ajax becomes jQuery.ajax, and so on.
jQuery.noConflict Details

fullPage.js not scrolling / no scroll possible

I've been having this issue with fullpage.js not allowing me to scroll properly. Please see the issue at https://www.rewardslive.com/test
I have jQuery 1.10 loaded onto the site already, but the javascript code that is in question here is inline on the page, after along with the initialization code which is an extension of the document ready with no conflict in the rewardslive.js inline script.
Going to the page does not pose an issue, but when i try to scroll down, the url bar changes to https://www.rewardslive.com/test#secondPage - but there is no actual scrolling downward and no new content is updated. I want to keep the header as seen, in there for all intents and purposes.
Is there something I am missing here? All i want is the basic fullpage, 'scroll down function to see more' feature.
Thanks again,
George
The javascript console shows this error:
Uncaught TypeError: Object # has no method 'easeInQuart'
Which means you are not importing the jQuery UI library which is needed by the plugin as specified in the documentation.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Also, you have problems in your HTML markup as you can see highlighted in red here.
If you do not want to include the whole jquery UI library for just that single effect, you can use the easings file provided by fullPage.js that includes all of the jquery UI easings.

Trouble implementing jQuery slider

I am having trouble implementing a jquery slider (flexslider)
I feel like I am missing something very basic, but for some reason I just cannot put my finger on it. Any help would be amazing. The link to the test site is below.
I am trying to get the slider to appear in the empty green area.
I am also working in Gumby responsive framework
http://4grain.bmdigitalgroup.com/
This is your issue:
Uncaught TypeError: Object [object Object] has no method 'flexslider'
...also looks like your loading your jquery file after the flexslider file. try keeping all your .js files in one place, with your jquery file on top of all of them.
You have 2 jquery files loaded on the same page. you should only need one, unless you are intentiontally trying to load 2 of them..
try placing your script...
$(window).load(function() {
$('.flexslider').flexslider();
});
at the bottom of the page, wrapped in a script tag, before the body ends, instead of inside the head of the page. the script is waiting until the page is loaded anyway.
UPDATE!
Hey good job so far! i'm seeing what you have done on your page via the web console.
And if you want to get rid of that...
Uncaught TypeError: Object [object Object] has no method 'on'
...then remove the jquery 1.6.2 file from the top of your page, and place the fexslider.js file at the bottom of your page.
As noted, you are having a double reference to the jquery library. Try doing this which will stop the dual references:
<script type="text/javascript" charset="utf-8">
$.noConflict();
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Give #maincontentbody a height, perhaps 75px, then all of the children need to have a defined height and width, even id it's width:100%. min-height is not an appropriate value in this case
Your images appear to be much larger than the green bar area, do you think it will animate as well?

jQuery interfering with Twitter bootstrap carousel

While creating a website using Twitter Bootstrap's carousel, it seems that some scripts are interfering from it auto-sliding when the website is loaded. But it works fine once you click one of the controls in the carousel. It then slides every 5 seconds, the default time.
I'd rather not post a jsfiddle because of the size, so the production website will have to do (not sure if this is against the rules - otherwise I'll delete it).
Now there are some plugins I'm using (Newsletter and Contact Form 7) which also include scripts from jQuery. I'm not sure how to implement the noconflict from jQuery, or if it will even help.
Can anyone spot the problem?
I got this working by saving a copy of your site to my local drive, I moved the bootstrap .js file to the bottom of the file right above </body> and called the carousel manually so it ends up looking like this
<script type="text/javascript" src="./PRO-Intermediair Your Next Step!_files/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel();
</script>
</body></html>
edit
I posted a copy so you can see http://tctel.com/pro/

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container

Categories

Resources