0

I am trying to create a single page, scrolling site with an array of images and corresponding captions. I would like to fix the captions to the bottom of the page. I imagine the solution will involve assigning an id to each image that will trigger a hide/show event when it comes within a certain distance from the top of the window. In this example, each caption is written within the table that houses the image it corresponds too. I am using tables to display the images because I have not found a suitable way to responsively center the images vertically and horizontally on the page; this is a separate issue I am working on.

Here is the relevant code:

<html>
<body>

    <a id="1">

        <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
        <tr valign="middle"><td align="center" colspan="2">

            <img src="31.jpg" width="40%" style="padding-top:30px; max-width:672px">

        </td></tr>
        <tr valign="bottom"><td style="padding:0 0 12 12" height="30">

            Cover for a book of photographs

        </td><td align="right" style="padding:0 12 12 0">

            <a href="#27" style="padding-right:12px">Up</a><a href="#2">Down</a>

        </td></tr>
        </table>

    </a>

    <a id="2">

        <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
        <tr valign="middle"><td align="center" colspan="2">

            <img src="22-2.jpg" width="75%" style="padding-top:30px; max-width:1260px">

        </td></tr>
        <tr valign="bottom"><td style="padding:0 0 12 12" height="30">

            Title and double-page spread for a book of photographs

        </td><td align="right" style="padding:0 12 12 0">

            <a href="#1" style="padding-right:12px">Up</a><a href="#3">Down</a>

        </td></tr>
        </table>

    </a>

    ...

</body>
</html>
D Benway
  • 65
  • 1
  • 2
  • 10
  • It's not exactly clear what you are asking here. It's a "scrolling" site, but the captions are fixed to the bottom of the page. So are you asking for a way to have the caption change based on the visible image, or how to fix the caption to the bottom of the page, or if you should use tables for the images and captions...which you shouldn't. – CodeBob Feb 28 '15 at 00:47
  • I'm asking for a way to have the caption change based on the visible image. – D Benway Feb 28 '15 at 00:51

1 Answers1

1

First, I would use divs instead of a table. I would then set up a div that is always fixed at the bottom, with an element with and id that you can access and change the text of the caption. Then use the javacript:

if ($('#yourDivThatContainsTheImage').is(':visible'))

To see if the div containing the image is visible. You will need each image you have, in a seperate div, with a specific id. You set the caption text based on the id. The problem you will run into is when to set the text. If you are scrolling and the bottom half of one image is visible, and the top half of another. At what point do you change the text.

Here is a similar problem using this solution.

Also, Bootstrap is a great way to take a lot of work off your shoulders when it comes to creating a responsive page. I really like this example of using bootstrap and images in a div layout.

You might want to try and use Angularjs. It would reduce the markup to a few lines. Like this example:

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <img ng-repeat='image in images' ng-src='http://mysite.it/225x250&text={{image}}'>
  </div>
</div>

And you could load the images with the infinite scroll. Then you wouldn't have hardly anything to change if your image list grew or shrunk.

You would combine both bootstrap and angular to get the result you want, the following is an idea of how you could layout your code:

<div class="container">//bootstrap class
     <div class="row" ng-repeat='image in images'>//angular ng-repeat on the row i.e image in images
            <div class="col-md-10 col-md-offset-1">//container for the image
                  <img ng-src="{{image.source'}}"/>//angular bind to image                
            </div>
      </div>
</div>
Community
  • 1
  • 1
CodeBob
  • 775
  • 7
  • 14
  • I reviewed the question you linked to and found it very instructive. I adapted the jfiddle used in the example to produce the effect I am trying to achieve [here](http://jsfiddle.net/eLomab2w/6/). While it works, it is going to be one very long code that can accommodate the 27 images on my site. Is this a reasonable solution in your opinion? Can you suggest a better one? – D Benway Mar 02 '15 at 01:21
  • The problem you might run into is loading a large number of images when the user first loads your page. Loading could be clunky and slow. Also, there are ways to avoid a large amount of html that is basically a copy and paste. I've adjusted the answer to include some examples. – CodeBob Mar 02 '15 at 18:44
  • Regarding Bootstrap, do you suggest that I use it to change the caption based on the visible image or to responsively center the image on the page? Regarding Angularjs, do you suggest that I use it to write the code that would show the captions or to control the way the images are loaded? Can you elaborate on how I would use it? – D Benway Mar 03 '15 at 17:30
  • Bootstrap is a great way to have the images responsivly size and center on any screen size with very little work using the bootstrap grid system, and the images sizes width:100%;. [link](http://getbootstrap.com/css/#grid) Angular would work for the loading of the images by following the infinite scroll example linked in the answer above. – CodeBob Mar 03 '15 at 17:57
  • So, [this code](http://www.leecorbin.co/fixed-footer-2.html) could be improved by utilizing Bootstrap to display the images and Angular to load the images. Is the script that changes the captions written well enough? Can it be improved? – D Benway Mar 03 '15 at 19:24
  • Yea, you could easily reference bootstrap.css and use the classes, the difficultly in "bootstrapping" existing code is making sure you don't have any conflicting styles from the previous version of the site. Technically you could use angularjs here as well, but may not be worth the trouble if it already is working as is. The script is a great start, but the captions don't always show with the corresponding image. – CodeBob Mar 03 '15 at 20:16
  • No problem! You are going to love it! – CodeBob Mar 03 '15 at 22:07
  • I'm testing a script to center the images on the page. Each image is contained within a div that fills the width and height of the window. In [this example](http://jsfiddle.net/admiringtheorchid/2hgwx8Lg/17/) the caption for the next image appears when the top of the container (outlined by a solid pixel) moves past the top of the window. I need to find a way to distinguish between the top of the actual image and the top of its container for the transition to work properly. Can you make a suggestion? – D Benway Mar 05 '15 at 16:47
  • You are using jQuery .offset on the id of the image container. This will get you the coordinates of the top of the div. Even if you put the id on the image you will get similar results. Think of it this way, when my tag with id is visible, then the caption will change. So perhaps a div with the offset under the image. Use chrome dev tools to inspect the elements and you will see where the containers/elements are as you inspect them. Short answer, try a div under the image with the id that you offset... kind of a hack, but it gets the job done. – CodeBob Mar 05 '15 at 19:57
  • That's brilliant. [Is this what you mean?](http://jsfiddle.net/admiringtheorchid/2hgwx8Lg/18/) – D Benway Mar 05 '15 at 21:25