CODEWITHSUNDEEP
jquerycssfade
agis
agis

Reputation: 1841

Mouseover and fade in effect for an thumbnail

this is the screenshot for what I'm trying to achieve So, the markup for the gallery is:

<div class="jTscrollerContainer">
    <div class="jTscroller">
        <a href="#"><img src="thumbs/img1.jpg" /></a>
        <a href="#"><img src="thumbs/img2.jpg" /></a>
        <a href="#"><img src="thumbs/img3.jpg" /></a>
        <a href="#"><img src="thumbs/img4.jpg" /></a>
        <a href="#"><img src="thumbs/img5.jpg" /></a>
    </div>
</div>

I'm thinking to add an title to the img tag and then when the user mouse over the image to appear the title with an fade effect, something like a tooltip but on the top of the images ( like in the screenshot). But I'm not sure if I can manipulate the title tag to appear like I said... Give me please some hints how to achieve this because I don't have very clear in my mind which method is suitable.. Thanks!

Upvotes: 0

Views: 654

Answers (3)

iRyusa
iRyusa

Reputation: 394

Ok so here s the code i write for you, feel free to improve it. It's exactly like the 1st answer.

 <div class="jTscrollerContainer">
     <div class="jTscroller">
         <span id="tt" style="display:none;"></span>
         <a href="#"><img src="thumbs/img1.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img2.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img3.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img4.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img5.jpg" data-title="title" /></a>
     </div>
 </div>

And here's the javascript

 var link = $('.jTscroller a');

 link.bind('mouseenter', function(){
     var tag = $('#tt');

     tag.html($(this).find('img').data('title'));


     $('#tt').fadeIn('slow');
 });

 link.bind('mouseleave', function(){
     $('#tt').fadeOut('slow');
 });

Update: fiddle http://jsfiddle.net/nVKyL/

Update 2: prepend tag is an error here sorry ;)

Upvotes: 1

AndyD
AndyD

Reputation: 895

Untested but off the top of my head - if you add a title tag to your image:

    $("a").hover(function(){ 
         var thisTitle = $(this.find("img").attr("title") 
         $("<p class='tooltip' />").appendTo($(this)).hide().html(thisTitle).fadeIn(1000);
    }, function(){
          $(".tooltip").fadeOut(1000, function(){
               $(this).remove();
        });
});

Then just style each one up to be positioned absolute, relative to the a tag.

Upvotes: 0

kamil
kamil

Reputation: 3522

"Give me please some hints how to achieve.."

Here's my hint: make a span inside jTscrollerContainer with id lets say "tooltip", with css attribute display: none; . Then when mouse is over an image (jQuery(..).hover() ), get the position .position() and image title .attr('title') of an image. Rewrite #tooltip css, make span visible (display: block), change position (top, left, it needs to be with position:absolute/relative for this) and change it text with .text(image.title). Hope that's what your looking for

Upvotes: 1

Related Questions