Question

我需要更改模块中的tpl文件。根据屏幕分辨率更改图像大小存在问题。以下代码在刷新页面之前始终不会完美显示。我怎样才能顺利完成这个过程？

<script type="text/javascript" src="../../img/jquery.min.js"></script>
<script type="text/javascript" src="img/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle,     etc...
     });
     $('.slideshow1').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle,   etc...
     });
     $('.slideshow2').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
     });
});
</script>

CSS

    <style type="text/css">
    .slideshow { height:100%; width: 290px; float:left; margin:20px 8px 0px 0px;      padding:0px;}
    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee;                 margin:0px; padding:0px; width:290px; float:left;}

    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;   margin:20px 0px 0px 0px; padding:0px; }*/
   .slideshow1 { height:100%; width: 290px; padding:0px; float:left;margin:20px 0px 0px 0px; }
    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left; }   

    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/
    .slideshow2 { height:100%; width: 290px; float:right; margin:20px 0px 0px 0px; }
    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:right; }

    {literal}
    @media only screen and (min-width: 1218px) {

    .slideshow { height:100%; width: 290px; float:left; margin:20px 8px 0px 0px; padding:0px;}
    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left;}

    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/
    .slideshow1 { height:100%; width: 290px; padding:0px; float:left;margin:20px 0px 0px 0px; }
    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left; }


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/
    .slideshow2 { height:100%; width: 290px; float:right; margin:20px 0px 0px 0px; }
    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:right; }
    }

    @media only screen and (min-width: 998px) and (max-width: 1217px) {
    .slideshow { height:100%; width: 238px; float:left; margin:20px 8px 0px 0px; padding:0px;}

    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px;}

    .slideshow1 { height:100%; width: 238px; padding:0px; float:left;margin:20px 0px 0px 0px; }

    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;   margin:20px 0px 0px 0px; padding:0px; }*/

    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; }

    .slideshow2 { height:100%; width: 238px; float:right; margin:20px 0px 0px 0px; }

    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/

    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; }
    }

    @media only screen and (min-width: 768px) and (max-width: 997px) {
    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee;    float:left;  padding:0px; width:225px; margin:auto;}


    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/
    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:225px; float:left; margin:auto; }


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/
    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:225px; float:left; margin:auto;  }
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {

    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:140px;}


     /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/

    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:140px; }


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/

    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:140px; }
}


     @media only screen and (max-width: 479px) {

    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:100%; text-align:center;}


    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/

    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;  padding:0px; width:100%; text-align:center; }


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/

    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;margin-left:-8px;  padding:0px; width:100%; text-align:center; }
    }

    {/literal}
    </style>

HTML

<div class="slideshow">
        <a href="#"><img src="img/earrings_011.jpg" ></a>
        <a href="#"><img src="img/earrings_044.jpg"/></a>
        <a href="#"><img src="img/earrings_033.jpg"></a>

</div>

<div class="slideshow1" >
        <a href="#"><img src="img/bracelets_011.jpg" /></a>
        <a href="#"><img src="img/bracelets_022.jpg" /></a>
        <a href="#"> <img src="img/bracelets_033.jpg" /></a>
</div>

<div class="slideshow2">
<a href="#"><img src="img/necklaces_01.jpg" /></a>
<a href="#"><img src="img/necklaces_02.jpg"/></a>
<a href="#"><img src="img/necklaces_03.jpg"/></a>
</div>

Answer 1

如果您使用内联的任何CSS或JavaScript，请将其括在{literal} {/literal}标记中。这与Smarty使用括号{ }时的区别。

编辑Prestashop主题和模块以自动调整图像大小

1 个答案: