我试图破解我的方式进入tumblr photoset,我想我找到了最大700显示尺寸的修复。
我们说这是{Photoset-700}生成的正常iframe:
<iframe class="photoset" scrolling="no" frameborder="0" height="1048" width="700" style="border:0px; background-color:transparent; overflow:hidden;" src="http://www.georgefratila.ro/post/20314734048/photoset_iframe/esssk/tumblr_m1tp5634Si1qzc7t7/700/false"></iframe>
有没有办法改变iframe的宽度,在放大时更改src url的最后部分和mantain纵横比?
宽度=&#34; 700&#34; 将此值更改为860 SRC =&#34; HTTP://www.georgefratila.ro/post/20314734048/photoset_iframe/esssk/tumblr_m1tp5634Si1qzc7t7/700/false" 将src / 700 / false的最后一部分更改为/ 860 / false
我想我在网站上看到它是用jquery制作的,但是我不记得这个名字,我会查看我的历史,也许我会找到它。
感谢您的帮助。
Edit.1 我想我几乎把所有东西都排序了:
$('iframe.photoset').each(function() {
$(this).attr("width", function(index, old) {
return old.replace("700", "860");
});
$(this).attr("src", function(index, old) {
return old.replace("/700/false", "/860/false");
});
});
我现在唯一的问题是高度,它不会缩放以适合iframe。
答案 0 :(得分:1)
这似乎出现了很多。我开发了一个jQuery插件,使Tumblr Photosets完全响应,可以达到你设置容器的任何宽度。 https://github.com/PixelUnion/Extended-Tumblr-Photoset
我更喜欢这个摆弄iFrame尺寸,因为您可以获得更多信息(包括EXIF数据)并真正让您完全控制内容。
答案 1 :(得分:0)
我找到了问题的解决方案,现在是:
//This will change the source address and display the correct size.
$(".photoset").each(function() {
var newSrc = $(this).attr("src").replace('700','860');
$(this).attr("src", newSrc);
});
//This will get the new size of the iframe and resize the iframe holder accordingly.
$(function(){
var iFrames = $('.photoset');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
如果您对如何最小化或改进脚本有任何想法,请在下面发布。享受