Featured Image on Hover Showing Data for that Image not shown on thumbnails

Question

I need to add dimensions/text data to the featured image on the right. I was going to add it to another image and swap it ... or maybe hide captions with data on the images and show them on the featured? Any thoughts on a best approach for this? Thanks so much for helping me!

http://test.pillarsoflifebook.com/ottomans/

Currently it's just one line of dimensions but I'd like this to be scalable incase the client wants other pages to have a description or more in depth text than a single line.

Thanks so much! Here's the JQuery I'm using for the swap currently:

function myFunction2() {
    var $large = jQuery('#largeImage1');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs1 img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        //$large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction2);
});

Answer 1

First use this code for bottommost 4 images (Design options) and tell is it alerting properly the name of items ?

And hover on 4 bottommost images

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    //$large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');


    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
        var altText =jQuery(this).attr("alt");

        //alert(jQuery(this).parent().text());
        var existsClass=$large.parent().children().hasClass("prodName");
        //alert(existsClass);
        if(existsClass)
            //$large.parent().children().remove(".prodName");
            $large.parent().find("div").remove(); 

$large.parent().append('<div class="prodName" style="margin-left:220px">'+jQuery(this).parent().text()+'<br/>'+altText+'</div>');

    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

Check this NEW code

Answer 2

There are a few points to consider: -

• Multiple images and having two (or more images), one for each dimension. With multiple images, the obvious first drawback is that the page will take longer to load (at least until the images are cached). One option is to load the images that are required immediately, and then the other images in the background.

  Now, you could also just have a single image and allow the browsers to scale it for you. If you do this then you would want to make sure that you retain the aspect ratio. Secondly, you would want to test it across the browsers and operating systems as some are better at this than others.

  You could also load the image into a canvas and do some cropping and resizing yourself.

  A final twist, depending on which browser versions you want to support is that you can use Scalable Vector Graphics (SVG) in HTML 5. I won't go into the details, but SVG is specifically very good at scaling to different sizes. See the MDN source here.

  There is a lot of information on resizing on the web, as a sample, see here, here and here.

• Text embedded in the image. Well, unless there is something particularly fancy that you want to do with the text that can't be done by the browser, I would not suggest this. Every time you want to generate a new text blurb, you will need to generate a new image. Every time the customer says - 'could we just move the text a little to the left' you will need to create a new image. Not to mention the impact on SEO.

• Storing the text. You can put the text in the alt tag, so long as it adheres to the intention of the alt tag. If the text is descriptive of the image, then it can go in the alt tag. If it goes beyond describing the image and is supporting text, then put it in a separate caption or span.

• Display / style. This comes down to what you customer prefers and what looks best and blends best with your site while following standard usability guidelines. Normally this involves trial and error, sitting down with your customer and deciding what they like. Do they like the text above the image, over it or under it. Do they like it to show immediately, fade in, slide in, bounce, rotate, cycle through the colours of the rainbow and explode?