jQuery Pligg Tooltip

icon1 Posted by Geoserv in Featured Articles, Hacks on 05 10th, 2009 | Comments | 3,891 views

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, 247 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&amp;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.


If you enjoyed this post, make sure you subscribe to my RSS feed!

  • raghhav
    can i use this for my phpld directory if you permit me.
  • its not working at all
  • Can you explain how it isn't working? Perhaps a URL.
  • raghhav
    www.buk-mark.com, i followed all the steps and still those configurations are available on the said pages.
  • You havent added the changes to link_summary.tpl
  • raghhav
    Sorry for the late reply. Yes, I have changed it and it is still exists in the link_summary.tpl template.
  • You need to add the following:

    class="screenshot" rel="http://images.websnapr.com/?size=s&url={$url}"

    to the "a" tag that controls your story title in order for it to work.
  • raghhav
    sorry, i tried its the same. I am using 1.0.1, are any other things am missing.
  • Can you send me your link_summary.tpl file, when I do a "View Source" of your main page, the line required for the tooltip isn't there.
  • raghhav
    can i paste it over here or you will give me a id.
blog comments powered by Disqus