Scroll page back to the top

Sliding image caption with jQuery

Sliding image caption with jQuery

Today we are going to learn how to use jQuery's animate() method in order to create a sliding caption for the image, which will be triggered when the hover() event occurs.

JavaScript Tutorial

Sebastian Sulinski on 19th Jul 2011

Download Exercise FilesDemo
 
 

01 : Structure and css (06:59 min)

1  
 

02 : jQuery animate() method (05:44 min)

2  
 
 
 
 

Discussion (4 comments)

  • Linus

    Linus on Tuesday, 14th February 2012

    Hi!
    Thank you for this tutorial. Exactly what I was looking for.
    The caption slider works perfect:) but I seem to have two little problems with it. I have linked my image (where I have the caption) to Shadowbox and Shadowbox is executed if I click on the image itself but It doesn't work if I click on the caption...can this be solved?, because I want to have a "click me" link on the caption. Now I have to move my cursor from the caption to the image and then click. And is it possible to setup a link (http://...) on the caption? If so, how do I do that?
    Best regards
    canaan77

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Wednesday, 15th February 2012

    Hi Linus,
    To have the caption as link you could add another attribute to the li tag called for instance data-url:

    <li><img src="/images/01.jpg" alt="Some image 1 description" 
    	width="200" height="200" data-url="http://www.google.com" /></li>
    

    Then amend the code like so:

    var arr = $('#images li');
    $.each(arr, function() {
    	var thisUrl = $(this).find('img').attr('data-url');
    	if (thisUrl !== '') {
    		$(this).append(
    			'<a href="' + thisUrl + '" class="caption">'+$(this).find('img').attr('alt')+'</a>'
    		);
    	} else {
    		$(this).append(
    			'<span class="caption">'+$(this).find('img').attr('alt')+'</span>'
    		);
    	}
    });
    $('#images li').hover(function() {	
    	$(this).children('.caption').stop().animate({ top : '100px' }, 200);	
    }, function() {					
    	$(this).children('.caption').stop().animate({ top : '200px'}, 200);
    });
    

    Reply

  • Luis Garcia

    Luis Garcia on Friday, 4th October 2013

    Dear Sebastian Sulinski:
    In your comment to Linus ..
    I think you miss put the find method in the definition of the variable thisUrl....
    The line is written :
    var thisUrl = $(this).attr('data-url');
    and must be written like this:
    var thisUrl = $(this).find('img').attr('data-url');

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Saturday, 5th October 2013

    Hi Luis,
    You're right - thanks for spotting this out. Code is now corrected.

    Reply

 
Page 1 of 1
  • First
  • Previous
  • 1
  • Next
  • Last
 
 
Add a comment
Add Comment