/    Sign up×
Community /Pin to ProfileBookmark

How would I change variable where <img src="+ this.href +" looks

Hello everyone,

I’m currently building a site which is all HTML and CSS and came across this one function that allows images as tool tips. [URL=”http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery”]link here[/URL]

Now I’m ‘alright’ with HTML and CSS but I am completely lost with javascript since I have not used it. I’ve spent all day reading up on javascript but I cant seem to find any relevant information or at least information that I think would work in this manner.

Here is the script I am using..

[CODE]
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.imagePreview = function(){
/* CONFIG */

xOffset = 200;
yOffset = 20;

// 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=’Image preview’ />”+ 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();
});[/CODE]

As it stands right now it only looks in the directory that the HTML file is in for any pictures it requires. All the images for this website are in there separate folder called ‘img’ though since I do not plan to have all HTML sheets, pictures etc.. in the same folder.

So I am trying to figure how to make + this.href + look into <img src=”img/HERE”>

All the information I can find on ‘this.href’ is pretty extensive and all refers to linking but not going into a directory.

Since I am rambling and repeating myself I will stop here. Hopefully some of this made sense and any help is greatly appreciated.

Thank you

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@SparoHawkMay 31.2010 — You want this code:
[CODE]$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");[/CODE]

Like this:
[CODE]$("body").append("<p id='preview'><img src='[B]img/[/B]"+ this.href +"' alt='Image preview' />"+ c +"</p>");[/CODE]

Is that it?
Copy linkTweet thisAlerts:
@VladimerauthorMay 31.2010 — Unfortunately that does not work. I tried doing that but it does not work. With it changed it still finds the folders in its directory and doesn't look into the img folder. I put half the images in the img folder and half left in its root folder to see that.

Thanks though
Copy linkTweet thisAlerts:
@SparoHawkMay 31.2010 — Wait.

JavaScript cannot access folders on neither server nor client sides. It cannot 'seek' the path to find an image. You need to provide the full path to your images or have a constant 'root' path to them.
Copy linkTweet thisAlerts:
@VladimerauthorMay 31.2010 — Alright so I feel like somewhat of a fool. I managed to resolve the issue. I over complicated the problem by trying to understand the javascript thinking the solution was in there. When in fact the whole time it was with the HTML since I was using a <a > tag to target the image that was in the preview and using a <img src > tag in the middle of it to target the preview source. I somehow kept overlooking the second part of that simple code and kept fiddling with where the link was pointing to but not the img src.

Either way thanks SparoHawk, that is still good information to know, thanks ?
Copy linkTweet thisAlerts:
@webgirl5Dec 18.2010 — Try this:

<img src='"+ this.href +"'/images/ alt='Image preview' />

That will allow you to change the image location to a more specific directory.

Add whatever more specific folder after 'images' your pics are located in.

For example:

<img src='"+ this.href +"'/images/portfolio/ alt='Image preview' />
Copy linkTweet thisAlerts:
@fxwoodyFeb 10.2011 — Hi guys! I know this is an old topic but i'm struggling to get it to work on my forum ?

I explain, i have the same jquery function that i want to use for Thumbnails that shows in my threadlist. Since these thumbnail are inserted from a url that we paste in the field box when we make a post, every one of them are different depending of the threads.

Now, since i'm on vbulletin 4.1 and everything is running in {vb raw} and stylevars, i can't get this line of code:
[code=html]$("body").append("<p id='preview'><img src='" + this.href + "' alt='Thumbnail' />"+ c +"</p>");[/code]
to show the thumbnail when i mouseover it! Only thing that comes up is the ALT field box with the "Thumbnail" written in it ?

I tried to find a solution for this but nothing good seems to work!

This would be where it get's the thumbnail to show in the threadlist :

[code=php]<vb:if condition="$thread['thumbnaildisplay'] AND (!$thread[sticky] OR ($vbulletin->options[thread_thumbnails_sticky] == '1'))">
<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:14px;"><img style="{vb:raw thread.thumbnailstyle}" src="{vb:raw thread.thumbnailurl}"></a>
</vb:if>
[/code]


Now, i'm not a pro like you guys but i would love to have this little xtra to work since when you scroll in the threadlist, these thumbnails are really small and it would be nice for them to pop up when we mouse over them ?

Tks for the help,in advance ?
×

Success!

Help @Vladimer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...