Question

以下代码是wordpress幻灯片jQuery脚本的一部分。其目的是在幻灯片中实现特定的逻辑，其中所有垂直图像都成对显示（如杂志的双页）。

function initSlideShow() {

//some stuff to append images in $hidden_ic (temp image container far far away - not hidden so the script can measure their dimensions)

//Step 3. Loop and transform
$hidden_ic.find('img').each(function(i, o){
var $img = $(this),
h = $img.height(), //current image height
w = $img.width(), //current image width
v = (h > w ? true : false), //current image vertical flag
nv = null, //next image vertical flag
$prev = $hidden_ic.find('img:eq(' + (i - 1) + ')'), //next image object
$next = $hidden_ic.find('img:eq(' + (i + 1) + ')'); //prev image object

if(typeof($img.attr('data-or')) === 'undefined' || $img.attr('data-or') === false)
{
//Save orientation
$img.attr('data-or', (v ? 1 : 0));

//Create new slide
var $slide = $('<div class="slide" />');

//Append a clone of current image
$slide.append($img.clone());

//If its not last
if($next.size()>0)
{
var nh = $next.height(), //next image height
nw = $next.width(), //next image height
nv = (nh>nw ? true : false); //next image vertical flag

if(v && nv) //if current and next one are both vertical
{
$next.attr('data-or', (nv ? 1 : 0)); //Save orientation
$next.addClass('right'); //Apply right floating

$slide.append($next.clone()); //Append a clone of the next image to the same slide
$slide.find('img').first().addClass('left');
}

if(v && !nv) //if current vertical and next one horizontal
{
$slide.find('img').first().addClass('left');
}

}

$main_ic.append($slide); //Append slide to main container
}
});

创建$slide之后，我将它们传递给jQuery Cycle以创建幻灯片。

我的问题是我无法找到一种方法让寻呼机显示双页幻灯片的两个图像（它只显示第一个img）。这是我的周期代码：

$main_ic.cycle({
        fx:     'fade', 
        speed:   300, 
        timeout: 0, 
        next:   '.nextnav', 
        prev:   '.prevnav', 
        pause:   1,
        pager: '#pager',
        after: onAfter,
        pagerAnchorBuilder: function(idx, slide) { 
            return '<a href="#"><img src="' + jQuery(slide).find('img').first().attr('src') + '" height="100" /></a>';
                } 
}).fadeIn('slow');

我真的很感激任何帮助。谢谢你的时间。

Double-Page-Spread Cycle幻灯片

0 个答案: