CODEWITHSUNDEEP
jqueryfancybox
IRHM
IRHM

Reputation: 1326

fancyBox Image Number

I wonder whether someone may be able to help.

I've created an image gallery using fancyBox, as shown in the code below:

<!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="fancybox/lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></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-thumbs.js?v=1.0.2"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
    <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />


  <script type="text/javascript">  

            $('.fancybox').fancybox({
                openEffect  :   'elastic',
                closeEffect :   'elastic',

                padding :   20,
                fitToView   :   true,

                prevEffect :    'none',
                nextEffect :    'none',

                closeBtn  : false,
                arrows : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },

                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });


</script> 
  <style type="text/css">
<!--
.style1 {
    font-size: 14px;
    margin-top: 5px;
    margin-right: 110px;
}
-->
  </style>  
</head>
<body style="font-family: Calibri; color:  #505050; margin-left: 240px; float:left;"/>
<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" style="margin-left: -120px; margin-right: 50px;"> 

    <p>
      <?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" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" /></a>
      <?php endfor; ?>  
    </p>
</form>  
</body>
</html>

Everything works well except for the page numbering i.e. the 'Image Number of...' text only appears on the first image.

I've taken this code directly from the 'fancyapps' site, so I'm a little unsure where the error is as they both seem identical.

I just wondered whether someone could perhaps have a look at this please and let me know where I've gone wrong.

Many thanks and regards

Upvotes: 0

Views: 1830

Answers (1)

IRHM
IRHM

Reputation: 1326

Using the new verison of 'fancyBox' this has now been resolved and the image number works fine.

Upvotes: 1

Related Questions