I'm setting up a gallery, with the pictures in a wide window in the middle of the page, controlled by a scrollbar. I've also set up a page with a form used to contact the artist to arrange a sale, and I want this page to open in a fancybox window.
The link to the form works, but it will not open in a fancybox window.
The scripts in the head of the page are as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" id="sourcecode">
$(function() {
$('.scroll-pane').jScrollPane();
});
</script>
<script>
$(function() {
$('.iframe').fancybox({
width : '50%',
height : '80%',
titlePosition: 'outside'
}); // end fancybox
}); // end ready
</script>
The link meant for a fancy box window looks like this on the page:
<li>buy</li>
My JS console says that it "Cannot read property 'msie' of undefined" in the JQuery fancybox file, and also that $('.iframe').fancybox({ is not a function, but it all seems to work fine in various tutorials and experiments I've pursued where JScrollPane is out of the picture.
The problem is you are using an old version of fancybox and new version of jquery.
Old version of fancybox depends on jquery.browser which is remove in all versions from jquery 1.9.
either use jquery migrate file or use the latest fancybox
Related
I'm developing a mobile app with Phonegap using Jquery Mobile. First I tried to normally add a transition to a < a > tag using:
Page 2
just like it's explained on JQuery Mobile documentation, but I noticed that my page was doing a fading animation before actually doing the slide, and of course it looked horrible. After that happened I thought it was because there's a default animation so I looked for ways to remove it, and I found this:
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
});
</script>
But it still isn't working. I also tried to change the default transition to slide but it didn't work either. Thanks for your time, any ideas?
The ordering of the mobileinit handler is important. It must go between your jQuery main file and the jQuery Mobile file
<!-- jQuery.js -->
<script type="text/javascript" src="assets/js/plugins/jquery-2.1.1.min.js"></script>
<!-- Place after jQuery.js but before jQueryMobile.js -->
<script type="text/javascript" src="assets/js/app.js"></script>
<!-- jQueryMobile.js -->
<script type="text/javascript" src="assets/js/plugins/jquery.mobile-1.4.4.min.js"></script>
I know this code should be working as i've done other websites where it works on both.
http://johslan.tk/
refuses to work in IE 11( The buttons dont do anything)
If you load the page in IE11 and then go to the Console in the F12 developer tools, you see the following Script error:
SCRIPT5009: 'jQuery' is undefined
File: jquery-ui.min.js, Line: 1, Column: 3
Which indicates the page is loading JQuery-UI before it loads JQuery.
Looking at the source on http://projoh.altervista.org/ I see you have the following HTML:
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try switching the two tags and I am guessing it will fix the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
Hope that helps.
I downloaded the standalone version of shadowbox for images with css support. I loaded the files onto my website server and put the following codes on my page:
HTML head for webpage:
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
HTML link on my webpage:
My Image
Nothing happens with this code. Shadowbox doesnt load....nor does the pic load in shadowbox when I click the link. What am I doing wrong?
What I am trying to achieve once i get this to work is to, upon page load, have shadowbox automatically show and start scrolling through a gallery of photos (i hate the click link thing)
I downloaded the latest shadowbox and used your code above and it worked fine.
Are you sure the paths are correct to both shadowbox and the image.
Have you checked the console logs?
In terms of setting it up so it opens on load they have an example on their website...
EDIT:
Player needs to be set to "img" and the content only needs to be the path to the image.
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true
});
window.onload = function() {
// open a welcome message as soon as the window loads
Shadowbox.open({
content: 'https://www.google.co.nz/images/srpr/logo11w.png',
player: "img",
title: "Welcome",
height: 350,
width: 350
});
};
</script>
Can't seem to get Fancybox to work - it just links to the 1st pic. I get the error: uncaught typeerror object # an object has no method 'fancybox'.
HTML
<a class="fancybox" data-thumbnail="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_slideshow_player_thumbnail/P1010923.JPG" href="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_492x330/P1010923.JPG"><img alt="" src="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/toclogo.jpg"></a>
<br />
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
helpers: {
thumbs: {
width: 40,
height: 40,
source: function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
});
</script>
Header
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
It does seem to be pulling in the external files according to the Source in Chrome's Developer Tools.
Thx
Hmmm. It looks like jquery is loaded twice. Once with
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and the other (harder to find)
http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js
It looks like you're using drupal and with a bit of googling, it sounds like it injects a version of jquery for you (jQuery JavaScript Library v1.3.2)
The reason that error is occuring is the conflict between the two libraries. Try following this update
http://drupal.org/project/jquery_update
You're pulling in the two versions of jQuery.
When you execute jQuery(".fancybox").jquery from the console, you get 1.3.2. Undoubtedly, this is not compatible with fancybox.
jQuery 1.8.2 is loaded via the Google CDN with your explicit script tag request.
jQuery 1.3.2 is loaded as part of http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js, which comes from Drupal injecting this library for its own purposes.
For future reference, I was able to locate this file by using the Chrome Developer Tools, sorting by file size (largest first) and then looking at the JS files... found it pretty quickly after that.
I was having this same problem and I resolved it by changing the double quotes in the line:
$(".fancybox").fancybox();
To single quotes:
$('.fancybox').fancybox();
Sort of a 'gotcha' since the fancyBox site has double quotes.
if anything does not work:
parent.window.document.getElementById("fancybox-wrap").style.display = 'none';
This hiding fancybox.
I am working on a jQuery script on http://www.qxl.dk/ and I can't seem to get IE7 (or more accurately, IE8 in IE7 compatibility mode) to load my content.
The sidebar box on the right named "QXL Aktuelt" loads its HTML content from an external file using Ajax load(), then triggers a custom jQuery event ("aktuelt_loaded") that starts a carousel script (like a scrolling newsticker).
Several other content sections on the same page are loaded through Ajax and they work just fine, so I'm wondering what's going wrong. Everything works as expected in Firefox 3.6 and IE8, but not in IE8's compatibility mode.
The script that loads the Ajax content is (inline on the page):
<div id="qxlaktueltHolder"></div>
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
The external script that responds to the event is in the following file:
http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js
All ideas are very welcome.
EDIT:
Looks like your content is being loaded. You seem to have a CSS display issue. Using IE's developer tools, I searched for the href of an a that was loaded properly in Safari
http://www.123hjemmeside.dk/pages/receive.aspx?target=wl&partnerkey=dkqxl:Hobby_aktuelt_1
and found that is was on the page along with all the other content.
UPDATE:
The problem is with your #newsticker element. It, and all of its li elements, have height and/or width properties set to 0.
So whatever code is responsible for sizing/displaying the #newsticker and its content seems to be the culpret.
This is a guess, but this script qxlaktuelt_liveload.js is being loaded after this:
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
So depending on how long the load() takes, the script may or may not be loaded.
Try:
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
Remove all the console in your JavaScript code. For some reason, the IE's break with this.