Home/ Questions/Q 7859293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T21:51:47+00:00

I wonder whether someone may be able to help please. I’m a little new

  • 0

I wonder whether someone may be able to help please.

I’m a little new to this, so I’m sure to some this will be a basic question but please bear with me.

I’m using the script below to create a image gallery with fancyBox. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>Gallery</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>   
  <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
  <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script> 
  <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>  
  <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>  
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>  
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>  
  <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>  
  <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />  
  <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />  
  <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />  

  <script type="text/javascript">  

$(document).ready(function() { 
    $("a.fancybox").fancybox({

        'centerOnScroll':'true',
        helpers : {
        title : {
            type : 'inside'
        }
    },


        'transitionIn':'elastic',
        'transitionOut':'elastic',
        'speedIn':600, 
        'speedOut': 200,
        'overlayShow':false
    });

});


</script>  

</head> 
<body style="font-family: Calibri; color:  #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: 100px; margin-right: 100px; margin-bottom: -10px; float: left; position: absolute;"> 
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> 
  <form id="gallery" name="gallery" class="page" action="index.php" method="post">   

                  <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  
                          $xmlFile = $descriptions->documentElement->childNodes->item($i);  
                          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));  
                          $thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));  
                  ?> 
        <a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?> 
  </form>  
</body>  
</html>

The problem I’m having is that I cannot create the title inside the image, or indeed anywhere else except on ‘hover over’ which seems to be the default setting. I’ve tried all manner of different ways to try and get this to work.

i.e.

$(document).ready(function() { 
    $("a.fancybox").fancybox({

        'centerOnScroll':'true',
        'titleShow':'true',
        'titlePosition':'inside',
        'transitionIn':'elastic',
        'transitionOut':'elastic',
        'speedIn':600, 
        'speedOut': 200,
        'overlayShow':false
    });

});

and 

 $(document).ready(function() { 
        $("fancybox").fancybox({

            'centerOnScroll':'true',
            'titleShow':'true',
            'titlePosition':'inside',
            'transitionIn':'elastic',
            'transitionOut':'elastic',
            'speedIn':600, 
            'speedOut': 200,
            'overlayShow':false
        });

    });

I’ve tried adding and deleting ', deleting spaces, all without success. I just wondered whether someone could perhaps look at this and let me know where I’m going wrong.

Many thanks and regards

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In this line:

    <a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>

    Try setting the title attribute inside the a, not the alt tag inside the img. So it becomes:

    <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" /></a><?php endfor; ?>
    • 0