Question

下面的代码创建了一个图库，显示了来自不同（子）文件夹的所有第一批图像。在div中，arrows1是一些用于滚动这些图像的js。

图像是可点击的链接。点击照片后，图片将显示在网页的正面，现在我也可以滚动浏览所有文件夹的第一张图片。

有可能改变吗？一旦图像在前面，我想滚动到该文件夹的所有图像。文件夹具有随机名称，不包含子文件夹，仅包含图像（jpegs）

$visited_dirs = array();

$i = new RecursiveDirectoryIterator(realpath('img/gallerij'));
$i->setFlags(RecursiveDirectoryIterator::SKIP_DOTS);
$recursive = new RecursiveIteratorIterator($i);
foreach ($recursive as $path => $object) {
  $dir = pathinfo($path, PATHINFO_DIRNAME);

  if (!in_array($dir, $visited_dirs)) {
    $visited_dirs[] = $dir;

    $trimmed =  str_replace("/url/", "", $path);
?>
<ul class="list_4">
    <li>
        <div class="block_pic">
        <?php

        echo "<a href=".$trimmed."><img src=".$trimmed." alt=' '></a>";
        ?>
        </div>
    </li>
</ul>
<?php
  }
}
?>


                    </div>
                    <div class="arrows1">
                    <a class="next1"><span></span></a>
                    <a class="prev1"><span></span></a>
                    </div>

这是创建弹出窗口和幻灯片

的javascript

if ($(".slider2").length) {
            $('.slider2').cycle({
                fx: 'scrollHorz',
                speed: 600,
                timeout: 0,
                next: '.next1',
                prev: '.prev1',
                easing: 'easeInOutExpo',
                cleartypeNoBg: true ,
                rev:0,
                startingSlide: 0,
                wrap: true
            })
        };
        var ind = 0;

        $('.arrows1 span').css({opacity:0});

        $('.next1').hover(function(){
            $(this).find('span').stop(true).animate({opacity:1}, 350, 'easeOutSine');
        }, function(){
            $(this).find('span').stop(true).animate({opacity:0}, 350, 'easeOutSine')
        })

        $('.prev1').hover(function(){
            $(this).find('span').stop(true).animate({opacity:1}, 350, 'easeOutSine');
        }, function(){
            $(this).find('span').stop(true).animate({opacity:0}, 350, 'easeOutSine')
});

$('.list_4 .block_pic > a').attr('rel','appendix')
.prepend('<span class="sitem_over"><strong></strong></span>')

$('.list_4 .block_pic > a').fancybox({
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 500,
    'speedOut': 300,
    'centerOnScroll': true,
    'overlayColor': '#000'
});

$('.list_4 .block_pic > a')
.find('strong').css('top','200px').end()
.hover(
    function(){
        if (!MSIE){
            $(this).children('.sitem_over').css({display:'block',opacity:'0'}).stop().animate({'opacity':1}).end()
            .find('strong').css({'opacity':0}).stop().animate({'opacity':1,'top':'0'},350,'easeInOutExpo');
        } else {
            $(this).children('.sitem_over').stop().show().end()
            .find('strong').stop().show().css({'top':'0'});
        }
    },
    function(){
        if (!MSIE){
            $(this).children('.sitem_over').stop().animate({'opacity':0},1000,'easeOutQuad',function(){$(this).children('.sitem_over').css({display:'none'})}).end()
            .find('strong').stop().animate({'opacity':0,'top':'200px'},1000,'easeOutQuad');
        } else {
            $(this).children('.sitem_over').stop().hide().end()
            .find('strong').stop().hide();
        }
    }
);

这是弹出图片

的firebug中的html

<div id="fancybox-content" style="border-width: 10px; width: 448px; height: 336px;">
<img id="fancybox-img" src="http://url/img/gallerij/folder/IMG_4795.JPG" alt="">
</div>

我希望我提供了解决这个问题的所有信息。根据要求，我可以提供与部分工作网页的链接

从阵列中选择一个图像后，显示文件夹中的所有图像

0 个答案: