Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Naming photos in album

    I have a page that I would like to add a title or name to each image, under the image.

    Here is the page http://iseetechnology.co.uk/

    Here is the code

    Code:
    <!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" xml:lang="EN" lang="EN" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
    <title>FFG</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="stylesheet" href="styles/layout.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
    <!-- FancyBox -->
    <script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.2.setup.js"></script>
    <link rel="stylesheet" href="scripts/fancybox/jquery.fancybox-1.3.2.css" type="text/css" />
    <!-- End FancyBox -->
    </head>
    <body id="top">
    <div class="wrapper col1">
      <div id="header">
        <div id="topnav">
          <ul>
            <li class="last active"><a href="gallery.html">FFFFFFFFFF</a><span>TESTING 123</span></li>
            <li><a href="#">Categories</a><span>AL1</span>
              <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
                <li><a href="#">Link6</a></li>
                <li><a href="#">Link7</a></li>
              </ul>
            </li>
            <li><a href="gallery.html">Full</a><span>iSeeTechnology</span></li>
            <li><a href="gallery.html">TEXT PAGE </a><span>iSeeTECH 1</span></li>
            <li><a href="gallery.html">Home</a><span>HOME home HOME</span></li>
          </ul>
        </div>
        <div class="fl_left">
          <h1><a href="#">Here is where the title will go</a></h1>
          <p>TITLE OF TITLE</p>
        </div>
        <br class="clear" />
      </div>
    </div>
    <!-- ####################################################################################################### -->
    <div class="wrapper col3">
      <div id="breadcrumb">
        <ul>
          <li class="first">You Are Here</li>
          <li>&#187;</li>
          <li><a href="#">Home</a></li>
          <li>&#187;</li>
          <li><a href="#">Albums</a></li>
          <li>&#187;</li>
          <li class="current"><a href="#">Album1</a></li>
        </ul>
      </div>
    </div>
    <!-- ####################################################################################################### -->
    <div class="wrapper col4">
      <div id="container">
        <div class="gallery">
          <h2>ALBUM 1</h2>
          <ul>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 1"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 2"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 3"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 4"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li class="last"><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 5"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 6"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 7"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 8"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 9"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li class="last"><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 10"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 1"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 2"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 3"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 4"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            <li class="last"><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 5"><img src="images/demo/gallery/174x174.gif" alt="" /></a></li>
            
          </ul>
          <br class="clear" />
        </div>
      </div>
    </div>
    <!-- ####################################################################################################### -->
    <div class="wrapper col5">
      <div id="footer">
        <p class="fl_left">Copyright &copy; 2011 - All Rights Reserved - <a href="#">WEBSITE 1 OPTION</a></p>
          <br class="clear" />
      </div>
    </div>
    </body>
    </html>
    Anyone help please?

    I would like the title to be contained in a framed box, like the images are.

    Thanks

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    That would be pretty easy. You have an alt attribute in the img tag not being used, you should have a title attribute right along side it BTW, you may be able to do it by just putting text inside the li with maybe a line break between it and the image ( I don't use lists very much ) or you could have javascript extract the alt and title info and put that in a span under the image. Everything you want is doable if you write the code from scratch, but you're working in a framework which limits things.

    BTW, for anyone who wants to know, you can actually store comments inside a jpeg file, if you have the right server side software it's easy to do, and to extract the comment information.

  • Users who have thanked DrDOS for this post:

    isee (07-15-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    That would be pretty easy. You have an alt attribute in the img tag not being used, you should have a title attribute right along side it BTW, you may be able to do it by just putting text inside the li with maybe a line break between it and the image ( I don't use lists very much ) or you could have javascript extract the alt and title info and put that in a span under the image. Everything you want is doable if you write the code from scratch, but you're working in a framework which limits things.

    BTW, for anyone who wants to know, you can actually store comments inside a jpeg file, if you have the right server side software it's easy to do, and to extract the comment information.
    Thanks - Yes working within a framework.. Tried inserting the text into the LI but it changed the formatting of the images all over the place????

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Did you want something like this?


  • Users who have thanked tempz for this post:

    isee (07-16-2012)

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    Did you want something like this?
    Yes, exactly...

    Being really demanding then I would like the names to be surrounded in a box, like the images.

    Thanks

  • #6
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    CSS:

    Code:
    .gallery p {
    	position:absolute;;
    	top:280px;
    	float:left;
    	border:1px solid #E2DDB5;
    	width:182px;
    	text-align:center;
    }
    .gallery ul li{
    	display:block;
    	float:left;
    	margin:0 10px 24px 0; /* I changed it from 10 to 24 for more space! */
    	}
    HTML

    Code:
    <ul>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 1"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 2"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 3"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 4"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li class="last"><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 5"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 6"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 7"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 8"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 9"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li class="last"><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 10"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 1"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 2"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 3"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 4"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
            <li class="last"><a rel="gallery_group" href="images/demo/gallery/500x500.gif" title="Image 5"><img src="images/demo/gallery/174x174.gif" alt=""></a></li>
    <p> text here</p>
    </ul>
    Result:



    Have fun!

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts
    All sorted kindly by tempz - thanks.

    For those who want to see it sorted..

    http://www.iseetechnology.co.uk
    Last edited by isee; 07-17-2012 at 06:35 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •