Link Mouseover Popup Preview Bubble v1.0

24 posts / 0 new

Last post

Tue, 04/22/2008 - 17:52

puravida

Jedi Warrior

Offline

Joined: 09/01/2007

Here is a link preview mod that I re-wrote to work with STW and enhanced from there. I have left the original author's reference information intact, and the only requirement for you to use this is that you do the same.

To use the code, just download it and extract it.

Check out the latest sample codes and plugins on our plugins page:
ShrinkTheWeb Site Preview Plugins

The files will be in a folder called "stwpopup" and you will need to modify a few things before using it.

1. open up stwpopup.js
2. find the following:
http://www.shrinktheweb.com/xino.php?embed=1&stwu=&STWAccessKeyId=&Size=lg&stwUrl=
3. replace with your simple method URL. In other words, put your secret key after stwu= and then put your access key after STWAccessKeyId=

4. Now, just upload the folder into your root directory on your server.

5. Then, in your page where you want to show the preview bubble, you will need to put this before the < /head > tag:

<style type="text/css" media="screen">@import "/stwpopup/stwpopup.css";</style>
<script type="text/javascript" src="/stwpopup/stwpopup.js"></script>

This link preview will show a popup with a thumbnail in it for any link in your page that uses a class="stwpopup" in it. For example:

<a href="http://www.shrinktheweb.com" class="stwpopup">STW</a>

That will show the popup bubble on mouseover. If you do not use that class, the link will not show the popup bubble.

That should be it. If you have any troubles, please PM or email me.

If anyone has a better preview, please do post it for others to share!

-Brandon

p.s. If you want to use the xlg thumbnails for previews, you will need to:

1. open up stwpopup.js
2. find the following:
http://www.shrinktheweb.com/xino.php?embed=1&stwu=&STWAccessKeyId=&Size=lg&stwUrl=
3. replace &Size=lg with &Size=xlg
4. rename stwpopup-xlg.css to stwpopup.css
5. rename lb-xlg.png to lb.png
6. rename rb-xlg.png to rb.png
7. rename lt-xlg.png to lt.png
8. rename rt-xlg.png to rt.png
9. Then, upload those files to your server

Wed, 04/23/2008 - 12:19

GloTouch

Offline

Joined: 04/13/2008

Live example of this code: No Longer Available, Sorry.

I also made a small change to the javascript file to make configuration easier.

I added this code to the top of the stwpopup.js file:

/*
	CONFIGURATION START - Fill in the variables for this code to work properly
	
	userid = Your User Key.  You can find this by Logging in -> Find "Your Secret Access Key: <This is what you need>" at the bottom of the page.
	stwaccesskeyid = Your STW Access key id.  You can find this by Logging in -> Find "Your Access Key ID: <This is what you need>" at the bottom of the page.
*/
	var userid =         "XXXXX";
	var stwaccesskeyid = "XXXXXXXXXXXXXXX";
/*
	CONFIGURATION END - Editing beyond this point is for advanced users only.
*/

Then I replaced stwpopup.img.src code with this:
stwpopup.img.src = 'http://www.shrinktheweb.com/xino.php?embed=1&stwu='+ userid +'&STWAccessKeyId='+ stwaccesskeyid +'&Size=lg&stwUrl='+ encodeURIComponent(addy)+'&rndm='+parseInt(stwpopup.linkPool[stwpopup.lnk.href]);

This just makes configuration a little easier, but not necessary.

When I first installed this code, the thumbnail was displaying on pageload and would only go away until I moused over the link (IE7, Firefox was fine). I don't recall changing anything, but this no longer happens for some wierd reason.

Wed, 04/23/2008 - 14:15

puravida

Jedi Warrior

Offline

Joined: 09/01/2007

Ah, very cool.

Thanks for the mod, glotouch!

-Brandon

Thu, 06/26/2008 - 11:19

puravida

Jedi Warrior

Offline

Joined: 09/01/2007

I added in Glotouch's mod with a little extra mod for the size as well. This definitely makes it easier for the average webmaster, which is our goal.

Thanks again, Glotouch, and note that the updated stwpopup download also contains a few extra items. Now, I have added the ability to support xlg sized thumbnails.

To do this, you will need to:

Here's an example of the popup code using xlg mousover thumbnails in action:

http://www.shrunktheweb.com

-
-
-

Wed, 08/13/2008 - 23:57

Anonymous

Hi,

How we can get the Accesskey?
Can any one please give me the details.

Regards
venkat

Thu, 08/14/2008 - 00:00

puravida

Jedi Warrior

Offline

Joined: 09/01/2007

venkatesan wrote:

How we can get the Accesskey?
Can any one please give me the details.

Hello, venkat,

You simply sign up for free to get your access information.

Best regards,

Brandon

Thu, 08/14/2008 - 00:50

Anonymous

puravida wrote:

venkatesan wrote:

How we can get the Accesskey?
Can any one please give me the details.

Hello, venkat,

You simply sign up for free to get your access information.

Best regards,

Brandon

Hi Brandon,

I logged in and then from where i will find the Accesskey
Can you please let me know ?

Regards
venkat

Thu, 08/14/2008 - 00:53

puravida

Jedi Warrior

Offline

Joined: 09/01/2007

venkatesan wrote:

I logged in and then from where i will find the Accesskey

You will find the [accesskey] and [secretkey] towards the bottom of the page immediately after you login.

Alternatively, you can click on 'Get Thumbnail Code' and just copy/paste the link we provide for you.

Best regards,

Brandon

Thu, 08/14/2008 - 01:46

Anonymous

Getting an image with text of over the limit review your plan on mouseover can u help me what to do?

Thu, 08/14/2008 - 01:51

#10

puravida

Jedi Warrior

Offline

Joined: 09/01/2007

venkatesan wrote:

Getting an image with text of over the limit review your plan on mouseover can u help me what to do?

Did you copy/paste the link code from the 'Get Thumbnail Code' area?

That is the best way. I just tried it using your account credentials and it worked fine. If you see the embedded image but not the mouseover image, you probably forgot to modify the javascript (as mentioned in the first post of this thread).

-Brandon

Thu, 08/14/2008 - 04:24

#11

Anonymous

Thanks for correcting me. In mozilla it is showing pop up with curve but in IE 6.0 and 7.0 curve gets disappear. Can u tell me what to do?