Gillesen.nl

JQuery Preview Links

This customization allows you to show link previews of external sites. You can enable this for manual links, but you can also enable this for the Joomla! weblink component.

For this, we need the following

• - Customization in the weblink component
• - JQuery scripts and style

Joomla! weblink component

1. Add the files

• - Replace your /components/com_weblinks/views/category/view.html.php with the file in the download.
• - Upload the 'extra' folder to the /components/com_weblinks/views/category/  folder

The view.html.php file loads the javascript files and the css file from the 'extra' folder in the zip file.

2. Create the screenshots to show

When the scripts and the code are in place, we need to create screenshots of the sites where we link to.

Put the images in the /images/stories/links/ folder with the same name as the title of the link.
If you would like to use a different folder, just edit the line in the view.html.php file.

3.Add styling

Optionally , change the tooltip.css file to your needs.

This file can be found in the /components/com_weblinks/views/category/extra/ folder.

#screenshot {
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
}

Custom links

For custom links, like links you use in your articles, you can add the tags manually to the links.
Take the same steps as described above for the weblink document, but skip the step of copying the view.html.php file.

Open the source of your article in your article editor and add the following tags to the link:

• - class='screenshot'
• - rel=''
• - title=''

Download for free