SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Adding Link to Image Previewer?

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Elementax View Post
    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
    Have you tried setting the href attribute of the link to the page that you want to redirect to?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Have you tried setting the href attribute of the link to the page that you want to redirect to?
    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 :P If not, let me know

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here's the documentation page for the plugin that you're using.
    http://cssglobe.com/post/1695/easies...w-using-jquery

    Do you see Example 3? That seems to do everything you require.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here's the documentation page for the plugin that you're using.
    http://cssglobe.com/post/1695/easies...w-using-jquery

    Do you see Example 3? That seems to do everything you require.
    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. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Elementax View Post
    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.
    I'm not sure what you mean by that. Do you have a test page that lets me see the issue?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pm'd you the test page, hope that is alright.

    Elementax

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Elementax View Post
    Pm'd you the test page, hope that is alright.
    Would setting overflowX to be hidden on the body element get things closer to what you want?

    Code css:
    body {
        overflow-x: hidden;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Would setting overflowX to be hidden on the body element get things closer to what you want?

    Code css:
    body {
        overflow-x: hidden;
    }
    Not quite, I PM'd you something that should explain it hopefully.

    Thanks again,

    Elementax


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •