jQuery: Integration & Fancybox Tooltip
This post is the integration of two great jQuery plugin:
Tuesday, October 6, 2009
How To Clean Your Rotolog
Fancybox - a clone of lightbox interface more attractive and with some well-implemented features, Tooltip 
- a very versatile plugin to customize the tooltips that you normally have under the attribute of the tag
title \u0026lt;a> - a very versatile plugin to customize the tooltips that you normally have under the attribute of the tag These two plugins are supposed to then have installed and configured. The purpose of this
hack is to have a gallery with Fancybox
image titles and links that can accommodate that show a "tooltip" In order to understand the user that the deviantART link to a page I put a tooltip that shows the logo of the community.
The aim is to insert HTML in the title shown by Fancybox, and to thus attach a link and a tooltip, and at the same time to also validate the page as XHTML Strict!
1. Entering the link in the title picture The title of the image in the gallery Fancybox the attribute is extracted title of the link that launches the image itself, since title
supports as broad a text string value is possible, in line principle, insert HTML (obviously taking care to replace all special characters with their entity), for example:
\u0026lt;a href = "# img1.jpg" rel = "[fancybox]" title = " < a href = " _blank " link_esterno " target = " title = " title " > testo_link < / a > & quot; img > < / > \u0026lt;/ a> In practice, it inserted another tag \u0026lt;a> complete within the attribute
title.
The problem with this procedure is that the browser will interpret the attribute, however, and will display the default tooltip with all the information you have entered ... with a particularly disgraceful!
But since this is a feature not be disabled externally, there is nothing left to do but give up the title attribute
, and choose another, and this decision, of course, we greatly complicate the lives ...
We can not select the attribute id
, because it supports only unique values \u200b\u200bwithout special characters. So we choose the attribute
rev
: it, by definition
W3Schools
, "specifies the relationship between the linked document and the current document."
But the characteristics that we do choose are essentially two:
may contain a text string, 
is not interpreted by any of the major browsers. - This means that we can put anything we want without noticing that the browser, and maintain the validity of the page. However, even if the document valid, you can not just talk about content standards compliant!
- So in the end my name tag \u0026lt;a> have this: \u0026lt;a rel = "[fancybox]" rev = "< a href = " http://blacktealover.deviantart.com/art/Reincarnation-118622078" ; target = " _blank " title = ". " > reincarnation < / a > "title =" reincarnation "href =" images / graphics / large / reincarnation.gif "> \u0026lt;img width="160" src="images/graphics/reincarnation.gif" alt="reincarnation" height="80"/> \u0026lt;/ a>
The title of link "add" must not be empty if you want the tooltip to appear. 2. Hack Fancybox At this point you must go to modify the code to make him take the Fancybox rev attribute instead of
title as it does normally.
The changes are simple: we are interested in only the section of code from line 60 to 97 file- jquery.fancybox 1.2.1.js 
in particular we are going to replace line 63:
{var item = href : elem.href, title: elem.title}; 
in particular we are going to replace line 63: with the following code:
if ($ (elem). attr ("rev")) {var item = {href
: elem.href, title: elem.rev}; } else {var item = {href: elem.href, title: elem.title};}
and the line was originally
78
item = {href: Subgroup [i]. href, title: Subgroup [i]. title}; with this:
if ($ (Subgroup [i]). attr ("rev")) {
item = {href: Subgroup [i]. href, title: Subgroup [i]. rev};} else {
} The two code sections are respectively for a single image and a group of images.
I put the check on the existence of the attribute rev
why so if you decide not to put anything extra in the title of the image, Fancybox behaves as usual, going to fish the contents of the title . In this way, we do not burn the earth behind him. For the link works you should disable the option hideOnContentClick (found in the list of functions in the bottom of the script file) by setting up false
.
Now, to complete this first part dedicated to Fancybox, just go to draw our link with the CSS. The selector
- we are interested to go to hit the links in the title of the image is
- # fancy_title , for example: #
a {color: # f9c587;
text-decoration: none;} # fancy_title a: hover {color
: # fad5a7;
text-decoration: underline;}
3. Entering the tooltipTo invoke a tooltip when you place it on the link, the best way is to use the callback function
of Fancybox. In the bottom of the file Fancybox, jquery.fancybox-1.2.1.js
, let's enter the function that generates the tooltip, and we will call simply "fancyboxCallback. Let's declare
callback option:
callbackOnShow: tooltipCallback, and then, immediately below, the call:
tooltipCallback function () { $ ('# fancy_title a'). tooltip ({track : true ,
delay: 0, fade
50,
ShowURL: false,extraClass "datip"
fixPNG: true,
bodyHandler: function () {return $
(
). attr ({src
: "balloon_da.png": 0
width: "30",
height: "33"
});}
,
top: -40, left
});} ;
Line 2 defines the element that we create this tooltip; attribute is important
extraClassbodyHandler
, we will use later to assign basic properties, and the function passed through
. With this parameter you can inject any HTML in the tooltip, in this case the block is filled with an image.
In my case, I do not want the tooltip displays the text of
datip
title of my link, but a single image (the same for this gallery) that represents the logo of deviantART. Step in the attributes that the tag
\u0026lt;img />
is the image created earlier (+ Its size).
Finally, we develop a class dedicated
: it fits into the file jquery.tooltip.css and in my case is: #
tooltip.datip {background: 0; width: 30px; height: 33px; padding: 0;}
# tooltip.datip img {position: absolute; top: 0; left: 0;}
The first part of the CSS code eliminates any background generic tooltip of this page and set the exact dimensions of the image that will be inserted in the block.
The second part concerns the content of the tooltip, which in this case is an image, and used to obtain a perfect placement. is obvious, given the versatility of the Tooltip, and the way in which we modified Fancybox general, which in principle can have fun by entering the title of a variety of HTML and show tooltip with more of everything, for example an extended caption with lots of text and / or images, or otherwise.
As usual, the limit is your imagination and creativity of each.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment