shaik Jilani shaik Jilani - 2 months ago 11
CSS Question

Editing Prestashop themes and modules to auto-resize images

I need to change the tpl file in my module. There's an issue with changing the size of images depending on the screen resolution. The following code doesn't always display perfectly until they refresh the page. How can I smooth this process out?

<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

If you use any CSS or JavaScript inline, enclose it in {literal} {/literal} tags. This differentiates it from when Smarty uses the brackets { }.

Comments