Question

I wonder whether someone may be able to help me please.

I’ve put together a script which creates this image gallery page. I’m using ‘fancyBox’ to create the slideshow and a jquery demo originating here, which I’ve adapted to provide the deletion functionality.

The problem I have lies around these lines of my code:

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">

      <?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'));  
                  ?>

                  <li class="ui-widget-content ui-corner-tr">
        <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" width="96" height="72"/>   </a><a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
      <?php endfor; ?>  
      </li>
      </ul>

With the inclusion of these lines:<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> and <li class="ui-widget-content ui-corner-tr"> and their respective closing tags, the ‘fancyBox’ functionality doesn’t work. Without them it works fine.

I’m relatively new to jQuery and I’ve been working on this for a few days now and I can’t seem to find a solution.

I just wondered whether someone could possibly look at this please and let me know where I’m going wrong.

Fo additional information, I’ve added the ‘fancyBox’ script below.

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

Many thanks and kind regards

Answer 1

Just for anyone that has this problem in the future:

gallery has a display:none set from the Jquery-UI example.

simply fix this line:

 <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">


 <ul id="gallery" class="ui-helper-reset ui-helper-clearfix">