vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   Good Jquery Challenge (https://vborg.vbsupport.ru/showthread.php?t=258647)

fxwoody 02-10-2011 09:36 AM
Good Jquery Challenge
 
1 Attachment(s)
Ok, i'm totally stuck here with this code!

I have "product-thread_thumbnails_v31" installed and working well, tho, i want my member to be able to see the thumbnail a bit better when they scroll in the threadlist.

So, i found a little Jquery script that should normally resize the thumb on mouseover but i can't seem to get the image to get fetch by the script :( Only thing that comes up is the box for the ALT"" attribute to show (as normally the img should be there)

Does anyone with Jquery experience could give me some HINTS on how to do this with the script??!!
I had it to work well in my 3.8.6 but the href was easier to get then with our super stylevars system in 4.1.
If we can get this to work, i think it would be a nice little MOD to posts for the others as it could work with almost any image you want in the forum ;)

Here is the Jquery script:

PHP Code:
this.imagePreview = function(){    
    /* CONFIG */
        
        xOffset = 40;
        yOffset = 60;
        
        // 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("<p id='preview'><img src='" + this.href + "' alt='Thumbnail' />"+ c +"</p>");                                 
        $("#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();
}); 
For the thumbnail to resize, in "thread_thumbnail_threadbit" , we need to add the "class="preview" in the href code, like this:

Code:
<a href="{vb:link thread, {vb:raw thread}}" class="preview" id="thread_gotonew_{vb:raw thread.realthreadid}" style="float:left;clear:right;display:block;padding-right:4px;">
Also, in the additional css, i'ved added the "#preview" class :

HTML Code:
/* */

#preview{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
 }

/* */
If anyone as an idea on this, it would be more then appreciated ;)
I must be missing something simple in the codes?

Tks

fxwoody 02-20-2011 11:07 AM
WOW!! No one with any solutions??? :(

It could have been a cool addon for the forums ;)

Lynne 02-20-2011 03:54 PM
So when the alt title comes up, have you tried using something like firebug to see what path it is using to look for the image? It's hard to troubleshoot this when I can't see it in action.

fxwoody 02-21-2011 10:14 AM
Tks Lynne for your time ;) Actually, i didn't think of Firebug!! lol
I will make some test and come back to you with what i got.

Appreciated :)

By the way, maybe you would have a better idea for this??? Like a javascript mouseover or even plain CSS that could do the same thing?!?!

Cheers

fxwoody 02-28-2011 11:52 AM
Lynne! you can close this thread! I made a new post with the script for it ;)

Tks


All times are GMT. The time now is 09:42 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01492 seconds
  • Memory Usage 1,738KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (1)bbcode_html_printable
  • (1)bbcode_php_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (5)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete