Fancybox 缩略图不起作用

Question

我在使用花式框缩略图时遇到了一些问题。我正在做的是使用来自fancybox iframe 的缩略图助手调用fancybox 画廊。我不知道这是否是问题所在，但我似乎无法显示缩略图。它们确实在我拥有的媒体画廊中展出。但不是在普通画廊。我使用 php 循环来放置每个图像。这是代码。 这就是我为每个 iframe(.various) 画廊(fancybox-thumb) 和带有拇指助手的媒体播放器 (fancybox-media) 所拥有的

$(document).ready(function() {

    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        afterClose  :   function() {
            var name = sessionStorage.getItem("name");
            if (name == 'folder 1') {
                $('.fancybox-thumb').fancybox().trigger('click');
            }
            if (name == 'folder 2') {
                $('.fancybox-thumb2').fancybox().trigger('click');
            }
            if (name == 'folder 3') {
                $('.fancybox-thumb3').fancybox().trigger('click');
            }

        }
    });

    $(".fancybox-thumb").fancybox({
        type: 'image',
        autoScale: true,
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }           
        }
    });

    $(".fancybox-thumb2").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });

    $(".fancybox-thumb3").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });

    $(".fancybox-media").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            },
        },
        media : {

        }
    });
});

至于制作的画廊上的代码是下一个。

    <div>
    <?php 
    $dirImg = 'img/Galeria/folder 1';
    $fileImg = scandir($dirImg);
    ?>

    <?php foreach($fileImg as $image): ?>

        <a class="fancybox-thumb" rel="fancybox-thumb" href="img/Galeria/folder 1/<?php echo $image; ?>" title="">
        <img style="display: none;" src="img/Galeria/folder 1/<?php echo $image; ?>" alt=""></a>

    <?php endforeach ?>
</div>
<div>
    <?php 
    $dirImg = 'img/Galeria/folder 2';
    $fileImg = scandir($dirImg);
    ?>

    <?php foreach($fileImg as $image): ?>

        <a class="fancybox-thumb2" rel="fancybox-thumb2" href="img/Galeria/folder 2/<?php echo $image; ?>">
        <img style="display: none;" src="img/Galeria/folder 2/<?php echo $image; ?>"></a>

    <?php endforeach ?>
</div>
<div>
    <?php 
    $dirImg = 'img/Galeria/folder 3';
    $fileImg = scandir($dirImg);
    ?>

    <?php foreach($fileImg as $image): ?>

        <a class="fancybox-thumb3" rel="fancybox-thumb3" href="img/Galeria/folder 3/<?php echo $image; ?>">
        <img style="display: none;" src="img/Galeria/folder 3/<?php echo $image; ?>"></a>

    <?php endforeach ?>
</div>

感谢您的帮助：D

Answer 1

我优化了答案以与您想要在不同画廊中的任何文件夹和图像一起使用。不利的一面是，当您关闭图库时，您必须再次打开 iframe 文件夹。我正在研究如何在关闭图库时打开文件夹 iframe。不管怎样，这是我使用的代码。如您所见，我返回了文件夹名称并对其进行了修剪，以便我可以将其用于类花式框。希望这会更好 :D 我会留下我用来制作画廊的脚本和 HTML。

<script type="text/javascript">
$(function () {
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $("#defaultCountdown").countdown({until: new Date(2014, 3-1, 15)});
    $('#year').text(austDay.getFullYear());
});

$(document).ready(function() {

    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        afterClose  :   function() {
            var name = sessionStorage.getItem("name");

                $('.'+name.replace(/ /g,'')).fancybox({
                    prevEffect : 'none',
                    nextEffect : ' none',

                    closeBtn  : true,
                    arrows    : true,
                    nextClick : true,

                    helpers : {
                        thumbs : {
                            width  : 50,
                            height : 50
                        }
                    }
                }).eq(0).trigger('click');

        }
    });

    $(".fancybox-media").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            },
        },
        media : {

        }
    });
});

这是制作画廊的代码。

    <?php
$cont = 0;
$dir    = 'img/Galeria';
$files1 = scandir($dir);
?>

<?php foreach($files1 as $file): ?>
    <?php if ($cont>1) { ?>

        <?php 
        $dirImg = 'img/Galeria/'.$file;
        $fileImg = scandir($dirImg);
        $cont = 0;
        ?>
        <div>
            <?php foreach($fileImg as $image): 
             if ($cont>2){?>

                <a class="<?php echo preg_replace('/\s+/', '', $file);?>" data-fancybox-group="<?php echo preg_replace('/\s+/', '', $file);?>" 
                    href="img/Galeria/<?php echo $file;?>/<?php echo $image; ?>" title=""></a>

            <?php } $cont++; endforeach ?>
        </div>

    <?php } ?>
<?php $cont++; endforeach ?>

这是我用于查看文件夹的 iframe 的内容。

<?php
    $cont = 0;
    $dir    = 'img/Galeria';
    $files1 = scandir($dir);

    ?>

    <div class="title"><h1>Folder de Imagenes</h1></div>
    <div class="folders">
        <ul class="gallery">

              <?php foreach($files1 as $file): ?>
                <?php if ($cont>1) { ?>
                  <li>

                        <a onclick="OnClickButton ('<?php echo $file;?>');" href="img/Galeria/<?php echo $file;?>">
                        <div class="folderImg"><img style="width: 100px;" src="img/folderImg.png"></div>
                        <div class="textFile"><h3><?php echo $file;?></h3></div>
                        </a>

                  </li>
                <?php } ?>
              <?php $cont++; endforeach ?>

        </ul>
    </div>

希望这会有所帮助：D