I've never done Javascript,
On the website I've added rel="shadowbox" to the posts to pull up the lightbox of the post. The template has infinity-scroll built in and I've seen that you have to use a callback to make shadowbox work on the new posts. The problem is where do I put the code and how?
Example:
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on
Do I put this in the head in a script tag?
You could include it in the head of your website if you'd like... something like this may work for you:
<script>
$(function(){
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({
// fancybox API options here 'padding': 0
}); // fancybox
});
});
</script>
If you're not so much a programmer and want a top-notch modal plugin (lightbox), I suggest checking out Easy Fancybox. It works and looks great. http://wordpress.org/extend/plugins/easy-fancybox/
Scratch that, Took Shadowbox & Easy FancyBox out completely.
Used Wordpress Built in Thickbox
Above the post added
<?php add_thickbox(); ?>
add a class
class="thickbox"
At the end of the link added because it was an iframe
?KeepThis=true&TB_iframe=true&height=400&width=600
Which I think does it's own callback (I Can't find if I put it in)
If so add the following to the header.php
<script> tb_init( $('a.thickbox, area.thickbox, input.thickbox',this) );</script>
Like I said I don't think it needs it.
Thanks for your help though.
Related
I have a problem with FullPage JS, and I come to ask for help :)
My problem is: I want to disable FullPage for a single page of my Website.
FullPage is made for little page, but my website has 1 long page, where I want to disable FullPage.
The file has the .ejs extension, instead of .html extension. The pages are in different EJS file.
I searched on the FullPage's Github, and it indicates me the destroy('all') method, but I've found a lot of way to write it, I tried 3 methods, and I don't know why, it doesn't work.
Does any of you know how to disable FullPage JS on a single page of the Website ?
I tried 3 methods.
1st Method tried:
document.querySelector('#destroy').addEventListener('click', function(e){
e.preventDefault();
fullpage_api.destroy('all');
});
2nd Method:
$('#destroy').click(function () {
$.fn.fullpage.destroy('all');
});
3rd Method:
function DestroyFullPage() { //default is 700.
$.fn.fullpage.destroy('all');
}
As Alvaro suggested, I tried something like this:
<script>
window.onload = function() {
alert('Ready ?');
fullpage_api.destroy('all');
alert('Done');
}
</script>
The first alert works fine, but the second never appear on my screen, and FullPage isn't destroyed.
Am I wrong in my syntax ?
Thanks
PS: Excuse my English, I'm french, but at least, I try :D
If you wonder how to use the destroy function, you can check the demo provided on the fullPage.js docs:
https://codepen.io/alvarotrigo/pen/bdxBzv
Which basically uses fullpage.js version 3 (no jQuery required) to do so:
fullpage_api.destroy('all');
There's no difference at all between your 2nd method and the 3rd one. In fact, 3rd method won't work until you call the DestroyFullPage somewhere else.
And the 1st one should only be used when initialising fullPage.js with jQuery. So, using $('#fullpage').fullpage(options) instead of new fullpage('#fullpage', options);
I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).
Hi guys I am using this script https://github.com/browserstate/ajaxify to ajaxify all of my links. On one of my pages, I am loading in data using the jquery .load() function.
$(function () {
$('#container').load('/load/load-trending-artists.php?n=1', function() {
$('img').lazyload({ event : 'load', effect: 'fadeIn'});
$('.loadmorecontent').show();
});
});
In this script, I am loading a bunch of images and links that go to other pages of my site. However, when i click on any of these links that have been loaded through jquery .load(), the link is not ajaxified and instead acts normally. This is a huge problem for me and a large inconvenience to my site. Is there any way that links loaded through .load() can still be affected by the ajaxify plugin? Thanks for the help!
Checkout this one if this helps: http://max.jsrhost.com/ajaxify/demo.php
<a id="options" href="#">Setting up options</a>
its been ajaxified with this:
$('#options').ajaxify({
link:'example.php?action=options&ajax=true',
target: '#container',
loading_img:'images/orange_loading.gif',
title:'Setting up options', // change page title. Since v2.0
method:'POST'
});
index.php
// load jquery.js and jquery.ui.js
$("#dialog_a").load("template_a.php").dialog();
$("#dialog_b").load("template_b.php").dialog();
template_a.php
just HTML, no JS
template_b.php
// !!! -> load jquery.js and jquery.ui.js <- !!!
$("#dialog").load("template_c.php").dialog({modal:true});
As you can see, I load two dialogs. #dialog_a just loads text without any function BUT #dialog_b loads a stand-alone-script which includes jquery and jquery.ui again.
After opening #dialog_b (by anchor/onclick) it's not possible to access objects in the index.php (e.g. closing a dialog). For me it seems like template_b.php overwrites the DOM. But I've no idea how to fix this problem. Do you have?
Thanks in advance!
Solution: use the jQuery live() function!
index.php
$(".anchor_in_dialog_or_not_doesnt_matter").live("click", function() {
$("#dialog").dialog();
});
template_b.php
if ($_GET["standalone"])
// load jquery, jquery.ui
endif;
I hope it helps somebody!
Edit: As adamb already mentioned below, use on() instead of live()!
New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.
I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.
For example, the popover seems to work if I manually add this directly to my HTML document:
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>
But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:
echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";
... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!
This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!
UPDATE:
Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!
You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.
UPDATE
If you are using jQuery
$(element_selector)
// load results into HTML of element_selector
.load('your/php/file')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:'left'});
});
OR a catch all for jQuery ajax requests
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
In the success function of the ajax you need to call the popover. Something like this
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});