www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

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

  1. #1

    looking for a script, hover over a image then popup

    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?

  2. #2
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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.

  3. #3
    Quote Originally Posted by Sixtease View Post
    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>~;

  4. #4
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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!

  5. #5
    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 ?

  6. #6
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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.

  7. #7
    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?

  8. #8
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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.

  9. #9
    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)

  10. #10
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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. :-)

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

  12. #12
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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';

  13. #13
    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..

  14. #14
    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?

  15. #15
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    393
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles