Link Mouseover Popup Preview Bubble v1.0

20 posts / 0 new
Last post
puravida's picture
puravida
Jedi Warrior
Offline
Joined: 09/01/2007
Visit puravida's Website

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. Configure the baseURI and stwauth variables.
3. Now, just upload the folder into your root directory on your server.
4. 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="https://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. update the stwsize variable
3. rename stwpopup-xlg.css to stwpopup.css
4. rename lb-xlg.png to lb.png
5. rename rb-xlg.png to rb.png
6. rename lt-xlg.png to lt.png
7. rename rt-xlg.png to rt.png
8. Then, upload those files to your server

GloTouch
Offline
Joined: 04/13/2008
Visit GloTouch's Website

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://images.shrinktheweb.com/xino.php?stwembed=1&stwaccesskeyid='+ stwaccesskeyid +'&stwsize=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.

puravida's picture
puravida
Jedi Warrior
Offline
Joined: 09/01/2007
Visit puravida's Website

Ah, very cool.

Thanks for the mod, glotouch! Wink

-Brandon

puravida's picture
puravida
Jedi Warrior
Offline
Joined: 09/01/2007
Visit puravida's Website

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, see my updated instructions in my initial post above.

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

http://www.shrunktheweb.com

-
-
-

Anonymous

Hi,

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

Regards
venkat

puravida's picture
puravida
Jedi Warrior
Offline
Joined: 09/01/2007
Visit puravida's Website
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

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

puravida's picture
puravida
Jedi Warrior
Offline
Joined: 09/01/2007
Visit puravida's Website
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

Anonymous

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

puravida's picture
puravida
Jedi Warrior
Offline
Joined: 09/01/2007
Visit puravida's Website
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

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?

ShrinkTheWeb® (About STW) is another innovation by Neosys Consulting
Contact Us | PagePix Benefits | Learn More | STW Forums | Our Partners | Privacy Policy | Terms of Use

Announcing Javvy, the best crypto exchange and wallet solution (coming soon!)

©2018 ShrinkTheWeb. All rights reserved. ShrinkTheWeb is a registered trademark of ShrinkTheWeb.