2

我需要更改模块中的 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>
4

1 回答 1

0

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

于 2013-10-01T13:39:28.510 回答