Thread

OK, so I’ve got this simple jQuery tooltip image preview configured over here.

Works perfectly as it was intended. My problem is that I’m trying to do something outside of the box with it and I’m at the limits of my jQuery knowledge (which isn’t much mind you).

So, you see what I currently have. Now if you look at the source, you’ll see that I have another div (#popup) below the image. This div is hidden with display: none; via CSS. What I now need to do is tell the jQuery use the #popup div for the hover image rather than what’s in the rel attribute of the anchor tag. Is that possible? I just need to keep everything exactly the same visually while making that one change to use #popup as the hover image.

I know it probably doesn’t make sense so I’ll try to explain and maybe there’s even a much easier (better) way?

For this site I’m going to have one image in which I’ll use in multiple locations on the site and at three different sizes. To accomplish this, I’ll be using Image Sizer.

In this particular section, the image will be re-sized to around 50px x 30px with Image Sizer plugin. So, pretty small. This is where the jQuery comes in. I need the jQuery to show the #popup div which will include the hover image because the image inside of #popup I’ll also be using Image Sizer on and resizing it to around 220px x 125px. I realize I could simply use the jQuery plugin in it’s current form and resize the image manually by doing something like this:

$("body").append(""+ this.rel +");

But the problem I’ll run into with setting the width and height manually and not using ImageSizer is that the images will likely be grainy and distorted. ImageSizer seems to do come calculations or something that allow you resize an image without loss of quality that you normally would by manually adding width and height attributes to the img tag.

Hopefully this makes sense? I can follow up with any details if I wasn’t clear on anything.

Thanks

I looked at the plugin and I don’t see it using the “rel” attribute to work.  It’s just using the img specified in the “href” tag for the popup.  So why don’t you do your code like this:
EDIT: for some reason the code I’m trying to print isn’t working in the forums.  I will send it to you in a message.

This is based off the example I got from the plugin.

I see you’ve changed the original jQuery plugin code a bit, make sure to use the original for my example.

/*
 * Image preview script 
 * powered by jQuery (<a href="http://www.jquery.com">http://www.jquery.com</a>)
 * 
 * written by Alen Grakalic (<a href="http://cssglobe.com">http://cssglobe.com</a>)
 * 
 * for more info visit <a href="http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery">http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery</a>
 *
 */
 
this.imagePreview = function(){    
    /* CONFIG */
        
        xOffset = 10;
        yOffset = 30;
        
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
        
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br>" + this.t : "";
        $("body").append(""+ this.href +"+ c +"");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    });    
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

I looked at the plugin and I don’t see it using the “rel” attribute to work.  It’s just using the img specified in the “href” tag for the popup.  So why don’t you do your code like this:
EDIT: for some reason the code I’m trying to print isn’t working in the forums.  I will send it to you in a message.

This is based off the example I got from the plugin.

Sorry for the confusion surrounding the rel attribute. I tweaked the code to use the rel attribute because I actually needed to use the href attribute for sending the user to another page. I should have noted that in the post. The code should be identical to the example just with the instances of “href” replaced with “rel.” As I’ve had more time to think about my setup, I’m thinking of going ahead with the href attribute for this purpose and I don’t thin I’m going to make the image actually clickable now, but we’ll see.

I actually was viewing the thread when your original broken code was in place and I think I got the gist of of what you were getting at. I had no idea that I could actually do something like that where I placed the imagesizer tag inside of the anchors href attribute and have it still be valid and function properly. That would definitely be the easiest solution. I don’t actually have this in production yet, just more or less thinking out loud, but I hope to be able to try this soon to see if it actually works (or have you actually tried it with success)?

Thanks

You should have just got my message with the correct code now.
Ya, I’m 99.99% sure that it should work the way I’m suggesting 😊.

Thank you! PM sent back.