如何将 Fancybox 用于旋转图像 div？

Question

我正在尝试让 Fancybox ( http://fancybox.net/howto ) 为 Dailyimg div 工作（请参阅下面的 HTML 片段）以放大图像。 div 包含每天旋转的单个图像（请参阅下面的 JavaScript）。 我不知道如何让 Fancybox 工作。 任何帮助将非常感激。 -M

<div id="emma2011_left">
<h2>Image of the Day</h2>
<div id="dImg">
<a id="inline" href="#dailyimg"><div id="dailyimg" class="feature"></div></a>
<div id="title" class="feature"></div>
<div id="caption" class="feature"></div>
</div>
</div>

<script type="text/javascript">
oImages = [
{time: '2011-8-28', img: 'images/rotation_pics/test_pic.jpg', title: "testpic title", caption:  "my caption" },
time: '2011-8-29', img: 'images/rotation_pics/test_pic2.jpg', title: "testpic title", caption: "my caption" }
];

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var today = year + "-" + month + "-" + day;

window.onload = function(){
for(var i in oImages){
    if(oImages[i].time == today) oTodayImage = oImages[i];
}

oImg = document.createElement("img");
oImg.setAttribute("title", oTodayImage.title);
oImg.setAttribute("src", oTodayImage.img);
var e = document.getElementById("dailyimg");
e.appendChild(oImg);

var title=document.createTextNode(oTodayImage.title);
var f = document.getElementById("title");
f.appendChild(title);

var capt=document.createTextNode(oTodayImage.caption);
var g = document.getElementById("caption");
g.appendChild(capt);

$("a#inline").fancybox({
'overlayShow': false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
};
</script>

Answer 1

只需基本调试即可解决此问题。 如果您使用 Internet Explorer，您可以按 F12，然后按“控制台”选项卡查看 JavaScript 错误。 如果您使用 Firefox，请安装“Firebug”插件并单击小错误图标开始。

第 13 行代码缺少大括号 - 将它放在第二个数组元素的前面，就在单词“time:”之前，如“{time:”。
</script>标签之前的最后一行代码有一个额外的分号，应该是“}”而不是“};”。

稍后：下面添加了完整代码。 我建议尝试使用下面的确切语法和文件版本来使其工作，只有这样您才能尝试将其合并到您的代码中。 对 HTML 格式感到抱歉，我能在 stackoverflow 编辑器中做到最好。 对于示例，示例的根文件夹（2 个文件，1 个文件夹）中应包含三个项目，如下所示：

/default.htm
/jquery-1.4.4.min.js
/fancybox/[所有剩余的文件都应该在这个文件夹中]
<html><head> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" /> <script type="text/javascript"> oImages = [{ time: '2011-8-28', img: 'images/rotation_pics/test_pic.jpg', title: "testpic title", caption: "my caption" }, { time: '2011-8-29', img: 'images/rotation_pics/test_pic2.jpg', title: "testpic title", caption: "my caption" } ];
```
 var currentTime = new Date(); var month = currentTime.getMonth() + 1; var day = currentTime.getDate(); var year = currentTime.getFullYear(); var today = year + "-" + month + "-" + day; window.onload = function () { for (var i in oImages) { if (oImages[i].time == today) oTodayImage = oImages[i]; } oImg = document.createElement("img"); oImg.setAttribute("title", oTodayImage.title); oImg.setAttribute("src", oTodayImage.img); var e = document.getElementById("dailyimg"); e.appendChild(oImg); var title = document.createTextNode(oTodayImage.title); var f = document.getElementById("title"); f.appendChild(title); var capt = document.createTextNode(oTodayImage.caption); var g = document.getElementById("caption"); g.appendChild(capt); $("a#inline").fancybox({ 'overlayShow': false, 'transitionIn': 'elastic', 'transitionOut': 'elastic' }); } </script>
```
</head> <body> <div id="emma2011_left"> <h2> Image of the Day</h2> <div id="dImg"> <a id="inline" href="#dailyimg"> <div id="dailyimg" class="feature"> </div> </a> <div id="title" class="feature"> </div> <div id="caption" class="feature"> </div> </div> </div> </body> </html>

如何将 Fancybox 用于旋转图像 div？

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-08-29 22:22:27

如何将 Fancybox 用于旋转图像 div？

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-08-29 22:22:27

解决方案1
1 已采纳 2011-08-29 22:22:27