Found several similar questions, but not the answer to this specific one..
Is there a way to add a title to BOTH the top and bottom of a FancyBox2 modal/popup?
I know how to position the title to the top or bottom. But need to put a title on the top and a caption on the bottom.
Thanks to all in advance..
You can modify the default fancybox template to add some extra HTML in. Like so:
Your HTML:
Click
Javascript:
$(".fancybox").fancybox({
type: 'iframe',
beforeLoad: function() {
var caption = this.element.attr('data-caption');
this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'
},
helpers: {
title : {
type : 'inside',
position: 'top'
}
}
});
I've used an iFrame as an example, but this should work for any Fancybox type.
JS Fiddle here:
http://jsfiddle.net/WillDonohoe/thy0om73/
Look under the tpl section of the fancybox docs for more information: http://fancyapps.com/fancybox/#docs
I am using jQuery 2.1.1, and have been using it to add 'clickable' to rows returned from a database using this:
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
</script>
That has been working fine. I have now added jquery-ias (2.1.2), and only the first page of returned results has clickable rows.
My jquery-ias code is as follows:
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
negativeMargin: 250,
});
});
</script>
Jquery-ias is working fine, the pages are loading as needed, but the resultant rows are not clickable.
Inspecting the page in Chrome shows that the subsequently loaded rows have not had the clickable attribute added.
The relevant row in the php is this:
<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>
All works fine if I use either, but how do I get them to play nicely together?
EDIT.....
OK, I have worked around it using the jquery-ias built-in pageChange event.
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {
var delay=1000;
setTimeout(function(){
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
},delay);
});
This way when ias finds a page change, it waits a second for the page structure to load, and then applies the clickable class.
I can't see this working if it's waiting for images though... doesn't have to for this instance, but there's got to be a better way to do this.
Any pointers?
the better way would be to use the rendered event, for example:
jQuery.ias().on('rendered', function(item) {
var $items = jQuery(items);
$items.each(function() {
jQuery('tr[data-href]', $this).addClass('clickable').click(function() {
window.location = $(this).attr('data-href');
});
});
});
I've got a feeling this is impossible, but I thought I'd ask anyway. There are a couple of similar questions, but none fix my particular problem.
I've got a site with a couple of fancybox galleries (link here). The client wants a like button on each image, which will link back to that specific image. As the site is live I've taken down the like button for now.
I've added anchor links to each image so I can open them from a URL no problem - like so http://www.izzyhodge.com/portfolio/index.html#image01. I can also get the actual like button up no problem, as I'm already using a bit of java to add the "poem" hover over thing (it just includes the contents of a bunch of divs in respect to each image). However, when I add a like button using the Facebook code, not only does it add another like button on the next image in a different position, but the button likes the main portfolio page not the anchor link.
The only solutions I could find for using an anchor link with the Facebook button used meta tags in the header of the liked page, which of course I can't do.
I'd really appreciate some help with this one! BTW, I'm using Fancybox 2.0, and I'm using the HTML5 method of adding a button (not sure if I have to change doctype for this?).
EDIT: I'm now trying to do this using the Social Buttons JSfiddle here, however I'm using the alt tag as the title and I'm not sure how to combine the two pieces of code. My JS now looks like:
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeShow : function() {
if (this.title) {
// New line
this.title += '<br />';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
}
}); // fancybox
}); // ready
If I remove;
this.title = alt;
I get a div which appears about the right size for the like button, but there's nothing in it! This could be due to my custom title formatting in the CSS.
HTML for Fancybox:
<div id="thumb-container">
<a id="image01" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_1.jpg"><img src="/images/portfolio/thumbs/th_1.jpg" alt="<h2>LOLA LURKING IN THE LILYPADS <br/> Book Cover (Book in progress) <br/> Pencil and Digital</h2>"/></a>
<a id="image02" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_2.jpg"><img src="/images/portfolio/thumbs/th_2.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE OTTER<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
<a id="image03" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_3.jpg"><img src="/images/portfolio/thumbs/th_3.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE POLAR BEAR<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
ETC
</div>
<div id="appendContent" style="display: none;">
<div><div class="fb-like" data-href="http://www.izzyhodge.com/portfolio/index.html#image01" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div>
<div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/otterpoem.png" alt=""/></a></h2></div>
<div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/polarbearpoem.png" alt=""/></a></h2></div>
ETC
Cheers!
The issue is that this line
this.title = alt;
will override your previous title, which included the facebook button. You should rather do :
this.title += alt;
full code :
$(".fancybox").fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title += alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
},
helpers: {
title: {
type: 'inside'
}
}
});
JSFIDDLE
On the other hand, bear in mind that this line
if (this.title)
validates if the title attribute exists on the <a> element .... in your case it does and it simple says image01, image02. etc. so it's also shown in the fancybox'a title.
If you just want to use the title attribute to show up on mouse hover but not in the fancybox's title, then remove the condition and built the title from scratch inside the callback like :
$(".fancybox").fancybox({
beforeShow: function () {
// New line
this.title = '<br />'; // here we start the title
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title += alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
},
helpers: {
title: {
type: 'inside'
}
}
});
JSFIDDLE (Updated)
I have a site with a fancyBox gallery. I have added the Facebook like button to the gallery so I have a like for each image in the gallery. Problem is, that when clicking like on one of them, it doens't poste to facebook. However, it saves who likes what, so when others open the same gallery they can see who has liked what, but it's not posted.
I need to have each liked image to be posted on facebook.
I have tried with jsfiddle, but no matter what I do I can't get it to work: http://jsfiddle.net/sZG4L/
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").attr('rel', 'gallery').fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=standard&show_faces=true&width=450&action=like&font&colorscheme=light&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>';
}
},
helpers : {
title : { type : 'inside' },
buttons : {}
},
afterLoad : function() {
this.title = (this.index + 1) + ' / ' + this.group.length + ' ';
}
});
});
I guess I need some sort of variable, so my "this.href" points to each image, also after it is closed, maybe some dynamically function. I have been searching for this, but not been able to find out.
I have also tried updating the facebook like to html5, but then I'm not able to get it visible.
Hope someone can help.
In Facebook status update box, when I type # and start typing and choose a name, say Steven Gerrard, from the friends list suggested by fb, my friend's name is highlighted in the textarea like this
I checked with Firebug and there's only
a div.highlighter which contains sort of formated text (Steven Gerrard is within b tags)
a textarea inside a div.uiTypeahead. Nothing interesting i could find
and a hidden input, that contains the actual text that will be posted: #[100001915747xxx:Steven Gerrard] is awesome
What is the secret trick behind this? Normal rich text editors like ckeditor usually have an iframe to display the text and an actual textarea to keep the original content. But in this case, I do not see anything. Someone please shed some lights?
I would like to make something like this but have no clue where to begin. Also, if I would like to display a small thumb next to my friend's name, is it possible at all?
Here is how it works:
You superpose the textarea (in front) and a div (behind) that will have the same size, and the same font size.
The textarea must have a transparent background, so we can see its text, but also see the div behind it.
The div behind it will have a white text and white background, so the text it contains will be transparent.
You set a hook on the textarea's keyup, and you process the text it contains as HTML: replace the line breaks by <br/>, replace the double spaces by , and also replace all the words that you want to highlight by a version surrounded by <span style="background-color: #D8DFEA;"></span>.
Since you can see the highlight div behind the textarea, and that the text the highlight div contains is perfectly aligned with the text in the textarea, and that the <span> is visible, you will have the illusion that the text in the textarea is highlighted.
I've written a quick example based on jquery so you can try it yourself, without too much code to analyze.
Here is a sample code you can just copy-paste-save and try:
This sample code will highlight a defined set of word, here: "hello" and "world".
I'll let you adapt it the way you want.
<html>
<head>
<title></title>
<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- The javascript xontaining the plugin and the code to init the plugin -->
<script type="text/javascript">
$(function() {
// let's init the plugin, that we called "highlight".
// We will highlight the words "hello" and "world",
// and set the input area to a widht and height of 500 and 250 respectively.
$("#container").highlight({
words: ["hello","world"],
width: 500,
height: 250
});
});
// the plugin that would do the trick
(function($){
$.fn.extend({
highlight: function() {
// the main class
var pluginClass = function() {};
// init the class
// Bootloader
pluginClass.prototype.__init = function (element) {
try {
this.element = element;
} catch (err) {
this.error(err);
}
};
// centralized error handler
pluginClass.prototype.error = function (e) {
// manage error and exceptions here
//console.info("error!",e);
};
// Centralized routing function
pluginClass.prototype.execute = function (fn, options) {
try {
options = $.extend({},options);
if (typeof(this[fn]) == "function") {
var output = this[fn].apply(this, [options]);
} else {
this.error("undefined_function");
}
} catch (err) {
this.error(err);
}
};
// **********************
// Plugin Class starts here
// **********************
// init the component
pluginClass.prototype.init = function (options) {
try {
// the element's reference ( $("#container") ) is stored into "this.element"
var scope = this;
this.options = options;
// just find the different elements we'll need
this.highlighterContainer = this.element.find('#highlighterContainer');
this.inputContainer = this.element.find('#inputContainer');
this.textarea = this.inputContainer.find('textarea');
this.highlighter = this.highlighterContainer.find('#highlighter');
// apply the css
this.element.css('position','relative');
// place both the highlight container and the textarea container
// on the same coordonate to superpose them.
this.highlighterContainer.css({
'position': 'absolute',
'left': '0',
'top': '0',
'border': '1px dashed #ff0000',
'width': this.options.width,
'height': this.options.height,
'cursor': 'text'
});
this.inputContainer.css({
'position': 'absolute',
'left': '0',
'top': '0',
'border': '1px solid #000000'
});
// now let's make sure the highlit div and the textarea will superpose,
// by applying the same font size and stuffs.
// the highlighter must have a white text so it will be invisible
this.highlighter.css({
'padding': '7px',
'color': '#eeeeee',
'background-color': '#ffffff',
'margin': '0px',
'font-size': '11px',
'font-family': '"lucida grande",tahoma,verdana,arial,sans-serif'
});
// the textarea must have a transparent background so we can see the highlight div behind it
this.textarea.css({
'background-color': 'transparent',
'padding': '5px',
'margin': '0px',
'font-size': '11px',
'width': this.options.width,
'height': this.options.height,
'font-family': '"lucida grande",tahoma,verdana,arial,sans-serif'
});
// apply the hooks
this.highlighterContainer.bind('click', function() {
scope.textarea.focus();
});
this.textarea.bind('keyup', function() {
// when we type in the textarea,
// we want the text to be processed and re-injected into the div behind it.
scope.applyText($(this).val());
});
} catch (err) {
this.error(err);
}
return true;
};
pluginClass.prototype.applyText = function (text) {
try {
var scope = this;
// parse the text:
// replace all the line braks by <br/>, and all the double spaces by the html version
text = this.replaceAll(text,'\n','<br/>');
text = this.replaceAll(text,' ',' ');
// replace the words by a highlighted version of the words
for (var i=0;i<this.options.words.length;i++) {
text = this.replaceAll(text,this.options.words[i],'<span style="background-color: #D8DFEA;">'+this.options.words[i]+'</span>');
}
// re-inject the processed text into the div
this.highlighter.html(text);
} catch (err) {
this.error(err);
}
return true;
};
// "replace all" function
pluginClass.prototype.replaceAll = function(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'),with_this);
}
// don't worry about this part, it's just the required code for the plugin to hadle the methods and stuffs. Not relevant here.
//**********************
// process
var fn;
var options;
if (arguments.length == 0) {
fn = "init";
options = {};
} else if (arguments.length == 1 && typeof(arguments[0]) == 'object') {
fn = "init";
options = $.extend({},arguments[0]);
} else {
fn = arguments[0];
options = $.extend({},arguments[1]);
}
$.each(this, function(idx, item) {
// if the component is not yet existing, create it.
if ($(item).data('highlightPlugin') == null) {
$(item).data('highlightPlugin', new pluginClass());
$(item).data('highlightPlugin').__init($(item));
}
$(item).data('highlightPlugin').execute(fn, options);
});
return this;
}
});
})(jQuery);
</script>
</head>
<body>
<div id="container">
<div id="highlighterContainer">
<div id="highlighter">
</div>
</div>
<div id="inputContainer">
<textarea cols="30" rows="10">
</textarea>
</div>
</div>
</body>
</html>
Let me know if you have any question or if you need help with this code.
After reviewing the way of Facebook do this, I see that the text shown on the screen is:
<span class="highlighterContent"><b>Ws Dev</b> is good</span>
That span is put in a table (with lots of div container), which is style accordingly.
So I think this is the process:
When you type in the box, Facebook does have a textarea that capture what you type, but use javascript to show the typed HTML content in a table.
When you submit, the formatted content in a hidden input (that you already spot in the question) get submitted. It's like "#[100001915747xxx:Steven Gerrard] is awesome".
When the formatted message submit, it is saved to the database. Everytime the page get loaded, from the saved message the HTML is composed and return.
To get the similar effect, you can use any jQuery autocomplete plugin.