Issue with jQuery images resizing to fit modal - javascript

Okay, this one has me confused as hell (I've spent hours trying to figure it out) so I am hoping perhaps a fresh set of eyes might be able to spot the culprit easier than I can.
The page in question is here: http://centerpointesigns.com/dev/portfolio/
Go to that page on a desktop and open the GLA Building link (underlined).
You'll see that the gallery (using a plugin called Envira Gallery for WordPress) is super, super tiny and I know that this is because it can't determine the size of the modal it's within (which is a plugin called Easy Modal for WordPress).
I've added the following code to the functions.js file assuming it would fix it, but no suck luck:
// Prevent resizing of Envira Galleries with Easy Modal plugin
$('.emodal').on('emodalBeforeOpen', function() {
$(window).triggerHandler("resize");
});
Any thoughts on what I'm doing wrong here? Seems like it should be easy and I must be overlooking something obvious.

There's an error: "Uncaught TypeError: $ is not a function" in functions.js, line 56.
I replaced $ by jQuery, and your gallery now looks great :-)
jQuery('.emodal').on('emodalBeforeOpen', function() {
jQuery(window).triggerHandler("resize");
});

Related

HighSlide Javascript Thumbnail Viewer

I wanted to add a cool new feature to my website that allows for clickable popup java-script thumbnails using HighSlide. I have thoroughly searched stackoverflow, google, and the forum on highslide for a solution to my problem to no avail.
The main problem I am experience is the onclick java function, which, when clicked, is supposed to enlarge one of the images. However, instead of it opening up, I get a perpetual loading message.
http://untetheredthoughts.com/highslide-custom-example.htm
Upon my examination of other people who have had a similar error, they needed to ensure that all paths to the files were setup correctly, which I have double checked. I am still new to coding, so if anyone could give me some pointers, I would greatly appreciate it.
Thank you for your time, I am very excited to get this working.
There's a longstanding bug in the "editor" on the Highslide JS site, and it always makes the same mistake! Open the highslide.config.js file, then:
Change:
hs.outlineType = 'custom';
To:
hs.outlineType = '';
I think that will cure the problem. If not, post back, and we can start looking at some of the other usual suspects. ;)

Uncaught TypeError: jQuery(...).fancybox is not a function |fancybox used in wordpress

I have a wordpress website and I want to show my video using fancybox, so I tried wp plugin like "fancybox for wordpress" and "easy fancybox".
But both of them give me the error message "Uncaught TypeError: jQuery(...).fancybox is not a function".
I search for many questions on here and found this can be jquery conflict, but I cannot figure out where is it.
here is my site http://skyblueenglish.co.uk
Notice that I only have one of above plugins at one time.
as per my thinking and till i have checked, what happen is,
in word-press you have included fancybox jQuery and it will obviously installed when you have installed the plugin. Now what happen is ,while using some JS function or JS Class it is mandatory to include jQuery file before we use/include the third party JS.
I checked the "View Source" for your page.
<script src="http://skyblueenglish.co.uk/wp-content/themes/skybluetheme/js/jquery.min.js"></script>
and i found that above JavaScript file is included in the footer.
i just removed that line and put it before
<script type='text/javascript' src='http://skyblueenglish.co.uk/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
and the error is Gone.
so what you have to do is, you have to find your footer, find the included jquery.min.js . remove it from the footer and include it from header.
Let me know if you dont understand anywhere.
;( function( $ ) {
$(document).ready(function(){
$(".fancybox").fancybox({
//....
});
});
} )( jQuery );
I did so many experiments on same topic and also tried with many different way to solve according to wherever I found similar topics on internet but trust me nothing worked out for me and then finally I simply tried to see what exactly error says:
Uncaught TypeError: $(...).fancybox is not a function
and for which I simply removed a line which was saying if($.fn.fancybox!==null).
I am not strong enough to understand Javascript or Jquery thing being fresher so I just tried with simple logic and it worked for me lol.
This might not be the right solution but just thought to share my experience so maybe for someone it may work too.
It worked properly without loosing any function by removing below code
if($.fn.fancybox!==null)
{$("a[class^='fancyBox']").fancybox();
$("a[class^='fancybox-thumb']").fancybox(
{helpers:{title:{type:'outside'},thumbs:{width:50,height:50}}});}
Thank You!

Javascript Conflicts in Console for Wordpress Plugin Global Gallery

I hope you can help me to debug my conflicts on the site I am working on:
URL: http://metalotechnika.com
PW: 12345678
If you then go to http://metalotechnika.com/foto-galeri/foto-kangjella-hekuri/
You will find a gallery that isn't loading. Most probably due to javascript conflicts. Could you pint me in the right direction here?
You will find some errors in the console: "TypeError: jQuery(...).lcweb_lazyload is not a function"
I thougt, that it must be jQuery not loading correctly. But I already tested jQuery in my main.js, and is working. Don't know about this time.
Ok, found the problem.
jQuery is loaded 2 times. And this is were the conflict came from. I just removed jQuery from my functions.php because Wordpress already loads it's own jQuery and throws conflicts if it is loaded a separate different time.
Thanks anyway.

edgePreload.js conflicting with jQuery.ScrollTo

I am using Edge animate for a header on my webpage. I am trying to incorporate the slide effect from page to page utilizing the jQuery.ScrollTo plugin courtesy of Ariel Flesler. The problem is that when I include the
<script type="text/javascript" charset="utf-8" src="spolightest_edgePreload.js"></script>
the slide effect stops working. I have narrowed it down to this file so I know that this is causing the problem. Any one ever deal with this problem? Does anyone know a better way to accomplish the slide effect in a webpage. It is quite a large amount of javascript to include here, so here is my site that I am trying to make this work on. You can view the script there.
www.premierentertainmentevents.com
I've tried to call the javascript files in different order, including the hosted jquery library from google, include the jqueryscroll.js in the edge preload file..
I'm at a loss. Something is conflicting with something else and I have no idea what.
Any ideas are greatly appreciated. Thank you
One thing I can see from your page is that the scripts include order isn't correct right now.
You are including jquery after the adobe edge's includes, so that in the console I can see the errors:
Uncaught ReferenceError: jQuery is not defined /spolightest_edge.js:2
Uncaught ReferenceError: jQuery is not defined spolightest_edgeActions.js:8
I know you tried different things, but please include jquery above anything else so maybe I can see if other errors occur.

Problem with jQuery in IE8 with Fancybox

I recently aquired an old website (we're talking tables, image maps, you name it).
I was asked to make an old link to a Flash gallery into a lightbox. I simply used a javascript: openLightbox() on the gallery link (top right corner). I know, I know, but it doesn't seem out of place on this site.
Anyway, I also include a JavaScript file scripts.js, which
Includes jQuery and CSS files for fancybox.
Use AJAX to get some JSON of image filenames
Create a hidden unordered list on the page with links to the images from JSON
Attach the fancybox method to these images
Then, on the openLightbox() I simply call the click() function on the first link.
Nice and easy, I thought. It worked like a charm in Firefox. Then my arch nemesis decided it didn't want to play ball. That's IE7/8.
I've had the IE8 Developer Tools out for a while but haven't been able to figure it out.
The only error I'm getting is "v is null or not an object" which is referencing the minified/packed jQuery code on Google's CDN. Obviously that's not the problem, so does anyone have any idea what is wrong here?
Here is a link to the page: http://edgewaterterraces.com.au/
Also...
script.js file
Thank you very much for your time.
UPDATE
Wow, it seems to work on this page. What gives?
You are embedding both jquery and script.js twice on the front page.
Once in line 12, once in line 27.

Categories

Resources