Results 1 to 9 of 9
  1. #1
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    0

    Default CSS for additional image alts?

    Hi,

    I have zencart v1.3.9h, and I've recently installed the "swap images via mouseover addon".

    Anyway, I'm trying to find a way to have a descriptive text displayed when hovering over additional product images. The only way I can think to accomplish this is to have individual image alts. Currently, when hovering over an additonal product image, all these images display an alt of the product name.

    I found a source who seems to think having these individual alts for additional product images for zencart is possible. Here is what he says:

    So here is simple code change that will allow you to automatically have different descriptive text when hovering over one of the additional product images:

    The file to modify is additional_images.php located under Includes --> Modules (folder).
    In this file, you should see the following line of code:

    " $img_thumb = zen_image($products_image_directory . $file, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); "
    You can replace this line with the following 3 lines:

    " $img_alt_main = str_replace($products_image_base,'',$file); $img_alt = str_replace($products_image_extension,'',$img_alt_main); $img_thumb = zen_image($products_image_directory . $file, addslashes($img_alt), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); "
    You can then either replace the existing file or use the also-fabulous Zen Cart overrides system by putting the file in a folder with the same name as your template under the Includes--> Modules folder.
    Now, whatever you want to have appear when hovering over the additional product image, you would simply include this in the file name.

    So what particular code modification does is tell Zen Cart to put in the image alt tag whatever appears after the base name in the additional image filename (minus the extension). So in my earlier example, when hovering over the image, I would see "Side_View". If you are naming your additional files with numbers or letters, this code change will not be useful. But if you label them with names like colors, sizes, the view of the photo, etc. etc., you might find this quick little change to be quite useful.



    However, my additional_images file has been modified through the "swap images via mouseover" installation. In it, I searched for the code " $img_thumb = zen_image($products_image_directory . $file, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) " listed above but could not find an exact match.

    The code that came closest to it was this:

    " $thumb_slashes = zen_image($base_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); "


    I tried replacing this code with the one suggested but didn't see any results on my images (other than that at times they and other content disappeared from my page).

    Also, does this code " $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); " need to be altered as well? It came right after the other code.

    So, can my code be tweaked to still accomplish the goal of portraying individual alts for additional product images?
    Or, is there any addon or other CSS modifications out there that would enable a descriptive text when hovering over an image?

    I have very minimal knowledge of CSS, and just started with Zencart, so please excuse my lack knowledge or clarity !

    Any help would be very much appreciated!

    Many Thanks

  2. #2
    Join Date
    Aug 2011
    Posts
    1
    Plugin Contributions
    0

    Default Re: CSS for additional image alts

    Did you ever get this one worked out? I've spent the last 5 or 6 hrs trying to come up with the same thing and all I've managed is to give myself a headache.

  3. #3
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    0

    Default Re: CSS for additional image alts

    Sorry, I should check my posts more often.

    No, I could not find a solution. What I ended up doing was editing my images to display the text I wanted. Not a very satisfactory solution, I admit, but it was the best I could do.

  4. #4
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: CSS for additional image alts?

    Conceptually, assuming the person who suggested the code change in the first place was correct, you could simply substitute each reference to $products_name in that specific file with the following:

    Code:
    $products_name
    becomes
    Code:
    str_replace(array($products_image_base,$products_image_extension),'',$products_name)
    Still, that requires renaming every additional image's file name to include the text you want to display ... which is essentially the same as what it sounds like you did anyway.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  5. #5
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    0

    Default Re: CSS for additional image alts?

    That sounds like a much better solution-- I wouldn't be ruining my images. I'm going to give it a try. It might be a while before I report back with my results. I'm not exactly php savvy.

    Thanks for your help!

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: CSS for additional image alts?

    Is there a typo in that code?
    PHP Code:
    $products_name 
    becomes
    PHP Code:
    str_replace(array($products_image_base,$products_image_extension),'',$file
    This should substitute the additional image filename (minus base & ext) for the product name.

  7. #7
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    0

    Default Re: CSS for additional image alts?

    Sorry for my untimely replies. I've been working on submitting my website to search engines and improving my page rankings (among other things). Just now I've been getting back to improving the look of my site...


    Thanks so much to DrByte and gjh42! I replaced each reference to $products_name with str_replace(array($products_image_base,$products_image_extension),'',$file)

    It works! And it's SIMPLE!

  8. #8
    Join Date
    Jun 2010
    Posts
    207
    Plugin Contributions
    1

    Default Re: CSS for additional image alts?

    I just wanted to say "thanks" as well. The method outlined above worked perfectly on my ZC 1.5 website.

  9. #9
    Join Date
    Jun 2010
    Posts
    207
    Plugin Contributions
    1

    Default Re: CSS for additional image alts?

    When I use parenthesis in my color option names (for instance, "Black Shirt (white letters)"), it breaks this functionality. Is there a way to allow the parenthesis to remain and have this method work. The main issue is when I click the additional image thumbnails and it tries to open in lightbox... instead of showing the image I clicked, it just shows me the larger version of the primary product image. When I remove the parenthesis, it fixes the issue.

 

 

Similar Threads

  1. v154 JS/CSS thumbnail slider for additional images
    By Feznizzle in forum General Questions
    Replies: 37
    Last Post: 28 Mar 2016, 04:48 AM
  2. v154 CSS: Centering Main Image Above Additional Images
    By Feznizzle in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 26 Mar 2016, 03:03 PM
  3. Text under Image, for additional attribute image
    By prim0pyr0 in forum Setting Up Categories, Products, Attributes
    Replies: 0
    Last Post: 3 Aug 2009, 12:42 AM
  4. changing page title and image alts
    By poulenc in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 12 Oct 2007, 06:06 AM
  5. custom image popup script only work for main image, not for additional images
    By gems14k in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 4 Oct 2006, 05:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR