[MOD] External Link Preview

[Boby]

Hey guys!

Based on the powerful Javascript library Prototype (http://prototype.conio.net), and inspired by the incredible Scriptaculous (http://script.aculo.us), the Window class creates effects to show and hide windows directly in your HTML markup.
I've combined these with phpLD and created a new mod. While browsing, your directory guest can have a live preview of the page they are looking for.
And here it is for download (take the package for your phpLD version):
http://www.frozenminds.com/phpld-link-preview.html

All needed files, images, stylesheet, tpl's, javascripts, documentation are included in the package.
The module can be added to all versions of PHP Link Directory.
Installation time: maximum 5 mins.

I don't have any live demo now, because I don't run a directory. But you can view a screenshot ;)

Content visible to registered users only.

Notes:

I have *not* tested this mod with Internet Explorer. I don't have it on my PC installed (have only Linux).
The semi-transparent background won't work in Internet Explorer and all other browsers based on it's engine. It uses a .png images that IE's engine cannot understand. You could probably replace it with a semi-transparent .gif images. Gecko based Browsers (Firefox, Konqueror, etc) and Opera have no problems with it.

To keep the original license of the used libraries and to not fall in any problems (again) because of copyrights and other things, the mod is released under the MIT License.

Hope you like it :p and please let me know if you add it to a directory, I'd like to see it in action.

Thanks, Boby!

[droolingmnky]

Wow looks pretty neat, so If I'm understanding it correctly then it will just popup A little 'preview' of the link with out actually loading the link for the user?

I might be intrested in implementing this. If any thing it seems like it would be fun.

[anon]

Boby, is this suppose to be like YPN(Yahoo Publishing Network), where it basically pauses the main window while another opens in the current window?

[Steven Myers]

This looks sweet :D but is there a step by step with this, because I am going to install it now, but I am not exactly sure where these are safely needing to be implemented at on 3.05

[David]

Yes, this is pretty nifty. I hope someone will post a demo when they get it working. :)

[Boby]

Content visible to registered users only.Yes, you get a popup but it will load the page. You can't do it without the page load, only if you would add images, but that isn't a very good ideea because there are soon outdated.

Content visible to registered users only.Yeah, somehow. It makes the preview 'active' and the rest somehow 'disabled'. It's just an illusion, the rest of the page is still active but a semi-transparent image is added on top and that makes you think the rest is disabled. With Firefox you also have a nice fade-in and fade-out effect ;)

Content visible to registered users only. Just download the package and you have the documentation in a PDF file. Also there are all files needed, so when you have to edit for example the header.tpl file you can eighter replace it with the one provided or get the code from there.

When you unpack the archive, check the demo.html file. It's a basic page with one preview (no need to install anywhere, just run).

Boby

[Steven Myers]

Thanks bobby, I ran the code exactly how said in the document for 3.05, and it bugged the header and link tpl files real bad, it's a very easy setup to install and copy over to the server, but it's bugged pretty bad when you complete the implement.

I'll wait until someone else tries it out to see what they experience.

Thanks for the share!

[Boby]

I will try to set up somewhere a temporary directory for you to see how it works. Maybe tomorrow.

Boby

[anon]

Content visible to registered users only.
YOU!!! back to work!

more options to make ;)

[dedoo]

pretty nice! IE has some problems though and some sites force to open their pages in a normal browser so the preview window gets closed and the page is redirected normally.

[dotcompals]

I am testing a new directory with this mode. But when i click the preview link shows some script error.
please take a look http://www.tattamangalam.com/free_web_directory/WebDirectories/General/

[arindra]

is this like what you get in TM ?

[Boby]

Content visible to registered users only.
What is TM?

[anon]

templatemonster i'm guessing, Boby.

goto www.templatemonster.com and mouse over any of the templates.
it's a nifty feature.

[Boby]

Ahh, ok.
Yes arindra, it's something simmilar.

Boby

[arindra]

thats what i meant , Anon / Bobby . and yeah , its a very nice feature

[mrbadgolf]

