jQuery Pligg Tooltip
jQuery has really progressed the web development world to the next level. I am going to show you how to add a simple jQuery feature to your Pligg install that will add a nifty feature that your users will definitely find useful.
One of the problems with most social media websites, like Digg, is you don’t always know if the link you are visiting will take you to something good or not.
That’s what jQuery and Tooltip come in.
I came across this little script when I was trying to find the fastest loading jquery tooltip to add to FAQPAL.
Here’s how to implement on your site, no matter what version of Pligg you are using.
First, download the following zip:
Pligg Tooltip (29.3 KiB, 496 hits)
Extract the contents and upload:
jquery.js and main.js to the js folder in your root directory
Open, pligg.tpl:
After,
{checkActionsTpl location="tpl_pligg_pre_title_thickbox"}
{checkForCss}
{checkForJs}
{checkActionsTpl location="tpl_pligg_pre_title_lightbox"}
{if $pagename neq "published" && $pagename neq "upcoming"}
{if $Spell_Checker eq 1}
<script src="{$my_pligg_base}/3rdparty/speller/spellChecker.js" type="text/javascript"></script>
{/if}
{/if}
add,
<script src="http://www.faqpal.com/js/jquery.js" type="text/javascript"></script>
<script src="http://www.faqpal.com/js/main.js" type="text/javascript"></script>
Save.
Open, link_summary.tpl,
Find,
<div class="toptitle" id="ls_thetitle-{$link_shakebox_index}">
{if $use_title_as_link eq true}
{if $url_short neq "http://" && $url_short neq "://"}
<a href="{$url}" {if $open_in_new_window eq true} target="_blank"{/if} rel="nofollow">{$title_short}</a>
{else}
<a href="{$story_url}" rel="nofollow">{$title_short}</a>
{/if}
{else}
{if $pagename eq "story"}
<a href="{$url}" rel="nofollow">{$title_short}</a>
{else}
<a href="{$story_url}" rel="nofollow">{$title_short}</a>
{/if}
{/if}
</div>
change,
<a href="{$url}" {if $open_in_new_window eq true} target="_blank"{/if} rel="nofollow">{$title_short}</a>
to,
<a href="{$url}" {if $open_in_new_window eq true} target="_blank"{/if} rel="nofollow" class="screenshot" rel="http://images.websnapr.com/?size=s&url={$url}">{$title_short}</a>
Save.
Open, main.css
Add,
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
to the end of the file. Save.
That’s it, now when you hover over the story title, it will show a tooltip with a thumbshot.
Test drive it at FAQPAL.
