Download Exercise FilesDemo

Discussion (2 comments)

• 

  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 : @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).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

Add a comment

Name: *	Email: *
Website:	Twitter:
Comment (no html allowed): *
Add Comment

First name: *
E-mail: *
Subscribe