2

次のコードは、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 に渡してスライドショーを作成します。

私の問題は、ページャが見開きスライドの両方の画像を表示する方法を見つけられないことです (最初の画像のみが表示されます)。ここに私のサイクルコードがあります:

$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');

助けていただければ幸いです。御時間ありがとうございます。

4

0 に答える 0