Cannot center images gallery for Mopics

[ptt81]

just tested, like Michael said, only works in FF, without the float: left; it doesn't work in IE or Avant

ridex, let me know if you come up with something since we are using the same mod

[ridexbuilder]

...we are using the same mod

Not quite, I'm using my 'Enhanced' Mopics mod

Would probably need some conditional coding, such as
if IE then..
else...
etc.

[ptt81]

I meant this part of the mod

"Where no additional product images exist, the standard "Other Images..." box will not appear - as per mod. by osCMax forum member 'mithereal'."

[michael_s]

I did a little tweak and it works in FF and Chrome now. Just changed

display: table-cell;

to

display: inline-block;

I was reading about IE and its inability to properly use the display: style. So I found something that changes the .cell style, and supposedly it will work across all browsers, but now I have lost the page, and cannot for the life of me find it again

It was a pretty simple solution, like:

* html .cell {display: inline;}

But I am going off of memory and have not had a chance to test.

[ridexbuilder]

I actually looked at the display tag but it's beyond my limited knowledge at this point in time
Just when I had got to grips with tables, someone went ahead and came up with divs

...cannot for the life of me find it again

I know that feeling well - an age thang?

[ridexbuilder]

How to achieve cross-browser support for inline-block :: Aaron Russell ?
CSS display: inline-block; is usable now ??
A wee example would be much appreciated for us slow learners

EJ

[michael_s]

Just change the .screenshots style to :

.screenshots {
    display: table-cell;
    display: -moz-inline-box;
    text-align: center;
    padding: 5px 0 5px 0;
    margin-left: auto ;
    margin-right: auto ;
}
* html .screenshots { display:inline; } /* for IE 6 */
* + html .screenshots { display:inline; } /* for IE 7 */
 

I haven't had a chance to test it though.

[ptt81]

Thanks Michael, I've just tested this, show perfectly centered in Firefox and images in rows, but in IE 7 all images still stack up one column although they are now centered. any idea why?

Update:

Finally got it to work, tested in IE7, Avant, FF all images are perfectly centered, tested with 2 or more images and don't forget to remove the div wrapper if you did that. Remember this is apply to those who use this mod http://www.oscmax.com/forums/oscmax-v2-customization-mods/17201-mopics.html and not the stock mopics.

.screenshots {
display: -moz-inline-box;
display: inline-block;
text-align: center;
padding: 5px 0 5px 0;
margin-left: auto ;
margin-right: auto ;
} /* for Firefox 3 */

* html .screenshots {
display: inline;
padding: 5px 0 5px 5px;
} /* for IE 6 & IE 7 */

You don't really need the codes for IE7 as it doesn't change anything with or without, in fact what changed in IE7 is in the IE6 codes, oddly but true but hey it works

in catalog/includes/modules/dynamic_mopics.php

I have to add a <div align="center"></div> as well for the images to center correctly, I can't post instruction since I have modified my files and deleted some of the codes I don't need, so compare your code to mine and make the changes accordingly

