0

I am using fancy box 2 in a wordpress site made from a child theme of twenty twelve. I want it so that when you hover over the image it will say the persons name and when you click on the image it will have a couple of paragraphs description. I have everything working except for the hover part, when you hover it shows the whole big description.

Here is a link to the page. (the password is boogiebop)

Here is the JavaScript: 

jQuery(document).ready(function() {
 jQuery(".fancybox").fancybox({
  beforeshow: function(){
  this.title = $(this.element).next('.newTitle').html();
  },
  helpers: {
    title : {
    type : 'inside'
   }
   }
 }); // fancybox
}); // ready

I have tried adding this: 

<a class="fancybox" href="images/01.jpg" title="only show this on hover"><img src="images/01t.jpg"  /></a>
<div class="newTitle" style="display: none;"><p>hello, visite my site <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p></div>

But to no avail all I get is the standard title.

tckmn
  • 57,719
  • 27
  • 114
  • 156
Harry Rook
  • 1
  • 6
  • The reason it doesn't work for you is because the callback's name is not `beforeshow` but `beforeShow` (it uses the [CamelCase](http://en.wikipedia.org/wiki/CamelCase) format) ... see more http://stackoverflow.com/a/9611664/1055987 – JFK Apr 30 '13 at 18:20

1 Answers1

0

You description is inside the title attribute and of couse it will display the hole content. You could add an another description like des="blablabla" and once you click the image, a modal box will be display in the screen withe whole content what des attribute have wil be pass to the modal box.

Example:

$("#image").click(function(){

var des = $(this).attr("des");

$("#modalbox").html(des);
//done :D
})

Note: I used Jquery.

  • Hi so do you think I should not use fancy box and use modal box instead? Im not worried about having href links in the decription, just want the hover to say the persons name and upon click getting a description beneath the image... – Harry Rook Apr 30 '13 at 14:17
  • is the same, fancybox is just css styles. You have to to insert a html tag like a div and once you click the image, it will take the value of the attribute des(or another with the name you'd like have) and with .html() function write it inside the div. –  Apr 30 '13 at 14:28
  • oh, do not worry :D. its ok –  Apr 30 '13 at 16:25