Slider stretching images

hi i am a newbie so please be gentle.
have created ecommerce site in zen 1.3.9h using a template by bling themes called “digital shop”. sadly we cannot get any support. I have image handler 2 installed.

my slider is producing blurry images and i need to know how to set the variables in the js script to stop it stretching the images. please view my problem.

my pictures in other areas of the site are perfect and resolution is acceptable. i am sure that problems are due to slider

I found two JavaScript files that control the slider, they are in my - store\includes\ emplates\digitalshop\jscript

first code;
this.each(function() {
var obj = $(this);
var s = $(“li”, obj).length;
var w = $(“li”, obj).width();
var h = $(“li”, obj).height();
var ts = s-1;
var t = 0;
$(“ul”, obj).css(‘width’,s*w);
if(!options.vertical) $(“li”, obj).css(‘float’,‘left’);

I’m guessing the var w and var h have something to do with the size of the slider or images. I’m just not sure what to do here, I don’t know any JavaScript.

ALSO, in store/includes/templates/digitalshop/css there is a file stylesheet.css that has the following code:

4. Featured slider1 Detail



#slider1 {
width: 590px; /* important to be same as image width /
height: 275px; /
important to be same as image height /
position: relative; /
important /
overflow: hidden; /
important */
margin:3px 3px 3px 4px;

#slider1Content {
width: 590px; /* important to be same as image width or wider /
position: absolute; /
DEFAULT absolute; /
top: 0;
margin-left: 0;
.slider1Image {
float: left; /
DEFAULT left; */
position: relative;
display: none;

.slider1Image span {
position: absolute; /* DEFAULT absolute; */
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 564px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;

.slider1Image span strong {
font-size: 14px;
#slider1 .right {
right: 0;
bottom: 0;
width: 90px !important;
height: 275px;
#slider1 .bottom {
bottom: 0;
left: 0;
#slider1 ul {
list-style-type: none;


would really appreciate some tech help from anyone that is familiar with this.

thanking you all in advance for looking.

Your slider section is set to be 590x275

#slider1 {
width: 590px; /* important to be same as image width */
height: 275px; /* important to be same as image height */

Do you notice the comments in the above CSS code?
All of the images will be stretched to fit within the slider.

All of your images must be the same size as each other, and the slider must be the same size as the images.
Any images that are not the same size will be stretched to fit, which is why you’re experiencing the problem.

Changing the javascript is not your answer. The answer for you is to change the size of the slider, and to ensure that all of the images you use on the slider are the same size as the slider.

thanks for reply unobtrusivly zen
i did change sizes of images and uploaded to zen but still experienced the problem.
not sure if this is due to way zen uses small med and large images.
others in the zen forum have experienced same problem even when setting to these basic sizes. do they have to be the exact dimension ratio?.

ps can i change the size of the slider?

if i were to batch process my images to image size 500x 500 and canvas size 500 x 500 what would i need to change in the script?
really appreciate your reply and help.
thanks laurie

No script changes would need to be made at all.

The problem is one exists entirely between the CSS size of the slider, and the size of the images.

uuuum sorry real dork,
where do i find how to change size in the css

You’ll find that I showed the CSS size part in post #2

thanks paul will attend to it on the morrow, rather late here in uk.
really appreciate your help.
thanks again