Vertical centering images within a slideshow using JS code?

Question

I have a problem that I need to sort out in javascript I believe, but dont know how to begin with it, so hopefully someone from the javascript community may be able to help please.

Basically, the following code allows me to load 10 images into a slideshow carousel. However, these images are either 600px x 400px Portrait or 400px x 600 Landscape. The problem I have is that the Landscape images are vertically aligned to the top of the container.

I have managed to get around this by creating two classes in my CSS file image-P & image-L

image-L has a "padding-top:100px " which successfully vertially aligns the landscape images in the centre.

What I'd like to do is for the code to check which images are landscape and then create

return '<img src="Images/' + item.url + '" class="image-L" alt="" />';

and anything else use

return '<img src="Images/' + item.url + '" class="image-P" alt="" />';

many thanks in advance.

Cheers Rob.

<script type="text/javascript">

    var mycarousel_itemList = [
        { url: "Image1.jpg" },
        { url: "Image2.jpg" },
        { url: "Image3.jpg" },
        { url: "Image4.jpg" },
        { url: "Image5.jpg" },
        { url: "Image6.jpg" },
        { url: "Image7.jpg" },
        { url: "Image8.jpg" },
        { url: "Image9.jpg" },
        { url: "Image10.jpg" }
    ];

    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > mycarousel_itemList.length) {
                break;
            }

            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
        }
    };

    /**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
        return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
        });
    });

Answer 1

You could try loading the image into JavaScript [1] with the Image class [2] and check the height/width of the image itself to determine which class to apply, but this would slow things down if you did it at load time. (I don't know if the browser would cache the file or not for when you went to display it later).

It seems like it'd be better to wait and apply the style after the image has been added to the document/displayed.

You could probably use jQuery to get the height of the (browser) view and the height of the image then absolutely position the image to be centered. (That'd be more flexible if you wanted to use different image sizes later).

1. http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
2. http://www.w3schools.com/jsref/dom_obj_image.asp

Answer 2

My solution:

    <script type="text/javascript">

    function preloader() {

        // counter     
        var i = 0;

        // create object     
        imageObj = new Image();

        // set image list     
        images = new Array();
        images[0] = "Images/image1.jpg"
        images[1] = "Images/image2.jpg"
        images[2] = "Images/image3.jpg"
        images[3] = "Images/image4.jpg"
        images[4] = "Images/image5.jpg"
        images[5] = "Images/image6.jpg"
        images[6] = "Images/image7.jpg"
        images[7] = "Images/image8.jpg"
        images[8] = "Images/image9.jpg"
        images[9] = "Images/image10.jpg"

        // start preloading     
        for (i = 0; i <= 9; i++) {
            imageObj.src = images[i];
        }
    }   
</script>


<script type="text/javascript">

    var mycarousel_itemList = [
{ url: "Images/Image1.jpg" },
{ url: "Images/Image2.jpg" },
{ url: "Images/Image3.jpg" },
{ url: "Images/Image4.jpg" },
{ url: "Images/Image5.jpg" },
{ url: "Images/Image6.jpg" },
{ url: "Images/Image7.jpg" },
{ url: "Images/Image8.jpg" },
{ url: "Images/Image9.jpg" },
{ url: "Images/Image10.jpg" }
];

    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > mycarousel_itemList.length) {
                break;
            }

            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
        }
    };

    /**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
        return '<img src="' + item.url + '" class="image" alt="" />';
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
        });
    });

</script>

Answer 3

<%@ Page Title="" Language="C#" MasterPageFile="~/rwmSite.master" AutoEventWireup="true"
    CodeFile="Portfolio.aspx.cs" Inherits="Portfolio" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script>
    <script type="text/javascript">


        var mycarousel_itemList = [
            { url: "Image1.jpg" },
            { url: "Image2.jpg" },
            { url: "Image3.jpg" },
            { url: "Image4.jpg" },
            { url: "Image5.jpg" },
            { url: "Image6.jpg" },
            { url: "Image7.jpg" },
            { url: "Image8.jpg" },
            { url: "Image9.jpg" },
            { url: "Image10.jpg"}];

        function mycarousel_itemLoadCallback(carousel, state) {
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (carousel.has(i)) {
                    continue;
                }

                if (i > mycarousel_itemList.length) {
                    break;
                }

                carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
            }
        };

        /**
        * Item html creation helper.
        */
        function mycarousel_getItemHTML(item) {

            var x = new Image(); x.src = item.url;
            while (!x.complete)

                if (x.height <= 400)

                    return '<img src="../Images/' + item.url + '" class="image-L" alt="" />';
                else
                    return '<img src="../Images/' + item.url + '" class="image-P" alt="" />';
        };

        jQuery(document).ready(function () {
            jQuery('#mycarousel').jcarousel({
                size: mycarousel_itemList.length,
                itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div id="wrap" align="center">
        <div class=" jcarousel-skin-tango">
            <div class="jcarousel-container jcarousel-container-horizontal">
                <div class="jcarousel-clip jcarousel-clip-horizontal">
                    <ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
                    </ul>
                </div>
                <div class="jcarousel-prev jcarousel-prev-horizontal">
                </div>
                <div class="jcarousel-next jcarousel-next-horizontal">
                </div>
            </div>
        </div>
    </div>
</asp:Content>