TGP Tutorials & Articles

Popup Thumbnails on Text TGPs

So you've been running a text link TGP for some time now. With all the thumbnail TGPs popping up, it can be hard to keep surfers' attention... so why not offer your visitors the luxury of thumbnails, while keeping the obvious SEO benefits of your text TGP? Find out how, below.

Live Demonstration

Amateur - 3 movies of home footage of a bubble butted amateur
Amateur - 20 pictures of sexy amateur playing in a pool then getting fucked
Amateur - 16 pictures of brunette amateur gets fucked in the back of the bang bus
Amateur - 14 mixed of hot nichole shows off her tits then sucks cock

Popup can be themed to your liking using a custom stylesheet.

Code to add in the A tag (or link template if using a script)

class="popup" rel="img.php?s=thumbs/4.jpg"
Where thumbs/4.jpg is the path to the gallery's thumbnail. The class of popup is needed to direct which links to display thumbs for, however it can be styled as needed via a stylesheet, or renamed if you've already assigned your thumbnails a class. Just note the 'a.popup' portion of the code below.

Code to add in your page header

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

<script type="text/javascript">
$(document).ready(function() {
$('a.popup').cluetip({
  dropShadow: false, 
  positionBy: 'mouse',
  width:165,
  showTitle:false
}); });
</script>
Where 165 is the width in pixels of your thumbnails. The first group of code includes the external JavaScript modules and stylesheet. The second group of code enacts the popup routines when the DOM (Document Object Model) is ready.

Source code of img.php

<?PHP echo '<html><body><img src="'.$_GET["s"].'"       [cont'd»]
border="0"  alt="Thumbnail" /></body></html>'; ?>

Files to Download:

And place them all in the same folder as your HTML page.

Credits

Copyright 2004-2008 TGP Factory. All Rights Reserved.