Search code examples
javascriptjqueryfancybox

How can I use Fancybox for a rotating image div?

I'm trying to get Fancybox (http://fancybox.net/howto) to work for the dailyimg div (see the HTML snippet below) to enlarge the image. The div contains a single image that is rotated daily (see the JavaScript that follows). I'm not sure how to get the Fancybox working. Any help would be much appreciated. -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>
Solution

  • Only basic debugging is required to fix this problem. If you use Internet Explorer you can press F12 and then the "Console" tab to see javascript errors. If you use Firefox install the "Firebug" add-on and click the little bug icon to get started.

    1. The 13th line of code is missing a brace - put it in front of the second array element just before the word "time:" like "{time:".
    2. The last line of code before the </script> tag has an extra semi-colon and should be "}" instead of "};".

    Later: Full code added below. I recommend trying to get this working using the exact syntax and file versions below, only then should you try to incorporate into your code. Sorry about the HTML formatting, best I could do in the stackoverflow editor. For the sample your root folder (2 files, 1 folder) for the sample should have three items in it and look like this:

    • /default.htm
    • /jquery-1.4.4.min.js

    • /fancybox/[all the remaining files should be in this folder]

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