Cannot center images gallery for Mopics

[ridexbuilder]

(Still get a generic error trying to do an attachment).

[michael_s]

Trivial to center the mopics box on the product page.

I just wrapped the existing block in a div with its own centering ID. Took 2 seconds.

New code:

 <div id="content2">
                <div class="screenshotsHeader">
                    <div class="screenshotsHeaderText"><?php echo TEXT_OTHER_PRODUCT_IMAGES; ?></div>
                </div>
                <div class="screenshotsBlock">
                    <?php include(DIR_WS_MODULES . 'dynamic_mopics.php'); ?>
                       </div>
            </div> 

New CSS in dynamic_mopics.css:

#content2 {
  width: 450px ;
  margin-left: auto ;
  margin-right: auto ;
}

See screen shot.

[ridexbuilder]

That seems to address the 2nd point but leaves the images within the box to 'fend from themselves' - unless I'm missing something (likely )

[ptt81]

To Michael, I've tried this, the problem is the images themselve are stuck with the float: left; no matter how you center the block, images stay on left side thus not really center, having more or less images would screw up the orientation. Im using this mod so I don't have the codes you posted but I did the same where the same codes got moved to the dynamic_mopics.php

This is the mod im using mopics

i attached a picture of my problem, you can see the box itself is center but the images inside are not

this is my codes in dynamic_mopics.php, unless I did something completely wrong that I didn't know.

PHP Code:

<?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
  http://oscdox.com
  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 id="screenshots">
    <?
 $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]

ptt81 (likewise with the mod, plus my additions) but easy to adapt with a little bit of messing around (put the last </div> as the final line).
Yes, as stated, Michael has kindly fixed the second part to my query but our original issue remains open.

EJ

[ptt81]

ridex, what do you mean putting the last </div> as the final line? may be we're not on the same page...lol. see my post above

[ridexbuilder]

You sneakily added to your post ... it appears that your code differs slightly from mine but the fundamental issue remains the same - centering within the box.

[ptt81]

well at least we're on the same page on that issue

hope Michael or someone have a work around for this

[ridexbuilder]

He's a nice man, a very nice man and I'm jealous 'cos he still lives in Heat City, AZ - whereas I'm freezing my buns off (nearly)

[Hoping flattery will get us everything]

[michael_s]

That could be a bit tricky, but should not be too hard.

I think the issue is cross browser compatibility. You need to find css that will work in all browsers. I coded something in a couple minutes, but it only displayed properly in FF. Wouldn't work in IE or Chrome (both displayed differently from each other and firefox).

If you want my FF solution to put you on the right track, the code below generates the display shown in the attached screenshot for FF. This doesn't work in IE or Chrome, so it is not a solution, but a starting point. If I have more time I may get back to do something here. I think it might be better to start over from scratch instead of trying to fix the current html/css.



code block in product_info.tpl.php

 <div id="content2">
                <div class="screenshotsHeader">
                    <div class="screenshotsHeaderText"><?php echo TEXT_OTHER_PRODUCT_IMAGES; ?></div>
                </div>
                <div class="screenshotsBlock">
                    <div id="content3">
                    <?php include(DIR_WS_MODULES . 'dynamic_mopics.php'); ?>
                    </div>
                   </div>
            </div> 

CSS needed:

.screenshots {
    display: table-cell;
    text-align: center;
    padding: 5px 0 5px 0;
    margin-left: auto ;
    margin-right: auto ;
}

#content2 {
  width: 450px ;
  margin-left: auto ;
  margin-right: auto ;
}

#content3 {
  display: inline;
  margin-left: auto ;
  margin-right: auto ;
}