需要一步一步帮助使用Dreamweaver将jquery灯箱添加到我的代码中

时间:2013-01-13 02:18:59

标签: jquery jquery-plugins dreamweaver lightbox

我买了一个模板,我一直在Dreamweaver中编辑。 我想添加灯箱所具有的弹出功能,并且我自己尝试但无法弄明白。

我可以使用向白痴解释的一些分步说明..(即“这个代码排在第26行”类型的交易)...如果你想解释原因,那也很棒,所以这样我就可以了解模板编码中发生的事情......

我使用的jquery灯箱插件是leandro vieira,下面是我网站上某个特定页面的代码。我不知道你是否还需要编辑任何.js文件.css文件?我能为您提供足够的信息来帮助我吗?无论如何,任何帮助都非常感激。

1 个答案:

答案 0 :(得分:2)

下载zip文件

http://leandrovieira.com/projects/jquery/lightbox/

找到文件jquery.lightbox-0.5.pack.js并将其粘贴在项目的js文件夹中。

现有行

之后
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

放行

<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>

在zip,jquery.lightbox-0.5.css中找到css文件,并将其放在css文件夹中。

现有行之后:

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">

放行

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

替换行:

<img src="images/spec_offer1.jpg" alt="" />

<a class="lightbox" href="spec_offer1.jpg"><img src="spec_offer1_thumb.jpg" alt=""/></a>

(你必须自己创建缩略图)

然后,在结束体标记上方添加以下内容:

<script>
    $('.lightbox').lightBox();
</script>