jQuery Forum

Hi all, I'm fairly new to jquery but have stumbled through using it on a couple of sites with amazing results

 

I'm working on a complete rehash of a site which relied heavily on flash for picture galleries and have used css and jquery to imitate it nicely so the apple massive can view without trouble!

 

There's one page on the site which has around 100 pictures that are 'Before and After' shots, I previously used dreamweavers simple 'rollover image' which was very effective at showing the contrast with a mouseover very quickly in and out, in and out!

 

Obviously it looks very dated now though and was looking at ways to both spice it up and make it touchscreen friendly (ie. mouseover works with mouse on computer and one press on touchscreen opens the tooltip, NOT the actual jpg in another window as per mouseover) at first I was looking at jquery rollovers but couldn't find anything suitable then thought about using jquery tooltips which could highlight the 'after' shot whilst the 'before' shot remained in sight!

 

(if anyone can think of a better more stylish way to do it or have any other ideas then please say)

 

I found this: http://cssglobe.com/lab/tooltip/02/ and it works well but one issue I have is stopping mouse click taking to you the actual jpg as a link in another window?! People love clicking even on mouseovers ;-( 

 

I know it'll be something simple in the js file but I cannot work it out :-( here's the js:

 
this.imagePreview = function(){ 
 /* CONFIG */
  
  xOffset = 1;
  yOffset = 1;
  
  // 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();
});  

 

 

If anyone can help me I'd be eternally grateful :-)

 

 

Thanks

 

Jonny