Fancy Box doesnt work please help - javascript

I recently came across fancy box located here, I've followed every step in the instructions perfectly, but it doesn't work, anyone know what might be the problem?
Here is a sample of my page source:
Included the links to scripts as required, and CSS:
<script src="jquery.fancybox-1.2.1/jquery.fancybox/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.fancybox/jquery.fancybox-1.2.1.js" type="text/javascript"></script>
<link href="jquery.fancybox-1.2.1/jquery.fancybox/jquery.fancybox.css" rel="stylesheet"
type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
Then this should simply work:
<a id="single_image" href="images/279641.jpg"><img src="images/279641.jpg" /></a>
But it doesn't seem to do anything except open the image in a new window.
Any suggestions, and thanks in advance.

You forgot to implement step 4 (now step 5) from the manual, "Fire plugin using jQuery selector"

Try to include this one:
$(document).ready(function() {
$("a#single_image").fancybox({
'titleShow' : false
});
});

try to look at another javascript/jquery plugin you've implemented in your html page. cause some jquery plugin has a conflict with fancybox. it works for me.

Related

Open-Source JQuery Lightbox Not Functioning

URL:
http://qualitygameservers.com.gridhosted.co.uk/
I am attempting to install the JQuery lightbox demonstrated here:
https://designshack.net/articles/javascript/create-a-simple-jquery-image-lightbox-gallery/
Console is returning that it is not in fact a function, however my script experience is minimal.
Any ideas what the problem is? Have i missed something basic or is this an issue with the open source code?
Thank you.
Make sure that you get both the jquery resource and the lightbox code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js">
And if you might want to host that jquery.lightbox file on your own site, in case that tutorial page ever gets moved/deleted.
$(function() {
$('#thumbnails a').lightBox();
});
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/jquery.lightbox-0.5.css" rel="stylesheet"/>
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/styles.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js"></script>
<div id="thumbnails">
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/01-turntable-illustration-graphic-thumbnail.png" />
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/08-extreme-fish-bowl-thumbnail.png" />
</div>

onload event not working. [Javascript]

I have the onclick event: onclick="javascript:_stats_content('my_bets');" which works fine.
This loads new content into a div.
However I want to set a default piece of content to load when the page loads. I have attempted to do this with the code below, but it is not working:
<body onload="myFunction()">
<script>
function myFunction() {
_stats_content('my_bets'); // have also tried with 'javascript:' infront
}
</script>
Can anyone provide any solutions?
Thanks.
EDIT:
Upon reading comments, I have added type="text/javascript".
I also replaced with an alert() and it fails to show. I should note that I am using AngularJS to display the page so this might interfere. However the first onclick example works fine on the page, so I don't understand how onload would be any different.
EDIT2: This is an extract of code from the top of the page:
<head>
<script type="text/javascript">
function myFunction() {
alert("Hello! I am an alert box!!");
}
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>
<?php include './js/includer.php'; ?>
</head>
<body onload="myFunction()">
I have replaced with an alert to make it easier to troubleshoot, although the alert is still not showing. I think it's just an AngularJS related issue, guess I'll just have to figure this out.
Whilst I wasn't able to get this exact method to work, the reason for which I still have no idea. I imagine it's AngularJS interfering.
I used:
<img src="87.jpg" onload="javascript:_stats_content('my_bets');" width="0" height="0">
Just before the </body> tag and that worked.

AngularJS conflicts with jQuery Mobile

I run this simple script that comes from Angular documentation, and it's working fine:
http://plnkr.co/edit/6uIlw6HGVVpT0amF2vhj
If I add jQuery and jQuery Mobile, then the example doesn't work anymore. The radiobuttons are not clickable.
Example: If I add these two scripts and the following CSS in the above example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
If I put them before the include of angular.js, then the radiobutton are clickable, but the display of the choice ("You choose...") doesn't work anymore.
Does somebody knows why is it not working?
Use this Sequence. dont know the reason but worked in plunkr.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

jquery tabs not transitioning

I decided to try my hand in jQuery $('#tabs').tabs(); and make my tabs vertical. I ran into the problem of not having the content show upon selection of a tab. An example of the problem is here - JSFIDDLE I know there's clearly something I'm missing. I tried looking at the Jquery UI documentation, but was still unaware of what I was doing wrong. I would be grateful to know why I'm having this problem and any other tips would also be greatly appreciative
Try this example: http://jqueryui.com/tabs/#vertical
You need some extra CSS (your JS Fiddle isn't loading the jQuery UI CSS) for example:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
Requires extra fiddling, but here's an updated fiddle
Two problems:
You have duplicate element ids. And the first instance of each id points to the link, not the content. Remove the ids from the links.
The tabs widget is dependent on CSS. Add the base stylesheet in and it works.
jsfiddle.net/Kxtvg/280
To get the layout you want, you'll have to start with the base stylesheet and modify it.
First of all, your ID cannot appear on one page twice. Remove it from your <li> tags. Secondly, for some reason jsfiddle isnt pulling the relative css data. I cut and pasted mine into there and it works now.
http://jsfiddle.net/Kxtvg/279/
I included some code in the head section.Here it is.
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>
</head>
Reference:
http://jqueryui.com/tabs/#vertical
Working Model:
http://jsfiddle.net/abhijalgaonkar/qTXnN/
Try not to modify the css in the source css file.Over riding the css would be a better option.
Let me know if it helps....

Why is jqueryUI datepicker throwing an error?

I am trying out jqueryUI, but firebug catches the following error on this script:
$(function(){$("#date").datepicker()});
The firebug error reads:
$("#date").datepicker is not a function
On my html, the "date" id looks like this:
<input type="text" name="date" id="date" >
NB: I have used the correct JqueryUI css/js scripts on the section
Nothing is executing...
jQuery documentation says you can call the datepicker by this command:
$("#datepicker").datepicker();
If you click the 'view source' button on the documentation page you can see that they've wrapped it into the ready function:
$(document).ready(function(){
$("#datepicker").datepicker();
});
EDIT: It should work with INPUT (thanks for pointing this out Steerpike). This is the test I've written and it works, try it yourself:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input type="text" id="datepicker" value="this is a test">
</body>
</html>
You're almost certainly not loading the datepicker plugin properly. Please supply us the code you're using to include the javascript files.
If you keep having problems, load the jquery and the UI from the google api.
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
for me it was just case of making sure the jquery ui was the last one in the list of all the js includes.
$(document).ready(function(){
// Your code here
});
make sure your function is inside the .ready main function.
It's an old post but I got here when looking for a solution so people still read it ;) I have or rather had the same problem. In my case it turned out that I was attaching js in html in wrong way (notice in what way I was ending script tag)
WRONG: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"/>
GOOD: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"></script>
When I was doing it in the wrong way I had the same error.
You are probably loading prototype.js or another library that uses $ as an alias.
Try to replace $ with jQuery.

Categories