如何使这个滑块脚本能够显示确切的图像宽度和高度 [英] How to make this slider script capable to show the exact image width and height

问题描述

Javaexperts，我今天是一个blogspot开发者，我遇到了一个问题。

Javaexperts, i am a blogspot developer today i am stuck with a problem.

让我们解释一下：

我有以下两个脚本显示我的模板顶部滑块：

I have the below both scripts to show the top slider on my template:

<script class='allscripters' type='text/javascript'>
      //<![CDATA[

//Top slider script
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};

//]]>
    </script>

和此脚本：

<script type='text/javascript'>
FeaturedPostSide({
MaxPost:3,
idcontaint:"#featuredpostside",
ImageSize:600,
interval:5000,   // speed up slider
autoplay:false, // stop auto slider 
tagName:"Feature"  // Feature is label name to display posts from it.
});
</script>

我使用上述两个脚本显示顶部滑块，但问题是，作为延伸，或称为无完美维度，它没有原始大小显示在顶部的大幻灯片，它显示strech类型。

I used the above two scripts to display the top slider, but the problem is that, the images show as stretched, or called it no perfect dimension it has not the original size to display in top big slide, it show strech type.

屏幕截图1： http://prntscr.com/a43dp0


截图2： http://prntscr.com/a43fya

网站网址： http://bolinaa.blogspot.com/

现在要做什么来获得最佳的宽度和高度尺寸作为原始的图像大小，我希望在第一个脚本有什么问题，请帮助我任何人来解决这个问题。感谢。

Now what to do to get the best width and height dimension as the original image size, i hope there is something wrong at the first script, please help me anyone to get solve this issue. thanks.

或

给我另一个脚本

推荐答案

var width;
var height
var img = new Image();
img.onload = function ()
{
    width = img.naturalWidth;
    height = img.naturalHeight;
}
img.src = "yourImagePath";

您现在可以轻松保存该比率...

you can now keep the ratio easily...

ratio = width/height

这篇关于如何使这个滑块脚本能够显示确切的图像宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！