问题标签 [jquery-backstretch]

我正在开发一个单页网站，其中每个部分的内容都通过帖子 ID 加载。

每个页面都有自己的完整背景图像，它位于内容 div 下，我使用 Backstretch.js 在 div id 中创建该图像。

例子。
http://jsfiddle.net/4k6ty4n1/4/

到这里为止，一切都很完美，但我想让背景图像可以使用 WordPress 中的特色图像选项进行编辑，而不是像现在这样硬编码但找不到解决方案。

它应该是这样的（我猜）：

我想根据视口宽度选择图像。不幸的是，我无法让它工作。仅显示“else”-case，因此 if 函数不起作用。你能帮我吗？

我的代码：

您也可以在JSFiddle中找到它。

我一直在努力解决似乎应该是一个简单的问题：

我继承了一个站点，该站点使用了滑块和 jquery backstretch 的组合。客户要求其中一张幻灯片有标题，位于图像的可见底部。

所以我想转这个：

进入这个：

并销毁 div 的每个实例，就像处理图像一样。

但是，我似乎无法让 javascript 呈现标题 div，并使其与导航保持同步。为了清水起见，我把所有的尝试都去掉了，回到我一开始的 JS 代码。

这是一个例子：http ://tylonius.net/backstretch/lifestyle-gallery.html

有人能帮忙吗？

我在我的 SPA 中使用了 Durandal.js。我需要在某些页面中将图像幻灯片作为背景，为此我正在使用 jquery-backstretch。我正在从我的网络后端获取图像。以正常速度在页面之间导航时一切正常。但是，当我从一个具有后伸的页面快速导航到另一个具有后伸的页面时，第一页中的后伸图像也会在第二页中爬行。当我调试时，只有正确的图像被传递到第二页。而且幻灯片也没有以适当的间隔运行。所以它必须是被调用的两个后伸。

请告诉我如何才能阻止之前的后伸再次出现。以下是相关的代码片段。

这是我的第一页（带有后伸）视图模型代码。

这是我的第二页（带有后伸）视图模型代码。（到我要导航的地方）

我希望我能展示更多，但问题很简单。按照 github 说明，我放置：

$.backstretch("path/to/image.jpg");

在 JS 中。它确实应用了 bg，但不适用于身体本身。在内部主体的末端粘贴：

我也尝试了以下方法：

$('body').backstretch("path/to/image.jpg");

它根本不想应用于身体。我需要它在身体上的魔力，因为我相信这样做会解决一个 chrome 错误。

我需要一点帮助来使用回弹。我在类元素内部使用 backstretch，因为在幻灯片中我想要固定按钮。后伸的代码在这里：

问题是，后伸使这个元素变得非常宽，并且从图像中切出。有谁知道为什么会这样？

Preface: I am new to writing my own jQuery code and have had help writing the animateContinously() function below.

I'm using backstretch.js to have a full browser viewport/background slideshow and jQuery animate() function to change the color (with the help of the jquery-color.js plugin) of the text that shows on top of the backstretch controlled images, depending on which backstretch image is showing. It works, but the backstretch() duration and animate() delay are out of sync if I set them to the same number, ie: 5000 (5 seconds). So I tried offsetting them by 1000 (1 second) and the text and backstretch images fade-in/out at the exact same time, as desired...but after 15 or so transitions they fall out of sync again.

Any ideas/help as to why the same duration & delay time amount doesn't work? And/or why the 1 second offset works at first and then falls out of sync? Here is my code:

我从数据库中获取图像并将其添加到 backstrech-Plugin 的数组中。

这是我创建的代码：

当我制作 imgArray 的 console.log 时，我得到以下值：

每个图像都可用，因为当我添加此字符串而不是函数调用时，将查看图像。因此图像是可调用且可用的。

我正在尝试编辑我购买的 WordPress 模板。调整浏览器窗口大小时，作为主页核心的幻灯片图像未正确调整大小。高度似乎也固定在一个非常小的高度，无论我做了什么 CSS 更改，它似乎都没有改变任何东西。开发人员似乎使用了一个名为Backstretch的 JQuery 插件。但是该插件嵌套在许多其他元素中并且无法正常工作。我有相当多的 HTML 和 CSS 经验，但在 JQuery 中没有，所以似乎找不到解决方案。

该网站位于www.alegowedding.co.za。

这是HTML代码：

CSS的一些摘录：

非常感谢！艾米

编辑：示例

The image below is being viewed on a full screen browser on a 1080p monitor. The top and bottom of the image is cut off.

The image below is on the same monitor, but I have resized the browser to make it smaller in width. Now the height is better, but still doesn't show the full image.

我想在 JQuery Backstretch 图像上添加一个带有一些标题的 div。代码如下所示：

这里内部 div 用于后伸。如果我在外部 div 之前添加任何内容，（如下所示）拉伸不起作用。

我试图在 jsfiddle ( http://jsfiddle.net/krishnasarma/err1fkcd/ ) 中复制场景，但它根本没有显示图像。