looking for a script, hover over a image then popup

**winracer** · 10-05-2009 09:52 AM

I am looking for a script that when you hover over a tumbnail it will pop up in a larger photo of the image.

does anyone know where I can find a script like this?

**Sixtease** · 10-06-2009 02:12 AM

Sounds like a JavaScript job to me rather than Perl.

Off the top of my head, with jQuery (paste to <head>):

Code:

<style>.popup { position: absolute; }</style>
<script>
$(document).ready( function() {
    $('img'/*SELECTOR*/).mouseenter( function() {
        $('<div class="popup"><img src="'
            + this.src.replace(/thumb-/, '')
            + '" /></div>'
        ).appendTo('body');
    }).mouseleave( function() {
        $('.popup').remove();
    }).mousemove( function(e) {
        $('.popup').css({
            top: 20+e.pageY,
            left: 20+e.pageX
        });
    });
});
</script>

The string next to the "SELECTOR" comment controls what pictures will have the popup functionality. It assumes that the images have a "thumb." prefix and that the bigger pictures can be obtained by discarding it.

**winracer** · 10-06-2009 07:48 AM

Originally Posted by Sixtease

Sounds like a JavaScript job to me rather than Perl.

Off the top of my head, with jQuery (paste to <head>):

Code:

<style>.popup { position: absolute; }</style>
<script>
$(document).ready( function() {
    $('img'/*SELECTOR*/).mouseenter( function() {
        $('<div class="popup"><img src="'
            + this.src.replace(/thumb-/, '')
            + '" /></div>'
        ).appendTo('body');
    }).mouseleave( function() {
        $('.popup').remove();
    }).mousemove( function(e) {
        $('.popup').css({
            top: 20+e.pageY,
            left: 20+e.pageX
        });
    });
});
</script>

The string next to the "SELECTOR" comment controls what pictures will have the popup functionality. It assumes that the images have a "thumb." prefix and that the bigger pictures can be obtained by discarding it.

thanks, and I would call it like below?

Code:

print qq~<td bgcolor="$short_results_background_color" align=center>—</td>~;
 }

if (-e "$upload_path/$number-a.gif") {



	print qq~<td bgcolor="$short_results_background_color" align=center>
<a href="javascript:popup('upload/$number-a.gif width=600 height=600','$number-a.gif')">
<img src="$graphics_dir/smallcamera.gif" width=16 height=12 border=0 alt="$number-a">





</td>~;



}
elsif (-e "$upload_path/$number-a.jpg") {
	print qq~<td bgcolor="$short_results_background_color" align=center>
<a href="javascript:popup('upload/$number-a.jpg width=600 height=600','$number-a.jpg')">
<img src="$graphics_dir/smallcamera.gif" width=16 height=12 border=0 alt="$number-a">



</td>~;


}


else { 
    print qq~<td bgcolor="$short_results_background_color" align=center>—</td>~;

**Sixtease** · 10-06-2009 08:16 AM

No, this has nothing to do with the server side at all. Just put the code to the <head> tag of the document where you want the thumbnails working. It will magically make the picture appear on mouseover on any image.

You'll then have to tune the selector to get it only for the images you want and you'll have to tune the replace command to get the full image URL from the thumbnail. But first get it working, we'll get onto that later.

Update: Oh yes, and include jQuery!

**winracer** · 10-06-2009 08:36 AM

so I would place this in the head to

Code:

<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>

I have been trying this code http://www.dynamicdrive.com/dynamici...agetooltip.htm

but can't get my varable $number on the page to pass to the varable $number in the head ?

**Sixtease** · 10-06-2009 09:01 AM

Yes, that's correct. It would have to be before my script and of course you'd have to have jquery-1.3.2.min.js file in the javascript subfolder of where the HTML document resides.

**winracer** · 10-06-2009 09:31 AM

this is what i have in my <head>

Code:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>



<style>.popup { position: absolute; }</style>
<script>
$(document).ready( function() {
    $('img'/*SELECTOR*/).mouseenter( function() {
        $('<div class="popup"><img src="'
            + this.src.replace(/thumb-/, '')
            + '" /></div>'
        ).appendTo('body');
    }).mouseleave( function() {
        $('.popup').remove();
    }).mousemove( function(e) {
        $('.popup').css({
            top: 20+e.pageY,
            left: 20+e.pageX
        });
    });
});
</script>

I don't see any change in the photos/ images, am i missing something?

**Sixtease** · 10-07-2009 02:42 AM

Hmm... is jQuery loaded? Try to add this inside <body>:

Code:

<script>alert($)</script>

It should give you a popup with something like this:

Code:

function (selector, context) {
    return new (jQuery.fn.init)(selector, context);
}

If not, then jQuery is not loaded. If yes... then please PM me with the URL to the page, I'll have a look.

**winracer** · 10-07-2009 07:48 AM

thanks for your help

it is strange, I will keep looking at it, it looks like jQuery is not load I place the code

Code:

 <script>alert($)</script>

in the body and I did not get a popup

I have this in the head

Code:


<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.magnifier.js"></script>


<script type="text/javascript" src="js/jquery-1.3.2.js"></script>



<style>.popup { position: absolute; }</style>
<script>
$(document).ready( function() {
    $('img'/*SELECTOR*/).mouseenter( function() {
        $('<div class="popup"><img src="'
            + this.src.replace(/$number-/, '')
            + '" /></div>'
        ).appendTo('body');
    }).mouseleave( function() {
        $('.popup').remove();
    }).mousemove( function(e) {
        $('.popup').css({
            top: 20+e.pageY,
            left: 20+e.pageX
        });
    });
});
</script>

I put the .js script in same place (folder) as my other scripts js(floder)

**Sixtease** · 10-08-2009 01:35 AM

And if you generate the

Code:

<script>alert($)</script>

in perl, then please be sure to quote it with single quotes, because otherwise $) will expand to the effective group ID (as seen in perlvar and you will get something like

Code:

<script>alert(132156</script>

which will be a javascript syntax error. :-)

**winracer** · 10-08-2009 07:53 AM

I tried this <script>alert('$')</script> still getting some error.

**Sixtease** · 10-08-2009 08:02 AM

No. I mean if you insert the script in a fashion like

Code:

print "<script>alert($)</script>"

or

Code:

print <<EOHTML;
<body>
<script>alert($)</script>
...
EOHTML

then you should use a non-interpolating quote construct:

Code:

print '<script>alert($)</script>'

or

Code:

print <<'EOHTML';

**winracer** · 10-08-2009 08:26 AM

thanks, it is strange I used

Code:

print "<script>alert($)</script>";

and get the same error <script>alert(132156</script>

I tried all the orther ones too.. I even tried on both test sites..

**winracer** · 10-08-2009 02:50 PM

Sixtease.
have been trying this code http://www.dynamicdrive.com/dynamici...agetooltip.htm

but can't get my varable $number on the page to pass to the varable $number in the head

do you know a easy way?

**Sixtease** · 10-09-2009 12:06 AM

You know what? I'd recommend trying the script I posted here on a clear page. Then try to transfer it step by step on your web. The problem is that your site is so bloated that debugging anything is just too painful.

Thread: looking for a script, hover over a image then popup

Thread Tools

Display

looking for a script, hover over a image then popup

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions