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>
Related
I have worked with .draggable() function before and it worked fine the previous time. However this time it is not even working. I have no idea why?
These are my jQuery links
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="https//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
This is my HTML Code
<div class="mainArea" id="response">
<div class="designer">
<?php include"shirtBasic.svg" ?>
<div id="imageDiv"> </div>
<div id="dragDiv"> </div>
</div>
<table width="100%" border="0" id="sizeBar">
<tr>
<td class="leftBarButton" style="width:50%">Front</td>
<td class="leftBarButton" style="width:50%">Back</td>
</tr>
</table>
</div>
and this is the jQuery
$(document).ready(function() {
$(function() {
$('#dragDiv').draggable();
});
});
This is not the only code there is other code above and below HTML and jQuery as well but not relevant.
Please help me find the problem and suggest if I have linked the correct versions of jQuery, if there is a newer available please enlighten me.
Your code works well... http://jsfiddle.net/m6ac80wb/2/
You should use only one version of JQUERY. You can keep the latest one https://code.jquery.com/jquery-2.1.1.js
Also, don't forget to import the jquery-2.1.1.js before the jquery-ui.js.
You can try using:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
It works if you try it that way, and also your stylesheet was missing the ":" in the url, it is not the reason it wasn't working, but I thought I should point it out.
I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.
Here is a link to another question similar.
Draggable and resizable in JqueryUI for an image is not working?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
This is just a very basic example but when I run this the image is movable but is not resizable. Although as far as I can tell, it should definitely work.
In the link above at the bottom of the question there is a link to a working example.
http://jsfiddle.net/8VY52/
The example is using jfiddle with this exact same HTML and javascript.
Is there something I am missing about Jquery UI, why does this work through Jfiddle but does not seem to work within the code above.
Thanks.
You are missing the jquery-ui CSS file in your code
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
Demo: Plunker
Complete working code would be.
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#image').resizable();
$('#image').draggable();
$('#image').resize(function(){
$(this).find("img").css("width","100%");
$(this).find("img").css("height","100%");
});
});
</script>
</body>
</html>
This will work for you.
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
As the resizable property only works on right side and bottom side so find the image borders find that by selecting a image in css and border to it then see the output it will work perfectly
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>
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.
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.