dongzhuang2030
2014-05-30 13:44
浏览 20
已采纳

如何创建基于目录的滑块的两个实例?

Update: After much confusion it turns out that the issue was in my stylesheet. Both of the sliders were in fact loading, however, the positioning caused them to overlap, hiding the second (or any additional) sliders.

I've been attempting to create two instances of this jQuery slider that uses images from a specific directory. Folders are generated by a different script and contain 18 images each. It appears that only the first slider works.

You can view a live example of this issue here.

The jQuery is pretty straight-forward, however, please note that I'm still learning PHP, however I've been able to list folders within my main directory and create what would be the correct markup for multiple sliders.

<?php
$a = 0;
$b = 0;
$c = 0;

if ($handle = opendir('.')) {
$blacklist = array('.', '..', 'frames', 'carbon_fibre.png', 'panel.png', 'sort.php', 'squares.png', 'test.php', 'test.txt', '360logo.png', '.DS_Store', 'js');
while (false !== ($file = readdir($handle))) {
    if (!in_array($file, $blacklist)) {
        echo "<div id='". ++$a ."'>". ++$b ."</div>";
        echo "<br>";
        echo "<script>
$('#". ++$c ."').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '".$file."/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});

</script><br>";
    }
}
closedir($handle);
}

?>

The output of this script is:

<div id='1'>1</div><br><script>
$('#1').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '20140529-1740/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});

</script><br><div id='2'>2</div><br><script>
$('#2').directorySlider({
animation: 'fade',
filebase: 'a',
directory: '20140529-1751/',
extension: 'jpg',
numslides: 18,
height: 200,
timeout: 100,
speed: 100
});

</script>

The output seems to be correct, it correctly lists my directories in the scripts, but I still only see the first slider working. I should mention that these directories are generated automatically and are titled by the the date and time of creation.

Please let me know if you have any advice or insight as to why I'm experiencing this issue. I'm more than happy to provide more information. I really do appreciate your time.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doubi6669 2014-06-16 18:24
    已采纳

    I was checking your code and the website author, that confirm that you can have lot of instances of the plugin.

    I was going crazy because I'm getting same problem as you, but I finally found that you have is a CSS problem. The two sliders are showing in same place, one over another.

    Browser position the id 2 bottom to 1, but the own internal style that maybe apply the script are display one above the other...

    If you apply this style to your divs

    <div id='1' style="position:absolute;left:1px; top:1px;width:300px;">1</div>
    
    <div id='2' style="position:absolute;right:1px; top:1px;width:300px;">2</div>
    

    you will see that two sliders are there. I was check your own link example with this style and I saw twice. Cheers

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题