<?php
/*
$Id: dynamic_mopics.php 3 2006-05-27 04:59:07Z user $
  Dynamic MoPics version 3.000, built for osCommerce MS2
  Copyright 2006 osCMax2004-2005 Josh Dechant
  Released under the GNU General Public License
  ---------------------------------------------------
  osCMax Power E-Commerce
  osCommerce Documentation by OSCdox :: osCommerce and osCMax documentation
  Copyright 2006 osCMax
  Released under the GNU General Public License
*/
 // Backwards support for older osCommerce versions
 if (isset($product_info_values) && is_object($product_info_values)) {
  $product_info =& $product_info_values;
 }
 // Set the thumbnail basename; replaces "imagebase" in the user's pattern
 $image_base = mopics_get_imagebase($product_info['products_image'], DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR);
 // Set the large image's basename; replaces "imagebase" in the user's pattern
 $image_base_lg = mopics_get_imagebase($product_info['products_image'], DIR_WS_IMAGES . DYNAMIC_MOPICS_BIGIMAGES_DIR);
 // Get the counting method for the user's pattern (1,2,3; a,b,c; A,B,C; etc)
 $i = mopics_getmethod(DYNAMIC_MOPICS_PATTERN);
 // Set the search for the str_replace pattern search/replace
 $search = array('imagebase', mopics_match_pattern(DYNAMIC_MOPICS_PATTERN));
 // Set the initial replace for the str_replace pattern search/replace
 $replace = array($image_base, $i); 
 // Are there any extra thumbnails for this product?
 if (mopics_file_exists(DIR_FS_CATALOG . str_replace($search, $replace, DYNAMIC_MOPICS_PATTERN))) {
 ?>
 
 <tr>
    <td>
          <div align="center">
 <?
 $row = 0;
  // Loop until all of this product's thumbnails have been found and displayed
  while ($image_ext = mopics_file_exists(DIR_FS_CATALOG .  str_replace($search, $replace, DYNAMIC_MOPICS_PATTERN))) {
   $row++;
   // Set the thumbnail image for this loop
   $image = str_replace($search, $replace, DYNAMIC_MOPICS_PATTERN) . '.' . $image_ext;
   // Parse this thumbnail through tep_image for clients with javascript disabled
   $extraImageImage = tep_image($image, stripslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
 
   // Set large image replacement for the str_replace pattern search/replace
   $replace_lg = array($image_base_lg, $i);
   // Only link to the popup if a larger image exists
   if ($lg_image_ext = mopics_file_exists(DIR_FS_CATALOG . str_replace($search, $replace_lg, DYNAMIC_MOPICS_PATTERN), DYNAMIC_MOPICS_BIG_IMAGE_TYPES)) {
    // Set the large image for this loop
    $image_lg = str_replace($search, $replace_lg, DYNAMIC_MOPICS_PATTERN) . '.' . $lg_image_ext;
    // Get the large image's size
    $image_size = @getimagesize(DIR_FS_CATALOG . $image_lg);
    // Set large image's URL for clients with javascript disabled
    $extraImageURL = tep_href_link($image_lg);
    // Parse this thumbnail through tep_image for clients with javascript enabled
    $extraImagePopupImage = tep_image($image, addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    // Set the large image's popup width
    $extraImagePopupWidth = ((int)$image_size[0] + 5);
    // Set the large image's popup height
    $extraImagePopupHeight = ((int)$image_size[1] + 30);
    // Set the large image's popup URL text
    $extraImageURLText = TEXT_CLICK_TO_ENLARGE;
    // Set the large image's popup URL
    $extraImagePopupURL = tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . '&pic=' . $i . '&type=' . $lg_image_ext);
?>
    <div class="screenshots">
<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link($image_lg) . '" target="_blank" rel="lightbox[group]" title="'.$product_info['products_name'].'" >'
. $extraImagePopupImage; ?><br /><span class="smallText"></span></a>');
//--></script>
          <noscript>
            <a href="<?php echo $extraImageURL; ?>" target="_blank"><?php echo $extraImageImage; ?><br /><span class="smallText"><?php echo $extraImageURLText; ?></span></a>
          </noscript>
    </div>
<?php   
} else {
    // No larger image found; Only display the thumbnail without a "click to enlarge" link
    echo '<div class="screenshots">' . $extraImageImage . '</div>';
   }
   // Increase current count
   $i++;
   // Update the replace for the str_replace pattern search/replace for next image in the sequence
   $replace = array($image_base, $i);
  }
  // All thumbnails have been found and displayed; clear all of the CSS floats
  echo '<div class="clearScreenshots"><hr /></div>';
 } //else {
  // No extra images found for this product
  //echo '<p class="noScreenshots"><span class="smallText">' . TEXT_NO_MOPICS . '</span></p>';
 //}
?>
           </div>
       </td>
    </tr>

[ridexbuilder]

Good effort guys! Thanks.
Almost there, for me, just issues with the different browsers (standards, what standards ).

Where there are additional pics, with no larger images, then the thumbnails won't line up vertically (no 'Click to enlarge' text), so I need a 'vertical-align: top'. Just playing about with exactly where it's needed. Firefox is working peachy; IE & Opera are going back to column pics - each with a different layout .

[If my understanding is correct the 'Content2' class is now redundant?
I should just concentrate on the 'screenshots' classes]

[ridexbuilder]

Brilliant stuff!
Now working in Firefox (3.5b4), Opera (10a) and IE (8.0)

For reference:

.screenshots {
    display: -moz-inline-box;
    vertical-align: top; 
    display: inline-block;
    text-align: center;
    padding: 5px 0 5px 0;
    margin-left: auto ;
    margin-right: auto ;
} /* for Firefox 3 */

* html .screenshots {
    display: inline;
    padding: 5px 0 5px 5px;
} 

.screenshots IMG {
    vertical-align: top;
    display: inline;
    border: 3px double #bbc3d3;
}

Well done, much appreciated.
EJ