Would like to remove the "larger image" text from my additional images

[Ted Grapler]

Found I can remove the "larger image" text that shows up under my images on the Product Page from ALL my images by changing english.php text from

Line #279 : define('TEXT_CLICK_TO_ENLARGE', 'larger image');
to
Line #279 : define('TEXT_CLICK_TO_ENLARGE', '');

But what really would like to do is leave the text under the main image and remove it just from the additional thumbnail images where it can cause some issues with formatting- sometimes the text shows up to the right of the thumbnail instead of underneath depending on how many additional images there are. And it causes other issues.

Believe answer is in /includes/modules/my_template/additional images.php. I tried changing some things around in the code copied below but just ended up with half blank pages (am a newbie at this but learning). Any suggestions would be appreciated.

   // Link Preparation:
	// bof Zen Lightbox 2008-12-11 aclarke
	if (ZEN_LIGHTBOX_STATUS == 'true') {
	  if (ZEN_LIGHTBOX_GALLERY_MODE == 'true') {
	    $rel = 'lightbox-g';
	  } else {
	    $rel = 'lightbox';
	  }
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" title="' . addslashes($products_name) . '">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
	} else {
	// eof Zen Lightbox 2008-12-11 aclarke
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
	// bof Zen Lightbox 2008-12-11 aclarke
	}
	// eof Zen Lightbox 2008-12-11 aclarke

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

    $link = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

[RodG]

But what really would like to do is leave the text under the main image and remove it just from the additional thumbnail images where it can cause some issues with formatting- sometimes the text shows up to the right of the thumbnail instead of underneath depending on how many additional images there are. And it causes other issues.

Believe answer is in /includes/modules/my_template/additional images.php. I tried changing some things around in the code copied below but just ended up with half blank pages (am a newbie at this but learning). Any suggestions would be appreciated.

What *I* would do in a case like this is

Find this....
Line #279 : define('TEXT_CLICK_TO_ENLARGE', 'larger image');
Than add copy of it with a minor change, such as:

define('TEXT_CLICK_TO_ENLARGE2', 'enlarge'); // (or just nullify with '' as you did before)

Then, find the places that are using the TEXT_CLICK_TO_ENLARGE where you *don't* want the original default text to show.

EG:

 
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" title="' . addslashes($products_name) . '">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
    } else {
    // eof Zen Lightbox 2008-12-11 aclarke
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
    // bof Zen Lightbox 2008-12-11 aclarke
    }
    // eof Zen Lightbox 2008-12-11 aclarke

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

    $link = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

[/QUOTE]

Replace those with the new define TEXT_CLICK_TO_ENLARGE2

Save all changes and verify it works as expected.


There *are* other ways of achieving your aim, such as simply deleting the TEXT_CLICK_TO_ENLARGE text (and one of the periods used to indicate string concatenation), but I believe my suggestion has less chance on introducing syntax errors, plus the ability to easily edit/modify the text at a later stage (if needed).

Cheers
RodG

[Ted Grapler]

Thank you RodG. Your solution works- I followed your instructions, just changed 'enlarge' to '' and no more text near the thumbnails.

Is there a simple way to get the images to line up without blank space in between? Here is what my additional images looked like before I removed 'enlarge' text:



After removal:



Here is how it looks on an item with only two thumbnails (three total photos for listing):



And this is what how would ideally like thumbnails to line up no matter if there are three photos or 20:



Can live with the blank space between thumbnails but if there is a simple solution would like to change.

Thanks, Ted

[mc12345678]

If you provide a link to your site someone could tell you the css changes that would help with that, or you could figure it out yourself. When you press f12 while in your browser, you ought to see a screen that would allow "temporary" (on screen) editing of the css and then can apply those changes to the identified file(s). Once applied, don't forget to clear your cache/sessions or try with a different broswer.

[Ted Grapler]

Using Firefox Delveloper Tools Page Inspector on a product page with 3 images found that if I change the percentage (shown in red text in code below) I can change the empty space in between the thumbnails so it looks how I want it to look.

Looking at the HTML on product page with around 8 images I see the number is 15.5% so assume that the percentage is being dynamically generated somehow. Looked at the "Rules" Filter Styles info on left hand side of Developer Tool and also checked down on the CSS box but don't see any likely culprits I can try to change- have no idea what where to look next. Can someone point me in the right direction- just learning about how CSS works recently.

Thanks, Ted

<div class="centerBoxWrapperContents">
  	    	<table align="center" border="0" cellpadding="1" cellspacing="10" width="100%">	
<tbody><tr>
    <td align="center" valign="top" width="49.5%"><div class="additionalImages centeredContent" style="width:100%;">
      <script language="javascript" type="text/javascript">

[Ted Grapler]

Just a quick follow up- figured out how to edit CSS in Firefox Developer tools. Can align the thumbnails left or right by changing:

.additionalImages.centeredContent img {
float: left;
/*height: 50px;
width: 70px;*/

But that is all I see in my mj-template.css . Guessing the change needs to be made in another CSS file. Which is my best bet- mj-general.css, mj-layout.css, bootstrap.css, template.css, stylesheet.css? There are a few others showing but these seemed the most likely

Thanks, Ted