【问题标题】:jquery viewport size to change timthumb outputjquery视口大小改变timthumb输出
【发布时间】:2012-02-16 14:26:08
【问题描述】:

我正在使用 timthumb 在 wordpress 网站中显示全屏图库滑块。我想要做的是调整该图像的大小以适合 vistors 机器的视口。目前这些值是静态的。

我知道 php 无法检测视口大小,所以我假设我需要使用 jquery。

   var viewport_Width = $(window).width();
   var viewport_Height = $(window).height();

我的问题是我不知道如何使用静态值将该输出连接到这段 PHP,该静态值告诉 timthumb 制作图像有多大:

 <div class="cover"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&amp;h=800&amp;w=1280&amp;zc=1" alt="<?php the_title(); ?>" width="1280" height="800" /></a></div>

由于我是 PHP 新手,请慢慢解释。

【问题讨论】:

  • 这里的问题是 PHP 是后端而 jQuery / JavaScript 是前端 - 这意味着在执行 JavaScript 时 PHP 已经完成......你需要找到一个在加载图像之前使用 JavaScript 更新img src 的方式

标签: php jquery wordpress resize viewport


【解决方案1】:

使用 javascript 删除你的 img 的 height 和 width 属性,然后使用 CSS 将它们的 width 和/或 height 设置为 100%。

 $('.cover img').each(function(){
    $(this).removeAttr('width')
    $(this).removeAttr('height');
});

【讨论】:

  • 雾气慢慢消散 我想我明白你的意思了。我会试试看 - 谢谢!
猜你喜欢
  • 1970-01-01
  • 2019-12-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-03
  • 1970-01-01
  • 2017-11-28
  • 1970-01-01
相关资源
最近更新 更多