Announcement

Collapse
No announcement yet.

PR8 Update 10 Template Changes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    PR8 Update 10 Template Changes

    A change has been made to Product Display Layout Image Machine tab which is assigned only to the PROD page by default.

    The change that was made, fixes a bug where Internet Explorer 7/8 would make an HTTP request to a thumbnail image even if the image URL was an empty string. This bug didn't cause any known issues, but would show a 404 in the developer console.

    Code was added to ensure the passed in thumbnail URL is not an empty string before attempting to make the HTTP request.

    CSSUI cssui_default_fw: PROD: Product Display Layout Image Machine
    New default template (changes/additions are highlighted)
    Code:
    <script>
    ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code )
    {
        var thumbnail, span, img;
    
    
        thumbnail = document.createElement( 'li' );
        span      = document.createElement( 'span' ); // to vertically center the thumbnail images
    
    
        thumbnail.appendChild( span );
    
    
        if ( typeof( thumbnail_image ) == 'string' && thumbnail_image.length > 0 )
        {
            img       = document.createElement( 'img' );
            img.src   = thumbnail_image;
            
            thumbnail.appendChild( img );
        }
    
    
        return thumbnail;
    }
    </script>
    MMUI css_fw: PROD: Product Display Layout Image Machine
    New default template (changes/additions are highlighted)
    Code:
    <script>
    ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code )
    {
        var thumbnail, span, img;
    
    
        thumbnail = document.createElement( 'li' );
        span      = document.createElement( 'span' ); // to vertically center the thumbnail images
    
    
        thumbnail.appendChild( span );
    
    
        if ( typeof( thumbnail_image ) == 'string' && thumbnail_image.length > 0 )
        {
            img       = document.createElement( 'img' );
            img.src   = thumbnail_image;
            
            thumbnail.appendChild( img );
        }
    
    
        return thumbnail;
    }
    </script>
    <style type="text/css">
    .clear            { clear:both; font-size:0em; height:0em; }
    
    
    .product-image{
        height:350px;
        text-align:center;
    }
    
    
    .thumbnails{
        display:block;
        margin:0;
        padding:0;
        width:&mvt:prod_imagemachine:image_width;px;
    }
    
    
    .thumbnails li{
        display:block;
        float:left;
        margin:4px 4px 0 0;
        padding:0;
        width:42px;
        height:42px;
        text-align:center;
        border:1px solid #eeeeee;
        cursor:pointer;
    }
    
    
    .thumbnails li span{
        display:inline-block;
        height:100%;
        text-align:center;
        vertical-align:middle;
    }
    
    
    .thumbnails li img{
        vertical-align:middle;
    }
    
    
    .product-image-margin{
        height:8px;
    }
    
    
    .closeup{
        position:absolute;
        top:75px;
        padding:10px 10px 5px 10px;
        background-color:#ffffff;
        border:1px solid #333333;
        display:none;
        text-align:center;
        z-index:2;
        min-width:350px;
        min-height:350px;
    }
    
    
    .closeup_backing{
        position:absolute;
        left:0px;
        top:0px;
        background-color:#333333;
        opacity:0.75;
        filter:alpha(opacity=75);
        width:100%;
    }
    
    
    .closeup div
    {
        padding:2px 0 0 0;
    }
    
    
    .closeup a{
        cursor:pointer;
        margin:8px 0 0 0;
        z-index:2;
    }
    </style>
    MMUI default_fw: PROD: Product Display Layout Image Machine
    New default template (changes/additions are highlighted)
    Code:
    <script>
    ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code )
    {
        var thumbnail, span, img;
    
    
        thumbnail = document.createElement( 'li' );
        span      = document.createElement( 'span' ); // to vertically center the thumbnail images
    
    
        thumbnail.appendChild( span );
    
    
        if ( typeof( thumbnail_image ) == 'string' && thumbnail_image.length > 0 )
        {
            img       = document.createElement( 'img' );
            img.src   = thumbnail_image;
            
            thumbnail.appendChild( img );
        }
    
    
        return thumbnail;
    }
    </script>
    <style type="text/css">
    <style type="text/css">
    .clear            { clear:both; font-size:0em; height:0em; }
    
    
    
    
    
    
    .thumbnails{
        display:block;
        margin:0;
        padding:0;
        width:&mvt:prod_imagemachine:image_width;px;
    }
    
    
    .thumbnails li{
        display:block;
        float:left;
        margin:4px 4px 0 0;
        padding:0;
        width:42px;
        height:42px;
        text-align:center;
        border:1px solid #eeeeee;
        cursor:pointer;
    }
    
    
    .thumbnails li span{
        display:inline-block;
        height:100%;
        text-align:center;
        vertical-align:middle;
    }
    
    
    .thumbnails li img{
        vertical-align:middle;
    }
    
    
    .product-image-margin{
        height:8px;
    }
    
    
    .closeup{
        position:absolute;
        top:75px;
        padding:10px 10px 5px 10px;
        background-color:#ffffff;
        border:1px solid #333333;
        display:none;
        text-align:center;
        z-index:2;
        min-width:350px;
        min-height:350px;
    }
    
    
    .closeup_backing{
        position:absolute;
        left:0px;
        top:0px;
        background-color:#333333;
        opacity:0.75;
        filter:alpha(opacity=75);
        width:100%;
    }
    
    
    .closeup div
    {
        padding:2px 0 0 0;
    }
    
    
    .closeup a{
        cursor:pointer;
        margin:8px 0 0 0;
        z-index:2;
    }
    </style>
    Last edited by dcarver; 05-07-13, 09:49 AM.
    David Carver
    Miva, Inc. | Software Developer

    #2
    Re: PR8 Update 10 Template Changes

    I'm sure most will figure it out anyway but on this post
    MMUI default_fw: PROD: Product Display Layout Image Machine
    New default template (changes/additions are highlighted)

    You have
    <style type="text/css"> twice
    Mark Hood
    Vermont Gear

    Comment


      #3
      Re: PR8 Update 10 Template Changes

      Hi Mark,

      I double checked the framework and you are right. I have a typo, there is in fact only one <style type="text/css"> tag.

      Thanks for pointing it out, I'll try to update the post.
      David Carver
      Miva, Inc. | Software Developer

      Comment

      Working...
      X