1

代码 （请注意，如果没有引用图像，结果将无法正确显示）

我是一所大学的学生工作者，有一些编程经验。我的老板希望我制作一个类似于这里可以看到的幻灯片。除了基本的 W3 学校教程之外，我对 Javascript 或 jQuery 一无所知，所以我决定从外部资源获取代码以用于我自己的目的进行修改。

代码的这种构建出现了两个问题。我的第一个问题是两者中较简单的一个。

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(<img src="img\rssSmall.jpg" />)"></a>

我正在尝试在幻灯片底部制作小缩略图以在幻灯片之间进行制表符。不幸的是，由于嵌套引号，IDE（如果重要的话，Aptana）将编码的引号解释为

"$('.slideshow').blinds_change(<img src="

和

" />)"

因此它显示“/>)”而不是正确的缩略图图像。

我的第二个问题是将每张幻灯片变成一个链接。由于某种原因，一个简单的标签不起作用。

<li><a href="http:\\google.com"><img class="slide" src="img\sakaiupgrade.png" alt="Whats new in Sakai?" /></a></li>

我认为这更多地与 Javascript/jQuery 方面有关，目前这超出了我的想象。

提前感谢您能给我的任何帮助！

如果您想自己添加一些图像，幻灯片的大小为 w500 h350，标签的大小为 w77 h54。或者，如果需要，我可以尝试上传所有相关图片。

4

2 回答 2

0

对于您的第一个问题：

您可以使用斜杠转义引号，例如

"$('.slideshow').blinds_change('<img src=\"/some/path\" />')"

对于您的第二个问题：

您的链接不正确。它应该是：

href="http://google.com"
于 2012-05-23T17:30:48.703 回答
0

您需要将其添加到页面顶部的<script标签下方。

这将开始盲注过程。

<script language="javascript">

    $(document).ready(function()
    {
    $(".slidehsow").blinds();
    });


</script>

接下来，您<a会找到链接，但是如果您想添加缩略图，请将它们更改为：

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)"><img src="img/somethingThumbnail.jpg" alt="Link to Slide 1" /></a>

和他们一样，工作是胡萝卜！

因此，您的主要图像包含在<li>元素中，而缩略图则包含在<a元素中。

编辑问题 2

查看 jQuery 百叶窗代码，它无法将<li>项目转换为正确的链接 - 因为图像已更改为新 div 的背景图像。

您需要编辑该jquery.blinds-0.9.js文件，如下所示：

第 49 行变为：

blinds_images[blinds_images.length] = { 'title': e.alt, 'src': e.src, 'href': $(this).parent().attr("href") }

这会将父元素（图像）href属性添加到数组中。

第 89 行变为：

,'cursor': 'pointer'

这意味着鼠标在图像上时将变为链接链接指针

将此行插入第 91 行：

tile.click(function (e) { window.location = blinds_images[0]['href']; });

这组是从第一个图块开始的默认链接。

最后，第 115 行（或插入行之前的第 114 行）变为：

$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat').click(function (e) { window.location = config.images[config.img_index]['href']; });

href同样，当单击特定幻灯片时，这会拾取并将浏览器定向到那里。

通过这些更改，您通常的代码<li><a href="somelink.htm"><img src="someIMage.png" /></a></li>将按预期工作。

警告我没有在没有元素的情况下测试过这个，所以<a没有链接的列表项要么需要一个空的（可能），要么需要进一步调整 jQuery 代码以捕获任何null值。

于 2012-05-23T17:34:10.860 回答