Place Title Inside using Fancybox 2

2020-04-18 08:03发布

I'am totally clueless, but have managed to get Fancybox v2.1.0 working by using the many great answers found here. Now, I would like to change the title position to the "inside" - I see various code for this, such as:

    $(".fancybox").fancybox({
helpers : {
    title: {
        type: 'inside'
    }
}

});

But I have no idea where to put that - do I edit the jquery.fancybox.js file? If so, where? I see on line 182 where simply the title type can be changed, but that doesn't seem to work for me.

After nailing this down, I'd like to change the open/close to "elastic", so any help there would be appreciated as well. Don't have a sample page online - but it's the basic page of thumbnails, each clicked to open a larger single image.

Many thanks in advance - sorry to be such a newbie on this - previously used Lightbox, but Fancybox seems to fit better for what I need.

EDIT (moved code from comments) here is what I have:

<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.8.1/... 
<link rel="stylesheet" href="lib/jquery.fancybox.css" type="text/css" media="screen" /> <script type="text/javascript" src="lib/jquery.fancybox.pack.js"></script> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  $(".fancybox").fancybox(); 
 }); 
</script>

1条回答
甜甜的少女心
2楼-- · 2020-04-18 09:07

You don't need to mess with original js file, you just need to load fancybox in your html document (see what to include here)

Then, within the <head> section of your html document, include this script (after you loaded jQuery and fancybox js files as in the instructions above)

<script type="text/javascript">
 $(document).ready(function(){
  $(".fancybox").fancybox({
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    helpers     : {
        title: {
            type: 'inside'
        }
    }
  });​
 });
</script>
查看更多
登录 后发表回答