SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile 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. www.thearmysurplusstore.co.uk

    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\templates\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();
    obj.width(w);
    obj.height(h);
    obj.css("overflow","hidden");
    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

    ******************************/
    .clip{
    width:590px;
    height:275px;

    }

    #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;
    height:55px;
    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;
    padding-left:0;

    }

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

    thanking you all in advance for looking.
    regards
    laurie

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Your slider section is set to be 590x275

    Code css:
    #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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    thanks
    laurie

  4. #4
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by matelots View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    uuuum sorry real dork,
    where do i find how to change size in the css
    thanks

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by matelots View Post
    where do i find how to change size in the css
    You'll find that I showed the CSS size part in post #2
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul will attend to it on the morrow, rather late here in uk.
    really appreciate your help.
    thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •