i need help implanting my jquery script in wordpress.
I already linked everything in function.php (wp_enquere_scripts) and i checked it, both js load.
Now i have a problem not displaying what i would like to and I have no idea why...is it possible that my source-link is wrong?
here the code (its a 3d model viewer with images)
<div class="wpb_wrapper">
<script type="text/javascript"> $('.wpb_wrapper').spritespin({
source: SpriteSpin.sourceArray('/img/rad_zoom_{frame}.jpg', { frame: [1,34], digits: 3}),
width: 1100,
height: 770,
sense: -1,
mods: ['move', 'zoom', '360'],
autostart: false,
behavior: null,
module: null
});
here the link of the official plugin:
http://www.jqueryscript.net/other/Versatile-jQuery-Product-Image-Viewer-Plugin-SpriteSpin.html
maybe you guys know a better way putting this onto a wordpress-site
thanks
Related
So, I've got what looks to me like a pretty simple setup. My end goal is to embed a lottie animation into my website (webflow). In Atom everything works fine.
HTML:
<body>
<div id="lottie"></div>
<script src="lottie.js"></script>
<script src="index_1.js"></script>
</body>
index_1.js:
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
autoplay: true,
path: 'process_1.json'
})
And the animation plays in my HTML preview! Yay! Webflow, however doesn't have file hosting, so I decided to throw my "lottie.js" and "index_1.js" scripts and "process_1.json" on Amazon s3 and link them up using the file's public urls, but nothing appears on my website!
Is Amazon s3 not good for this sort of thing? Perhaps the "path" parameter in my index_1.js doesn't accept urls?
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
autoplay: true,
path: 'https://audioplayerskin.s3.amazonaws.com/Json+Files/Process_1.json'
})
What could be the problem here?
Thanks! :)
I am using a Cube Slider 3d plugin for a slideshow and I have it starting on 'mouseenter' using jQuery, which works fine. I want it to stop on 'mouseleave' and cannot get it to work. Been unable to find anything to guide me in the right direction. Please see the code below. It is the code I use to start. As you can see, there is an autoplay option, which I set to 'true'. Logic would tell me to set the value to false on mouseleave, but that does not work and seems a bit redundant to use cubeslider() again. I have also tried jQuery method stop() and thought about trying to use setInterval() and clearInterval() with it somehow. With using a jQuery plugin it doesn't seem like much additional jQuery/JavaScript would be needed. I could be wrong as I've been neglecting jQuery/JavaScript for another focus and probably need a refresher on many JavaScript concepts. Any help is appreciated. Thanks
$('#cubeSlide').mouseenter(function() {
$('#cubeSlide').cubeslider({
cubesNum: {rows:1, cols:1},
orientation: 'h',
autoplay: true,
autoplayInterval: 500,
perspective: 1200,
mode3d: 'auto',
arrows: false,
navigation: false,
addShadow: false,
});
});
I'm really struggling with this...
I set up a really easy window.onload shadowbox.js popup window
However, when I try to use the same exact code on a dev wordpress site I'm creating, the shadowbox popup is not loading at all and I'm not sure why... what's weird is that everything for the shadowbow.js and css are loaded extrernally from a seperate directory, but it looks like my theme is taking over for controlling elements?
http://krimsonkloverdev.malbert.me/test/
I'm REALLY stumped on this, so if some kind soul can help me out with this or steer me in the right direction I would GREATLY appreciate it.
Thanks for reading.
Try adding popup open script in footer.php file. I mean the script below.
<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: 'your-content-file-url',
player: "iframe",
height: 340,
width: 540
});
};
</script>
NOTE : Make sure your change the content: url
I hope this will solve the issue.
Thanks
I am willing to use the jQuery UI layout plugin (layout.jquery-dev.net) to make 2 resizable <div>. It would be just the center and east panels we can see here.
From the documentation I could make the simplest layout to work :
<script type ="text/javascript">
$(document).ready(function () {
var oOptions = {
applyDefaultStyles: true
};
$('body').layout(oOptions);
});
</script>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">East</div>
</body>
But when I try my own thing (with both panels resizable by dragging the vertical divider), it stops working entirely.
var oOptions = {
closable: false,
resizable: true,
slidable: true,
center__minWidth: 200,
east__minSize: 200
};
I have no background in JavaScript and I might just be dumb asking here. But from what I understood when reading the <script> at the demo page (same as above), it should works fine with the resizable option only.
Using jQuery 1.9.2 did the thing.
Im having a problem with oembed outputting an error in firebug's console windows as such:
oembed is null
oembedContainer.html(oembed.code);
which is when clicked will point to the jquery.oembed.js file.
my declaration of oembed is that it will replace all links with a class name of oembed, like so:
$(".oembed").oembed(null, {
embedMethod: "replace",
maxWidth: 350,
maxHeight: 350,
vimeo: { autoplay: false, maxWidth: 350, maxHeight: 350 }
});
i think the error is pointing on the first parameter of the function oembed().
but i really dont know what is happening inside, do somebody know a workaround here??
This is the link where I got the code:
http://code.google.com/p/jquery-oembed/
I had the same problem until I noticed the snippet had a non absolute url for loading the script. Therefore it never loaded at all. Change this:
<script type="text/javascript" src="../../jquery.oembed.js"></script>
For the actual url of your script, for example, if you're testing it local and both the html test page and the script are in the same folder:
<script type="text/javascript" src="jquery.oembed.min.js"></script>
That will do the trick.