Home/ Questions/Q 8534421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:11:35+00:00

I’am totally clueless, but have managed to get Fancybox v2.1.0 working by using the

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0