Question

我对JQuery（以及一般的HTML）非常陌生，我正试图在单击图像时显示并播放嵌入式电影。但是，图像无法点击，我看不出原因。

这是我的代码：

<style>
    .film_overlay {
     display:none;
     z-index:500;
     background-color:#d0d0d0;
     width:520;
     min-heigth:300;
     border:1px solid #666;
     -moz-box-shadow:0 0 90px 5px #000;
     -webkit-box-shadow:0 0 90px 5px #000;
 }
 .film_overlay .close {
     background-image:url(http://www.destinationfjallen.se/sites/destfjallen/files/close.png);
     position:absolute;
     right:-15px;
     top:-15px;
     cursor:pointer;
     height:35px;
     width:35px;
 }
</style>

<img class="karta" src="http://www.destinationfjallen.se/sites/destfjallen/files/film1.jpg" rel="#film"/>

<div class="film_overlay" id="#film">
     <iframe src="http://player.vimeo.com/video/54730694?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="500" height="281" frameborder="0"webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

<script>
$(document).ready(function () {
   $("img[rel]").overlay();
});
</script>

我很感激能得到的所有帮助！

Answer 1

我认为$（“img [rel]”）不是正确的选择器。

如果您想选择具有特定rel值的图片，可以尝试

$("img[rel=#film]")

顺便说一句，我会删除您的身份#的{{1}}，但不确定您是否可以选择(id="film")

此外$("##film")不是rel标记的正确属性。见http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG

Answer 2

.overlay()不是jQuery的一部分。它是jQuery工具库中的一个插件。你必须包括它。将以下行添加到页面的<head>部分（在加载jQuery之后）：

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

Answer 3

您需要在页面的head标记中添加脚本源，因为它是一个插件。以下链接将帮助您了解有关Jquery Overlay的更多信息

http://jquerytools.org/documentation/overlay/

JQuery overlay不会工作

3 个答案: