I want to install the gallery and instead of using flash I wish to use this jQuery plugin. I cannot figure out how do I install and use it since it is distributed as .zip archive with two .js files inside and no index file or .css at all.
Here's plug in features demo, which I would like to achieve.
$("#container").gridalicious({
animate: true,
animationOptions: {
queue: true,
speed: 200,
duration: 300,
effect: 'fadeInOnAppear',
complete: onComplete
}
});
As per the source code...
The CSS is set in the JS itself, no need for an external style sheet.
If you'll scroll down http://suprb.com/apps/gridalicious/, you will see how to initialize it. It appears to just be a collection of divs with the class item inside of the initialized container.. <div id="container"> for example.
Update:
<!doctype html5>
<html>
<head>
<title>Test of plugin</title>
<script type="text/javascript" src="path/to/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.grid-a-licious.min.js"></script>
</head>
<body>
<div id="container">
<!--I assume it asks for divs with the "item" class, but it may be added automatically.-->
</div>
<script type="text/javascript>
//The initialize code printed above. Has parameters (read:options) you can tweak.
</script>
</body>
</html>
Related
Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:
<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4" type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>
And the whole content of the js file is
$("h1").css("color", "red");
But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.
EDIT:
Thanks for the help everybody, I was able to make it work :)
did you try this?
$(document).ready(function(){
$("h1").css("color", "red");
});
not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?
EDIT:
try importing this instead...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so
that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.
$(document).ready(function() {
$("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
<h1>test</h1>
</body>
</html>
There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.
<head>
</head>
<body>
<header>
<h1>test</h1>
</header>
</body>
Example: JSFiddle
If you want to use jquery in .js file all you need to do is type: src=" ..." above code.
I am very new in the web world. Please pardon me if my questions sound stupid?
My main aim is to capture the animation on HTML5 canvas to a video, in which I succeeded to some extent. I am able to record a video using this module https://github.com/spite/ccapture.js . This is possible only when the code has HTML5 and plain javascript drawing APIs having a canvas element.
Next, I 've been trying to capture text animations using textillate.js which is jquery based. I have no idea how to get the handle to the canvas
in this case. Since jquery is based on javascript, don't all the jquery based animation render on HTML5 canvas?
Here is the example code below. Where in this code can I get the canvas handle and how? There's also no mention of the canvas name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/animate.css" rel="stylesheet">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.tlt').textillate({
selector: '.texts',
loop: false,
minDisplayTime: 2000,
initialDelay: 0,
in: {
effect: 'bounce',
delayScale: 2,
delay: 50,
sync: false,
shuffle: true
},
autoStart: true,
inEffects: [],
outEffects: [ 'hinge' ]
});
});
</script>
</head>
<body>
<h1 class="tlt">Animate me with textillate effects</h1>
</body>
</html>
If you are looking to getContext, this was already answered here: jQuery equivalent of getting the context of a Canvas. If not, sorry.
I have a background slideshow that uses the jQuery 1.9.1 which is called here "jacksis.js" in body section and i have another submenu slider that uses jQuery 1.4.2 as in here is called "core.js" in head section. However, when i added the jQuery 1.9.1, the slider on 1.4.2 stopped working. I tried the noConflict() mode without success and the jQuery call innstead of the "$". Down below, the "ss1_wrapper" is using the 1.4.2 and the "cbp_bislideshow" the 1.9.1. What could be wrong in my
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<link href="index_files/main.css" type="text/css" rel="stylesheet">
<script src="index_files/core.js"></script>
<script src="index_files/js/modernizr.custom.js"></script>
</head>
<body id="page">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
...
</ul>
<form class="" name="aspnetForm" method="post" action="index.htm" id="aspnetForm">
<div class="ss1_wrapper">
......
</div>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
</form>
<script src="index_files/jacksis.js"></script>
<script src="index_files/js/jquery.imagesloaded.min.js"></script>
<script src="index_files/js/cbpBGSlideshow.min.js"></script>
<script>$(function() {
cbpBGSlideshow.init();});
</script>
<script type="text/javascript" src="index_files/quant.js"></script>
</body>
I am receiving only one error in firebug in line core.js (1.4.2) line 1993:
TypeError: jQuery.browser is undefined
and the error is in that function at line 4 (it's line 1993 in the original file)
(function($) {
$(document).ready( function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
What couldn't be wrong in my code if i tried all the possibilities of getting away with jQuery conflict?
UPDATE:
I introduced jQuery 1.7.1 and deleted both 1.4.2 and 1.9.1, then now i have both my Slider and Background slideshow working again together BUT my drop-down menu (which could be seen on my webpage www.es-processing.com) is not working anymore. On the online version it is working, but right now, on the version i'm working on it's not functioning at all. You can have an idea from my dropdown on my webpage to see which jQuery functions it follows and how to adapt them on the new 1.7.1 i put.
I'm attempting to use the Stellar.js script to apply a parallax effect.
Here is the official example from Mark Dalgleish's website
http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
Even when I copy and paste the source code from the example, instead of having a slight scroll effect to each one image, they appear in fixed positions.
What am I doing wrong?
1.
If even the Demo code does not work, check whether you gave the jquery or stellar.js path correctly.
You can check it in browser console, if you have any errors. The console will print it, if it can't load the resource.
2.
If the paths correct, check if you run the initialisation for stellar, when the page loaded, or if you gave "data-stellar-background-ratio" attribute for the right elements. If you give '0' to the data-stellar-background-ratio it won't scroll either.
Note that, it won't work on mobile devises either.
3.
If you checked everything above, and it still doesn't work, try to insert the scripts at the end of the element. Sometimes it helps.
Something like this:
<html>
<head>
<!-- Title, CSS, and other stuff -->
</head>
<body>
<!-- Content here with right stellar attributes -- >
...
<!-- At the end of body load the scripts, and run initialisation -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).stellar({
scrollProperty: 'scroll',
horizontalScrolling: false,
positionProperty: 'position'
});
</script>
</body>
</html>
I had a situation where my stellar.js parallax scrolling wouldn't initialize until my browser window was resized. I found the $.stellar('refresh'); seemed to fix the issue. (Using AngularJS)
angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
}).stellar('refresh');
}]);
So I'm trying to use the JavaScript image gallery framework Galleria. http://galleria.io/
There is a page on how to install the Flickr plugin but it is quite unclear as to what we should be doing in between the #galleria div and where to place the linking script.
Here's what I have (which isn't working, just giving me a black box)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="plugins/flickr/galleria.flickr.min.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
</head>
<body>
<?php
//header
include("header.php");
?>
<div id="content">
<div id="galleria">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
flickr: 'search:galleria'
});
</script>
</div>
<div id="footer">
</div>
</body>
</html>
Also wondering how to link to a specific person's Flickr account?
In your javascript section -- you can place this in your header or at the bottom of the page or wherever you normally place your javascriopt code -- you should:
load jquery
load the galleria script (galleria-1.2.8.min.js)
load the galleria flickr plugin script (plugins/flickr/galleria.flickr.min.js)
Then, in a document.ready() block:
load the galleria theme you're using (classic, twelve, folio, etc.)
use a jquery selector to attach the gallery and set your options.
Here's an example based on your HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="./galleria/plugins/flickr/galleria.flickr.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');
$("#galleria").galleria({
responsive: true,
height: .57,
imageCrop: false,
thumbCrop: 'height',
carousel: false,
showInfo: true,
swipe: true,
easing: 'galleriaOut',
transition: 'pulse',
flickr: 'search:leica',
flickrOptions: {
max: 10
}
});
});
</script>
<style>
#galleria
{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<?php
//header
include("header.php");
?>
<div id="content">
<div id="galleria"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Note: The example code above also sets a number of options to make the gallery responsive and work with mobile swipe gestures (set "responsive" and "swipe" to true). Also, you should set the width and height of the gallery container (#galleria) in a css style block or in your stylesheet so galleria knows how to size it correctly -- if you want galleria to automatically resize the gallery responsively, set the height ratio (.57 in the example) in the galleria options. See the Galleria docs -- http://galleria.io/docs/ for more details on options.
To use the flickr plugin to display results of a search, just specify a search term and optionally set a "max" number of images to show (I think the detault is 30). In the example above, max is set to 10:
$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'search:leica',
flickrOptions: {
max: 10
}
});
To display a flickr user's public photos, do
$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'user:library_of_congress',
flickrOptions: {
max: 10
}
});
To display a photoset, do
$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'set:72157618541455384',
flickrOptions: {
max: 10
}
});
You can also display photos by tags (use the "tags" option). The options are outlined on the plugin documentation page:
http://galleria.io/docs/plugins/flickr/