Dynamic mopics, overlapping images

[dumbassgeek]

Hi,

 

I was hoping you could help me. I use dynamic mopics to display images and thumbnails etc. I started to use it to add photos of the products in action (other pictures of the product).

 

I can get the other pictures of the image to display but they overlap even though there is room to display them both (actually you could fit 4 images in a row and I only want to display two extra photos). Any ideas what is going on?

 

I also cannot seem to center the photos either.

 

Any suggestions?

 

Thanks

[kirikintha]

Without seeing any of your code or an example, I would say try hitting it with a large hammer until it bends to your will. :-"

[dumbassgeek]

Without seeing any of your code or an example, I would say try hitting it with a large hammer until it bends to your will. :-"

 

Thought it may be a general problem with dynamic mopics rather than specific to mine.

 

This is the specific code in product_info.php where dynamic mopics is used for the other images

<tr>
	  <td>
			<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>
</td>
  </tr>

 

 

This is the code in dynamic_mopics.php

	// 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))) {

	$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" type="text/javascript"><!--
		document.write('<a href="java script:popupImage(\'<?php echo $extraImagePopupURL; ?>\',\'<?php echo $extraImagePopupHeight; ?>\',\'<?php echo $extraImagePopupWidth; ?>\');"><?php echo $extraImagePopupImage; ?><br /><span class="smallText"><?php echo $extraImageURLText; ?></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>';
}
?>

 

Anything else you need let me know.

 

Thanks for taking the time to help.

 

Regards

[kirikintha]

Cool - goshdarnit I am a little beat today - what a Monday - my guess is that the css floats are messing up - can you post any relevant css so I can get one last good look - I do not really see anything other than css may be an issue with invalidly nested div tags - what browsers have you looked at this with?

 

got a link so i can look at the live site?

 

Thanks!

[dumbassgeek]

Cool - goshdarnit I am a little beat today - what a Monday - my guess is that the css floats are messing up - can you post any relevant css so I can get one last good look - I do not really see anything other than css may be an issue with invalidly nested div tags - what browsers have you looked at this with?

 

got a link so i can look at the live site?

 

Thanks!

 

 

Hi, I really appreciate the help. I'm such an idiot and didn't check in other browsers. I just checked in firefox which is my default browser and it doesn't work. In IE 7 it works OK.

 

The css for dynamic mopics is

 

BODY.popupImage {
background: #FFFFFF;
color: #000000;
text-align: center;
padding: 0;
margin: 0;
}

.screenshotsBlock {
border: 1px solid #bbc3d3;
background: #f8f8f9;
text-align: center;
padding: 0;
margin: 0;
}

.screenshotsHeaderText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #ffffff;
text-align: left;
background: url("images/infobox/corner_left.gif") top left no-repeat;
padding: 0 0 0 15px;
margin: 0;
}

.screenshotsHeader {
background: #bbc3d3 url("images/infobox/corner_right.gif") top right no-repeat;
padding: 0;
margin: 10px 0 0 0;
}

.screenshots {
float: left;
width: 25%; /* the width sets the number of images per row (i.e., 50% = 2 per row, 33% = 3 per row, 25% = 4 per row, 20% = 5 per row, etc) */
text-align: center;
padding: 5px 0 5px 0;
margin: 0;
}

.screenshots a:hover {
text-decoration: none;
}

.screenshots IMG {
border: 3px double #bbc3d3;
}

.clearScreenshots {
clear: both;
height: 1px;
width: 100px;
}

.clearScreenshots hr {
display: none;
}

.noScreenshots {
text-align: center;
padding: 15px 0 15px 0;
margin: 0;
}

 

Regards