Adding Link to Image Previewer?

JavaScript
1

I recently downloaded and added a jQuery image previewer to my site, I used the one found on cssglobe. The script is running as it should, but I’m here to ask about adding something further to it.

The demo they offer can be found here: http://cssglobe.com/lab/tooltip/02/

As you may or may not have noticed, if you click on the image instead of just previewing, it brings you to another page, with just the image.

I’m here to ask if there is a way to make it so I can still basically use the image previewer, however if the image is clicked on, it will redirect to another page (not just where the image is being held). So for example, if I click on the image I am previewing, instead of taking me to …/images/pic.jpg, it will take me to something like, www.site.com/about.html

Is this possible with the script I’m currently using? If not, do you happen to know of any that can provide this functionality?

Any help would be greatly appreciated.

Thanks in advance,

Elementax

2

Have you tried setting the href attribute of the link to the page that you want to redirect to?

3

Thanks for the reply.

And ye, I have. The problem is, the href attribute is used for the image, because essentially, when the mouse hovers of the thumbnail.jpg, it is seeing the actual pic.jpg (linked using the href). That’s why I am unsure if I am able to link all of that to a whole different page.

Hopefully you understand what I’m saying :stuck_out_tongue: If not, let me know

4

I don’t see why the href can’t change (or why the image seems to only be located via the href on the anchor). Perhaps you can clear that up? Why does the script (if it does?) make it so the image SRC is taken from the anchors HREF?

5

Here’s the documentation page for the plugin that you’re using.
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Do you see Example 3? That seems to do everything you require.

6

Sorry for the late response.

Ye, that seemed to have fixed it. Once I combined both example 2 and 3 together, I was able to get what I needed. Cheers.

As a side note, am I able to make it so the image being previewed is always seen? By this I mean, if you hover over the image, it will not display under or above what you actually see in your browser? I’m not sure if this is a simple fix or not, but if it is just a simple code, I’d greatly appreciate it. If not, I’ll look into it.

Thanks,

Elementax

7

I’m not sure what you mean by that. Do you have a test page that lets me see the issue?

8

Pm’d you the test page, hope that is alright.

Elementax

9

Would setting overflowX to be hidden on the body element get things closer to what you want?


body {
    overflow-x: hidden;
}
10

Not quite, I PM’d you something that should explain it hopefully.

Thanks again,

Elementax