Home/ Questions/Q 7860631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T22:22:03+00:00

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

  • 0

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

Using the script below, I am creating an image gllery 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="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; border-left: 100;"> 

    <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'));  
                  ?>
                  <img src="cross.png" class="removeImage" alt="Remove this image" align="top"/> 
        <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>

Through some advice on this site I’ve added a ‘cross’ icon with each image which eventually will be used to delete images.

I’m really very new to jQuery and stylesheets etc, but what I’d like to be able to do is to place the cross at the top left hand corner of the actual image rather than, as it’s currently shown at the top of the div. I’ve included a link here to the page in question
here.

I appreciate that to the more seasoned devleoper this could something very simple, but as I said I’ve only really started to work with jQuery and CSS files in the last week.

I just wondered whether someone may be able to provide some guidance please about how to go about this.

Many thanks and regards

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to reformat your HTML output a bit and add extra styles to be able to do that.
    So, for each image in your for loop use this code:

    <div style="display: inline-block; position: relative;">
    <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>">
        <img src="<?php echo $thumbnail; ?>" alt="<?php echo $description; ?>">
    </a>
    <a href="#delete" style="position: absolute; left: 0; top: 0;">
        <img src="cross.png" class="removeImage" alt="Remove this image" align="top"> 
    </a>
</div>

    Otherwise, you can do it with applying CSS classes:

    .myimage {
    display: inline-block;
    position: relative;
}

.cross {
    position: absolute;
    left: 0;
    top: 0;
}

    And add these classes to your HTML tags:

    <div class="myimage">
    <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>">
        <img src="<?php echo $thumbnail; ?>" alt="<?php echo $description; ?>">
    </a>
    <a href="#delete" class="cross">
        <img src="cross.png" class="removeImage" alt="Remove this image" align="top"> 
    </a>
</div>
    • 0