激烈的幻灯片使用的z-index，PHP，XML和jQuery/cycle.js

所以我在做这个项目和创意总监已抛出一个弧线球我的方式。激烈的幻灯片使用的z-index，PHP，XML和jQuery/cycle.js

他使用flash创建了一个原型，需要使用jQuery，XML（或PHP）构建所有内容和图像，然后在同一个div维度中切换更多信息，这些信息也是通过XML提取的。

我允许使用JS来，这意味着如果我拉着JS图片我会给他们一个特定的命名约定的最大范围内。如果没有进一步的告别：

http://joeylabs.com/sites/sgc/prototype/

顺便说一句，由于某种原因，这个页面推幻灯片一路底部，这样可以查看整个事情只是滚动至底部。 :)

那么我思维是：从文件夹中通过php目录扫描脚本或使用图像命名约定的jQuery

拉图像。
然后，使用Cycle.js我创建包含与锂onBefore和保持该立与onAfter后内部的图像的变量之前内部的图像的变量，分别在一个div的z浮动两者索引1小于当前幻灯片。（我不知道如何做到这一点还）
当前幻灯片有百叶窗过渡，当用户点击NEXT是2张幻灯片，一个在下面，一个在顶部的扳机。

这是所有的理论在这一点上，但你不认为这将是可能的运行2循环幻灯片，其中一个在另一个顶部1触发器？任何人都有想法，提示，对此？

来源

2011-02-14 j0e

我不认为你会做任何目录刮 - 你去哪儿从（标题，字幕等）获得的每张图像的其余信息。您需要将每个部分放在数据库中，并参考图像，当用户单击“了解更多”按钮，部分名称，预览标题等时应打开哪个子部分。

我建议使用Galleria插件的一个变体：http://galleria.aino.se/

对于子页面（“了解更多”按钮的目的地），您可以将AJAX转换为绝对div，以便覆盖整个幻灯片。这使得关闭按钮很容易实现 - 它只是一起删除绝对div。

来源

2011-02-14 16:56:46

是的，我嵌套我的每一个IMG的两个div和两个div包裹的东西了......

<div id="before_window_wrapper"> 
    <div name="before_n_after_window"> 

    <div id="before_slide_wrapper"> 
     <div id="before_slide"> 
     <img src"my/image/directory/1.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    <div id="before_slide_wrapper"> 
     <div id="before_slide"> 
     <img src"my/image/directory/3.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    </div> 
</div>

和：

<div id="after_window_wrapper"> 
    <div name="before_n_after_window"> 

    <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
     <img src"my/image/directory/2.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
     <img src"my/image/directory/4.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    </div> 
</div>

的“before_n_after_window”孩子们的div正在循环：

$("#before_n_after_window").each(function(index){ 
    $(this).cycle(); 
});

幻灯片封装（before_slide_wrapper和after_slide_wrapper）处于循环（）完全控制 - 精细。然而，嵌套在它里面的任何东西都不是，所以你可以放置更多的兄弟姐妹幻灯片（before_slide和after_slide） - 因此“#slide_comment”div。

“before_n_after_window”仅在cycle（）的半控制下，并使用与自己不冲突的css代码。 “#before_window_wrapper”和“#after_window_wrapper”在您完全控制之下（css-wise）。

既然你有“#before_n_after_window”和它的孩子，只是通过他们的名字和迭代点控制每对：

var i = index; 
var current_slide = $(this); 

// hides the pause button 
$('#pause_button_'+i).hide(); 
//checks index for odd or even 
i = (i%=2) ? ((index+1)/2) : ((index/2)+1); 

$(current_slide).cycle({ 
    fx: 'fade', 
    pager: '#nav_' + i, 
    prev:  '#previous_button_' + i, 
    next:  '#next_button_' + i, 
}); 

// I want to only show the play or pause button at any given time 
$(current_slide).cycle('pause'); 
$('#play_button_'+i).click(function(){ 
    $(current_slide).cycle('resume', true); 
    $('#pause_button_'+i).show(); 
    $('#play_button_'+i).hide(); 
}); 
$('#pause_button_'+i).click(function() { 
    $(current_slide).cycle('pause'); 
    $('#pause_button_'+i).hide(); 
    $('#play_button_'+i).show(); 
});

您必须遵守命名约定上述或其他任何你可能会决定上。实际的控件可以放置在除窗口内部以外的任何地方 - 错误问题。

在一个侧面说明中，我设置这些对在循环后立即暂停，因为我不想在页面上运行多个幻灯片。我希望用户选择哪一个循环。此外，我必须找到一种方法来关闭可能正在运行的其他任何循环。但是：

if(better_solution){ 
    return please_post; 
}

来源

2011-07-03 21:03:30

激烈的幻灯片使用的z-index，PHP，XML和jQuery/cycle.js

回答

相关问题