Fancybox для поворота изображения Div - PullRequest
Новая
       1

Fancybox для поворота изображения Div

0 голосов
/ 29 августа 2011

Я пытаюсь заставить Fancybox (http://fancybox.net/howto) работать с div для dailyimg (см. Фрагмент 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>

1 Ответ

1 голос
/ 30 августа 2011

Для устранения этой проблемы требуется только базовая отладка. Если вы используете Internet Explorer, вы можете нажать F12, а затем на вкладке «Консоль», чтобы увидеть ошибки JavaScript. Если вы используете Firefox, установите дополнение «Firebug» и нажмите маленький значок ошибки, чтобы начать работу.

  1. В 13-й строке кода отсутствует фигурная скобка - поместите ее перед вторым элементом массива перед словом «time:» like «{time:».
  2. Последняя строка кода перед тегом </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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...