从隐藏的div打开时Fancybox索引重置

Question

我有一个带有缩略图的项目，当鼠标悬停在显示区域div中显示全尺寸版本时。这是使用jQuery从隐藏的div拉出全尺寸图像的HTML并将其显示在可见的显示div中。

我目前已将Fancybox（版本2.1.5）配置为处理文档加载。每个隐藏的全尺寸图像都包含一个包含fancybox类的链接和一个具有相同名称的rel组。

单击显示区域时，Fancybox会根据需要打开图像。但是，当单击下一个按钮时，它总是转到第一个图像（包括它是第一个图像时），而前一个按钮总是转到最后一个图像（包括它是最后一个图像）。当然，我的设想是保持图像的顺序（因为链接是在HTML中排序的）。

有没有人有任何关于这可能如何工作的建议，因为我希望（使用jQuery或Fancybox）？

我要感谢那些慷慨志愿为您提供时间和专业知识的优秀人才！

HTML：

    <div class="report_container">
        <div class="report_thumbnails_container">
            <div class="report_thumbnails">
                <a href="#" page="page1"><img src="images/contents/page1_thumbnail.jpg"/></a>
                <a href="#" page="page2"><img src="images/contents/page2_thumbnail.jpg"/></a>
                <a href="#" page="page3"><img src="images/contents/page3_thumbnail.jpg"/></a>
                <a href="#" page="page4"><img src="images/contents/page4_thumbnail.jpg"/></a>
                <a href="#" page="page5"><img src="images/contents/page5_thumbnail.jpg"/></a>
                <!--a href"#" page="page6"><img src="images/contents/page6_thumbnail.jpg"/></a-->
                <a href="#" page="page7"><img src="images/contents/page7_thumbnail.jpg"/></a>
                <a href="#" page="page8"><img src="images/contents/page8_thumbnail.jpg"/></a>
                <a href="#" page="page9"><img src="images/contents/page9_thumbnail.jpg"/></a>
                <a href="#" page="page10"><img src="images/contents/page10_thumbnail.jpg"/></a>
                <a href="#" page="page11"><img src="images/contents/page11_thumbnail.jpg"/></a>
                <a href="#" page="page12"><img src="images/contents/page12_thumbnail.jpg"/></a>
                <!--a href="#" page="page13"><img src="images/contents/page13_thumbnail.jpg"/></a-->
                <a href="#" page="page14"><img src="images/contents/page14_thumbnail.jpg"/></a>
                <a href="#" page="page15"><img src="images/contents/page15_thumbnail.jpg"/></a>
                <a href="#" page="page16"><img src="images/contents/page16_thumbnail.jpg"/></a>
                <a href="#" page="page17"><img src="images/contents/page17_thumbnail.jpg"/></a>
            </div>
        </div>
        <div class="report_page_container">
            <div class="page_contents"></div>
        </div>
        <div class="clear_both"></div>
    </div>

    <div class="page_container_contents">
        <div class="page_contents" id="page1">
            <a class="fancybox" rel="group" href="images/contents/page1_preview.jpg"><img src="images/contents/page1_display.jpg" width="900" height="1150" /></a>
        </div>
        <div class="page_contents" id="page2">
            <a class="fancybox" rel="group" href="images/contents/page2_preview.jpg"><img src="images/contents/page2_display.jpg" width="900" height="1098" /></a>
        </div>
        <div class="page_contents" id="page3">
            <a class="fancybox" rel="group" href="images/contents/page3_preview.jpg"><img src="images/contents/page3_display.jpg" width="900" height="1207" /></a>
        </div>
        <div class="page_contents" id="page4">
            <a class="fancybox" rel="group" href="images/contents/page4_preview.jpg"><img src="images/contents/page4_display.jpg" width="900" height="1091"/></a>
        </div>
        <div class="page_contents" id="page5">
            <a class="fancybox" rel="group" href="images/contents/page5_preview.jpg"><img src="images/contents/page5_display.jpg" width="900" height="1102"/></a>
        </div>
        <!--div class="page_contents" id="page6">
            <a class="fancybox" rel="group" href="images/contents/page6_preview.jpg"><img src="images/contents/page6_display.jpg" width="900" height=""/></a>
        </div-->
        <div class="page_contents" id="page7">
            <a class="fancybox" rel="group" href="images/contents/page7_preview.jpg"><img src="images/contents/page7_display.jpg" width="900" height="1154"/></a>
        </div>
        <div class="page_contents" id="page8">
            <a class="fancybox" rel="group" href="images/contents/page8_preview.jpg"><img src="images/contents/page8_display.jpg" width="900" height="1145"/></a>
        </div>
        <div class="page_contents" id="page9">
            <a class="fancybox" rel="group" href="images/contents/page9_preview.jpg"><img src="images/contents/page9_display.jpg" width="900" height="1159"/></a>
        </div>
        <div class="page_contents" id="page10">
            <a class="fancybox" rel="group" href="images/contents/page10_preview.jpg"><img src="images/contents/page10_display.jpg" width="900" height="1141"/></a>
        </div>
        <div class="page_contents" id="page11">
            <a class="fancybox" rel="group" href="images/contents/page11_preview.jpg"><img src="images/contents/page11_display.jpg" width="900" height="1138"/></a>
        </div>
        <div class="page_contents" id="page12">
            <a class="fancybox" rel="group" href="images/contents/page12_preview.jpg"><img src="images/contents/page12_display.jpg" width="900" height="1162"/></a>
        </div>
        <!--div class="page_contents" id="page13">
            <a class="fancybox" rel="group" href="images/contents/page13_preview.jpg"><img src="images/contents/page13_display.jpg" width="900" height=""/></a>
        </div-->
        <div class="page_contents" id="page14">
            <a class="fancybox" rel="group" href="images/contents/page14_preview.jpg"><img src="images/contents/page14_display.jpg" width="900" height="1110"/></a>
        </div>
        <div class="page_contents" id="page15">
            <a class="fancybox" rel="group" href="images/contents/page15_preview.jpg"><img src="images/contents/page15_display.jpg" width="900" height="1101"/></a>
        </div>
        <div class="page_contents" id="page16">
            <a class="fancybox" rel="group" href="images/contents/page16_preview.jpg"><img src="images/contents/page16_display.jpg" width="900" height="1152"/></a>
        </div>
        <div class="page_contents" id="page17">
            <a class="fancybox" rel="group" href="images/contents/page17_preview.jpg"><img src="images/contents/page17_display.jpg" width="900" height="1154"/></a>
        </div>
        <!--div class="page_contents" id="page18">
            <a class="fancybox" rel="group" href="images/contents/page18_preview.jpg"><img src="images/contents/page18_display.jpg" width="900" height=""/></a>
        </div-->
    </div>

