Photo Enlarge

[Claudia]

On the product page of a store if you click on the main image it goes to a page with an enlarged image of the main image with thumbnails under in. It also shows the Product title given when the product was created in admin.

Is there a way for the product title to be the image title created when the photos are uploaded? For example in the image shown below the Image title I created for each photos is

 

1967 Jim Beam Decanter: Alaska Purchase Centennial: Front View

1967 Jim Beam Decanter: Alaska Purchase Centennial: Back View

 

I'd like this to show for each thumbnail when it is enlarged if I have added the image title in admin.  I haven't added it to all my products yet.

[bsmither]

In the templates element.product.vertical.gallery.php (and horizontal), there is this (simplified):

<ul class="clearing-thumbs data-clearing>
  <li>
    <a>
      <img data-caption="{$PRODUCT.name}{if !empty($image.description)}: {/if}{$image.description}">

The caption will use the product name, and if there is a 'description' for the image, that will be appended.

Unfortunately, the FileManager Image Edit Details screen in admin has no text entry field for a description. (I will post an issue in the Github.)

If the image 'title' is what you want to append to the product name:

Change:
data-caption="{$PRODUCT.name}{if !empty($image.description)}: {/if}{$image.description}"
To:
data-caption="{$PRODUCT.name}{if !empty($image.image_tags.title)}: {/if}{$image.image_tags.title}"

If the image 'title' is what you want to replace the product name:

Change:
data-caption="{$PRODUCT.name}{if !empty($image.description)}: {/if}{$image.description}"
To:
data-caption="{if !empty($image.image_tags.title)}{$image.image_tags.title}{else}{$PRODUCT.name}{/if}"

 

[Claudia]

Thanks Brian!!!

[Claudia]

I noticed something else  - I have added the image title to a product with the front view / back view appendage ( two photos and I haven't implemented your code above yet) When you look at the product page the main image will show the correct front view and the thumbnails will show their front or back view.  But if you hover of the back view and it becomes the main image it still shows the title as front view.  Here's an example page.

Image Titles

[bsmither]

Well spotted!

And should also do the 'alt' attribute as well.

In the skin's javascript file 2.cubecart.js:

Near line 141, find:

    $(".image-gallery").hover(function() {
        var src = $(this).attr("data-image-swap");
        $('#img-preview').attr("src", src);
    });

Change to:

    $(".image-gallery").hover(function() {
        var src = $(this).attr("data-image-swap");
        var ttl = $(this).attr("title");
        var alt = $(this).attr("alt");
        $('#img-preview').attr("src", src).attr("title",ttl).attr("alt",alt);
    });

You will need to have CubeCart clear its internal cache (to refresh its minified file of all the skin's javascript code).

Edited March 17, 2023 by bsmither