Regular FancyBox 1.3.4 w/ Wordpress - Link - javascript

when I search for this on google I just get a lot of wordpress plugin responses, so I'm asking here.
I have a wordpress.org blog. There's a link that, onclick, I would like to open up a fancybox w/ some content inside of it, actually a spotify embeded playlist w/ a header.
I've included all of the fancybox files and initialize, and no luck. Here is my code:
Initialization:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#playlist_pop").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
And here is my html:
<div class="spotify_header" style="padding-bottom: 10px;padding-top: 10PX;text-align: center">CHECK US OUT ON <a id="playlist_pop" href="#playlist_data"><span>SPOTIFY</span></a>
<div style="display:none">
<div id="playlist_data">
<div id="Spotiplay">
<h3>Artists We Love</h3><br/>
<div id="playlist_pop_con"><iframe src="https://embed.spotify.com/?uri=spotify:user:yalefox:playlist:3NCBHSkbl0jLZtUnNWkdPh" width="312" height="392" frameborder="0" allowtransparency="true"></iframe></div>
</div>
</div>
</div></div>
Can anyone help me with this? Incredible how something so easy can be made such a pain in wordpress..
I get this error message in the console: Uncaught TypeError: Object [object Object] has no method 'fancybox'
Does this mean it's not reading the fancybox js files?

Thanks so much for the help. Not sure if it has anything to do with my client's blog configuration or just a lack of support for regular Fancybox 1.3.2 and wordpress.org, but I had to resort to the Lytebox wordpress plugin - http://wordpress.org/extend/plugins/lytebox/ -where you just include a rel="lyteframe" in the a tag..I restyled it to look just like a fancybox, so while not optimal or as robust as fancybox, it's not a bad alternative

Related

$ is not defined lightgallery

For some reason my lightgallery is not working. I added it the same way I always do and all javascript files are included after Jquery.
I get this message in the console:
Uncaught TypeError: $ is not a function
at product-1.html:433
(anonymous) # product-1.html:433
Which points to:
<script type="text/javascript">
$(document).ready(function($) {
$("#lightgallery").lightGallery();
});
</script>
All files are correctly loaded, I checked in the network tab.
What could be the problem and how can I fix it? Maybe there is a conflict somewhere? Can I wrap it in a function to make it work?
My js files:
in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html content
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body include light gallery js files after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
This really works for me.
Clearing browser cache may help sometimes. Or narrow down your problem by loading one by one starting with jquery.
This solves the problem :
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
1.Check your maps api js link like https://developers.google.com/maps/api/js this is correct or not
2.Press Ctrl+Shift+Del button at a same time and clear caches and cookies

How do I use Thickbox to display videos?

I'm trying to use thickbox to display a video on a page. Followed the instructions on the site but when I click on the link it just takes me to the youtube page which is not what I want.
I have the call to jquery and thickbox in my header, as well as the css for thick box:
<script src="<?php bloginfo('template_url'); ?>/javascripts/thickbox.js"></script>
<script src="<?php bloginfo('template_url'); ?>/javascripts/jquery.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/stylesheets/thickbox.css">
and here is the code in the body:
<strong>
<a class="thickbox" href="//www.youtube.com/embed/########?rel=0?KeepThis=true&TB_iframe=true&height=400&width=600" title="##### Hanson">
<img src="http://www.#########.org/campaign/wp-content/uploads/sites/59/2013/09/#####.jpg"/>
</a> ##### Hanson*<br>(1960 B.S.M.E.)
</strong>
For the sake of privacy, I hashed some of the info in my code above. Any suggestions on what could be wrong?
Edit: Should probably mention I'm using this in word press
You need to load the ThickBox <script /> AFTER the jQuery file...like the code below.
EDIT: Also, replace the jQuery script you had with the CDN jQuery version, which I used in my example. Then clear your browser cache (important when working with WP).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/javascripts/thickbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/stylesheets/thickbox.css">
As a rule of thumb, your jQuery <script /> should always be the first js file listed. It needs to load first before your other js scripts (assuming the rest of your scripts require jQuery). Otherwise they won't be initiated.

jQuery Toggles Plugin (Toggle Buttons)

I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/
See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**

Foundation Orbit doesn't initialize

I'm working with Foundation 4 framework. I've been trying to include the Orbit slide into my website, but I can't seem to get it to work.
So I followed the steps in Foundation documentation. I've included all necessary scripts
<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).foundation();
</script>
Then I tried to add a simple slideshow
<ul data-orbit>
<li>
Test1
</li>
<li>
Test2
</li>
<li>
Test3
</li>
</ul>
But, instead of generating a slideshow all I get is an unnumbered list. I triple checked to make sure I didn't misspell anything. Here's an example of what I get.
In my expirience Foundation's scrips are a little messy, so try to do the following:
place modernizr inside the <head>
reference the following js at the end of your <body> just before the </body> tag :
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
That way you load Zepto in modern browsers, and jquery in the old ones, then you load Foundation, and then you tell the document to grab the format. There's no need to load the orbit js, as it is inside the min version of Foundation.
The code is documented at http://foundation.zurb.com/docs/javascript.html
I also had this problem.
The the prot fix that ezabaw used worked for me.
The orbit.js is required for this feature.
TCasa
Dan and TCasa are right. Do not forget foundation.orbit.js . It's essential.
So put this just before the </body> end tag:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.js"></script>
<script src="js/foundation.orbit.js"></script> // <-- Don't forget this one
<script>
$(document).foundation();
</script>
Make sure the paths are right too.
I used Foundation in combination with Compass so my paths were : js/foundation/foundation.js and js/foundation/foundation.orbit.js.
Good luck
There is an easier way.
The Slider needs to be initalized after the page is fully loaded.
For me, after following all aforementioned steps in other answers the following worked
<script>
$(document).ready(function() { $(document).foundation(
//add custom options to orbit
'orbit', {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: true
);});
</script>
The additional custom options can be found here Link to Foundation Docs
A working example is here (helped me solving this issue)

Fancybox won't work

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.

Categories