代码：

$（document）.ready（function（）{

$(".fancybox").fancybox();

var page = '.page_contents#page1';
var htmlCode = $(page).html();
$('.report_page_container .page_contents').html(htmlCode);

var notClicked = true;

$('.report_thumbnails a').mouseover(function(){

    if (notClicked) {
        var page = '.page_contents#' + $(this).attr('page');
        var htmlCode = $(page).html();

        $('.report_page_container').fadeOut(0, function(){
            $('.report_page_container .page_contents').html(htmlCode);
            $('.report_page_container').fadeIn(0);
        });
    }
});

$('.report_thumbnails a').click(function(e){

    // Disables standard link behavior
    e.preventDefault();

    if (!$(this).hasClass('selected')) {
        $('.report_thumbnails a').removeClass('selected');
        $('.report_thumbnails a').children().css('opacity', '1');
        $(this).addClass('selected');
        $(this).children().css('opacity', '.5');
        notClicked = false;
    } else {
        $(this).removeClass('selected');
        $('.report_thumbnails a').removeClass('selected');
        $('.report_thumbnails a').children().css('opacity', '1');
        notClicked = true;          
    }

    var page = '.page_contents#' + $(this).attr('page');
    var htmlCode = $(page).html();

    $('.report_page_container').fadeOut(0, function(){
        $('.report_page_container .page_contents').html(htmlCode);
        $('.report_page_container').fadeIn(0);
    });
});

}）;