I tried with no luck. My whole directory dissapeared.

[gesugefu]

Hallo Boby,

when i put this
{include file="preview_js.tpl"}
after
</head> <body>
i have a smarty error
Content visible to registered users only.

greets jürgen

[Boby]

Are you sure the tag is correct?
The error shows a "?" in
include?file="preview_js.tpl"

[VSDan]

Thanks Boby! I got this mod working in a few secs. You can see it in action here:

http://www.monster-submit.com/directory/index.php?list=latest

[Boby]

Content visible to registered users only.
Hey Dan,
thanks, nice to see it in action :D

Boby

[blogmaster2003]

Content visible to registered users only.

I had this error too.

I copy from the pdf file with select text, i DOUBLE check if that line has ?, but no:

its:
Content visible to registered users only.

[Jama62]

Was this ever resolved?
I have the same problem

vers 2

[gastongr]

Looks awesome.
can the size of the frame be changed?

[dannet]

Thanks for the mod!

I solve the problem of
Content visible to registered users only.
deleting one of the script tags of :

Content visible to registered users only.

In the instructions you are adding a repeated tag of this script (before included in your header), and the same tag defined defined twice produces the error.

You can try also looking for a repeated scriptaculous.js definition.

[Boby]

Well, I can't seem to find the info where I repeated a tag description. :rolleyes:
But great you got it working.

Boby

[dannet]

pardon, my english is not very good, perhaps there are some templates or another modifications that already contains the definition of that tag, at least in my case the solution was that... Thanks for your contribution and greetings

[Boby]

Well, I made the documentation for the default template. Maybe that's why you had something twice there.

However, I'm glad you managed to install it.

[tomzx]

I believe to have found the reason why we're getting X
It's because when you copy and paste, the space aren't the same in HTML and PDF format. What you'll have to do is select each space and replace them with a space (type on your keyboard). This should remove all the ? (answer to an unknown letter.

If you don't want to work too hard, you can go check my install and copy the javascript instruction in the header @ my directory site

[jeeplaw]

I've got it working nicely on my site - www.dietdirectory.org, however, does anyone know of a replacement png I can use ( a gif) so that this will work with IE as well?

And, can anyone tell me how to implement a "onmouseover" effect so that when someone mouses over on the preview link without actually clicking it, it'll activate the preview?

David

[anon]

David, try searching around for the IE png fix. It's somewhere out there on the web.

bold italics should give good results via google.

Rob

[Boby]

For an onmouseover effect you can use:
Content visible to registered users only.

And yes, you could try a semi-transparent .gif image that you'll just have to change from your CSS file:
Content visible to registered users only.

I am tired of all these IE workarounds for stupid bugs and most of my regular mods don't and won't support IE anymore except they know how to handle things like all other browsers do.

Boby

[jeeplaw]

Nice, thanks for the help guys. One more thing- does the css control the preview box size? I'd like it maybe 1/2 the size it currently is.

[proprod]

In action here, looks better in Firefox, just click on Preview Site for any one of the links. EDIT: Except Active Web Links for some reason, lol :EDIT

http://links.scrabblestop.com/top-hits.html

[GimmeMyDomains]

This might be cool on the approval page too, so you could do a quick preview of submissions by just hovering, instead of opening up each site.

How hard would that be?
Thanks,

[shadav]

ok is it just me? I've visited VSDan and proprod's sites and I'll preview the first link and close out of it no problem, however if i go to preview a 2nd link...when i click to exit, it removes the transparent background but the preview is still there and won't close...i have to close the page down (which isn't good for ya'll cuz you're prob losing repeat traffic)

[logicamente]

I have the same problem.
unrecognized tag: include file="preview_js.tpl" (Smarty_Compiler.class.php, line 436)...

I've deleted the duplicated scripts but it don't work.

Help me please!

[logicamente]

Hi!
Now I solve this problem...the error doesn't appear.

But now, in the page, I see only the word Preview and not the preview of the home page of the link.

Why?

Thanks
Alessandro