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”插件并单击小bug图标以开始使用。

第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>

用于旋转图像div的Fancybox

1 个答案: