In the doc, Demystifying the Image Machine, Step 5 is to modify the CSS to add:
I have done that in my css that is in mm5/css/00000001. It is named cssui.css. However, when I go to the PROD, Product Display Layout Image Machine I do not see it in the head template. Not sure of what I am doing wrong.
My Head Template reads:
On step 6, the instructions should read:
Go back to your PROD page, and click on the Product Display Layout page, click on Advanced Mode, then browse down in the html to find where your main image is being displayed.
In any case, I am not seeing the expected results. I am wondering if that is because I imported my product info from a 4.x store using the importer tools.
.thumbnails { display:block; margin:0; padding:0; width:274px; }
.thumbnails li { display:block; float:left; margin:4px 4px 0 0; padding:0; width:42px; height:42px; text-align:center; border:1px solid #eee; cursor:pointer; }.thumbnails li span { display:inline-block; height:100%; text-align:center; vertical-align:middle; }.thumbnails li img { vertical-align:middle; }.swatches { display:inline; margin:0; padding:0; }.swatches li { display:block; float:left; margin:4px 4px 0 0; padding:0; width:50px; height:50px; text-align:center; border:1px solid #eee; cursor:pointer; }.swatches li span { display:inline-block; height:100%; text-align:center; vertical-align:middle; }.swatches li img { vertical-align:middle; }.product-image-margin { height:8px; }.closeup { position:absolute; top:75px; padding:10px 10px 5px; background-color:#fff; border:1px solid #333; text-align:center; display:none; z-index:2; min-width:274px; min-height:274px; }.closeup a { cursor:pointer; margin-top:5px; z-index:2; } .closeup_backing { display:none; position:absolute; left:0px; top:0px; background-color:#333; opacity:0.75; filter:alpha(opacity=75); width:100%; }
.thumbnails li { display:block; float:left; margin:4px 4px 0 0; padding:0; width:42px; height:42px; text-align:center; border:1px solid #eee; cursor:pointer; }.thumbnails li span { display:inline-block; height:100%; text-align:center; vertical-align:middle; }.thumbnails li img { vertical-align:middle; }.swatches { display:inline; margin:0; padding:0; }.swatches li { display:block; float:left; margin:4px 4px 0 0; padding:0; width:50px; height:50px; text-align:center; border:1px solid #eee; cursor:pointer; }.swatches li span { display:inline-block; height:100%; text-align:center; vertical-align:middle; }.swatches li img { vertical-align:middle; }.product-image-margin { height:8px; }.closeup { position:absolute; top:75px; padding:10px 10px 5px; background-color:#fff; border:1px solid #333; text-align:center; display:none; z-index:2; min-width:274px; min-height:274px; }.closeup a { cursor:pointer; margin-top:5px; z-index:2; } .closeup_backing { display:none; position:absolute; left:0px; top:0px; background-color:#333; opacity:0.75; filter:alpha(opacity=75); width:100%; }
My Head Template reads:
Code:
<script> ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code ) { var thumbnail = document.createElement( 'li' ); var span = document.createElement( 'span' ); // to vertically center the thumbnail images var img = document.createElement( 'img' ); img.src = thumbnail_image; thumbnail.appendChild( span ); thumbnail.appendChild( img ); return thumbnail; } </script>
Go back to your PROD page, and click on the Product Display Layout page, click on Advanced Mode, then browse down in the html to find where your main image is being displayed.
Comment