bkeaton,
Perhaps we might figure it out ourselves, or at least enlighten somebody to join in. I found two JavaScript files that control the slider, they are in store\includes\templates\digitalshop\jscript
There are two files there that I find of interest, they are jscript_easySlider1.s.js and jscript_s3slider.js.
When I look at these two files, I noticed something of interest in jscript_easySlider1.5.js and it is:
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.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');
ALSO, in store/includes/templates/digitalshop/css there is a file stylesheet.css that has the following:
This part of the code is located towards the very bottom of the file. The first part of CSS for the slider (.clip - width and height), do affect the size of the slider, proportionally, but then alignment and everything else is a little off. I guess the most important thing to consider using this plugin is that the images have to be the exact same size, so that everything fits in the box without "stretching" - unless somebody figures something out that I didn't, which I'm sure they can! If the images are all the same size, we could get it to stop "stretching" and just pick a width and height we like for the image.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; }
I haven't figured out how to "center" the image slider once I alter the size of the images, though. Any thoughts?


Reply With Quote



