The ““, or as I call it — the “fancy corner”, is a special mark used on this site to mark out images that can be viewed in a larger version with a pop-up window. This blog will explain how this functionality is made possible with FancyBox and jQuery.

Before starting the “tutorial”, I’d like to thank Kanglai Qian who is a brilliant programmer and as well my good friend, for sharing thoughts and awesome plugins when I was developing this template. Many hyde problems will be much more painstaking without his help and his hyde source code. We’ve also collaborated in a number of projects, which can be found at GitHub.

Besides, I’d like to take time to explain the word “tutorial”. In fact, what I mean by tutorial is more of some summary, where I summarize the problems I encountered and tricks I used to solve them. I’d like to share with you all the tricks that I used, and all possible modifications of this template to make it yours, especially for people who are not that familiar with HTML/CSS and hyde/Django/Python like myself.

Let’s get to business. The problem of fancy corner is actually threefold: (a) how to get FancyBox to work, (b) how to attach the fancy corner (or any other indicators you like) on an image equipped with FancyBox, and (c) how to do this easily for all images without changing the HTML source code. For the first problem, the best suggestion I can offer is visiting FancyBox’s official site and find out yourself. Hence, let’s skip this problem and focus on the remaining two.

Formally speaking, attaching the fancy corner to the image is a problem where we seek to locate the fancy corner image at exactly the top right corner of the given image. After a wild search on the Internet, I found out a solution for similar problems: locate the close button image for a pop-up window layer. The solution is astonishingly simple, in fact:

#outer {
    position:relative;
}
#inner {
    position:absolute;
    right:10px;
    top:10px;
}
<div id="outer">
    say something about your pop-up window.
    <div id="inner">
        put your closing button here
    </div>
</div>
As long as the parent position is relative and the child position is absolute, the “left right top bottom” attributes of the child element is relative to the borders of the parent element.

So is that it? We add an inner <div> inside the <a> tag of FancyBox after the <img>, set <a>‘s position to relative and our <div>‘s position to absolute, arrange top and right to 0, and now we have a beautiful fancy corner? Yes, and no. Yes, now you have the appearance where the image has a fancy corner on the top right corner… But it’s probably not the top right corner of the image exactly. You’ll have to remove the <a> tag from the document flow to automatically adjust its width for the fancy corner to locate properly. Adding “float:left” will do that. However, this will cause damage to the overall format. Thus, an encompassing <div> would be needed to put it back into the document flow, with the style “overflow:hidden”.

What’s left is: we need to automatically add this “style” to all FancyBox images. Thanks to jQuery, which has powerful DOM selector and DOM manipulation functions, this task is just a piece of cake. I’ll not be able to explain all about jQuery, so it’s better if you just visit its site. Here’s my implementation in “site.css” and “main.js”:

.fancyimg {
    position:relative;
    margin:0px 10px;
    width:auto;
    overflow:hidden;
    float:left;
}
function loadimg(){
    // FancyBox set-up
    $("a.fancyimg").fancybox({
        'width': '75%',
        'height': '75%',
        'overlayShow': false,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'titlePosition': 'inside',
        'overlayColor': '#000',
        'overlayOpacity': 0.9});

    // Attach fancy corner
    // I attached my fancy corner as a <div> tag.
    $("a.fancyimg img").after('<div style="display:block;width:16px;height:16px;
    position:absolute;  
    top:0px;            
    right:0px;
    background:url(\'/media/images/fancycorner.png\') no-repeat;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src=\'/media/images/fancycorner.png\');"> </div>');

    // Wrap the outter <div>
    $("a.fancyimg").wrap("<div style='overflow:hidden;' />");
}

Enjoy!