幻灯片中的幻灯片答案

【问题标题】：slideshow within slideshow幻灯片中的幻灯片
【发布时间】：2011-05-23 15:25:36
【问题描述】：

我将如何获得缩略图的默认幻灯片，例如 gallerific！当用户点击缩略图时，有 4-5 张幻灯片（比如说，一朵花的五张不同的照片）然后是幻灯片。

或者，或者，如何拥有多个画廊，以及一个在幻灯片中显示每个画廊的第一张图像的脚本？

谢谢@thstark。这会处理上述请求。有人可以建议如何使用NIVO Slider 并使用它的自动播放（用于 3 张大图像）和标题吗？

或者这是我尝试更改 this thread 中的建议脚本以旋转 3 个大图像：

<div id="main">
<div id="pages">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
       <div class="item"><img id = "img1" class= "active" src= "images/main_img1.jpg"></img></div>
       <div class="item"><img id = "img2"  src= "images/main_img2.jpg"></img></div>
       <div class="item"><img id = "img3"  src= "images/main_img3.jpg"></img></div>
       <div class="item"><img id = "img4"  src= "images/main_img4.jpg"></img></div>
   </div>
</div></div></div></div>

current_string = $("#main img.active").attr('id');
current = current_string.charAt(3); //get the current image number
current++;
if (current > 4){ //check if current image is the last image display first image
    current = 1;
}
current_string = "img" + current;
$("#main img.active).removeClass('active').fadeOut(1000, function(){ //fadeOut existing image
    $("#main img").each(function(){
        if($(this).attr('id') == current_string){
            $(this).addClass('active').fadeIn(1000) //fadeIn next image
        }
    });
});

【问题讨论】：

Yo dawg，听说你喜欢幻灯片...
@Eli - 幻灯片中的幻灯片？我希望你明白这个要求的严重性。梦中的许多梦呃，我的意思是幻灯片太不稳定了！
因此，每个嵌套的幻灯片必须比它嵌套的幻灯片运行得更快...
稍有干扰，浏览器就会崩溃。
有人在这里打电话给Ellen Page。只有她能处理这个或Leo

标签： jquery slideshow

【解决方案1】：

即使我想要这样的东西，你也可以查看我发布的问题。

但是我暂时通过使用 jQuery 对话框解决了我的 Nivo 滑块问题，即我将滑块加载到带有点击事件的单独对话框和“slideShowEnds”上我触发了另一个滑块的点击事件（它被加载到他自己的dialog box) [对话框的宽度、高度、位置等保持不变]

【讨论】：

【解决方案2】：

我以前使用过 jQuery 工具。不是那么小，但体面。

这类似于您正在谈论的内容（嵌套幻灯片）： http://flowplayer.org/tools/demos/scrollable/site-navigation.htm

这里是描述： http://flowplayer.org/tools/demos/scrollable/site-navigation.html

【讨论】：

万岁！我将如何制作 3 张图片...不是缩略图，而是 3 张大图片播放和循环播放，并且在悬停时也停止播放。？我也需要字幕。
查看可滚动的 Autoscroll 插件（外观不同，但仍然只是一个 css 皮肤）：flowplayer.org/tools/demos/scrollable/plugins/index.html .. 在您的情况下，您必须协调停止/启动嵌套幻灯片。查看 API 中的循环引用以链接幻灯片转换。对于悬停的东西，你必须使用原生 jQuery 悬停事件，停止自动滚动，然后重新启动它。对于标题，最简单的方法就是在每张图片幻灯片中包含标题。 “滚动幻灯片”只是简单的 html 元素，你可以用它做任何事情。
当然 - 这是我的用户名 + @gmail.com - 叫我一声！

【解决方案3】：

http://gloryplus.com/index.php?route=product/product&path=82&product_id=291

<script type="text/javascript">
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(300, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}

function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}

var myTimer;

$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //loads first image
    $('#thumbs li').bind('mouseover',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

【讨论】：