Question

我正在点击图像上加载nivo滑块，但我真的需要它加载到图像所在的特定幻灯片，而不是每次只加载第一张幻灯片。

我会在这里发布一些代码，但也在这里上传了一个工作示例： http://caseymmiller.com/tests/dayOfPeachtree/test.html

function parseRunners(xml) {

$(xml).find("person").each(function(e,gridId,name,from,yearsRun,age,tweet,slideID,imgSrc,lilImg,bigImg,firstPos,slideSpot){

    gridID = $(this).attr("id");
    name = $(this).find("name").text();
    from = $(this).find("from").text();
    yearsRun = $(this).find("yrsrun").text();
    age = $(this).find("age").text();
    tweet = $(this).find("tweet").text();
    slideID = gridID + "div";
            jumpID = gridID + "jump";
    //caption = '<div class="nivo-caption" ><p><b>From:</b> '+from+'</p><p><b>Age:</b> '+age+'</p><p><b>Years running the Peachtree:</b> '+yearsRun+'</p><p><b>What would you tweet right now?</b></p><p>'+tweet+'</p></div>';

    imgSrc = $(this).attr("url");
    lilImg = '<a id="' + jumpID + '"><img src="' + imgSrc + '" width="130px" height="130px"/><div><h3>' + name + '</h3></div></a>';

    bigImg = '<img src="' + imgSrc + '" width="260px" height="260px"/>';


    $('<li><div id="' + gridID + '">' + lilImg + '</div></li>').appendTo('.cbp-rfgrid');

    $('<a href="' + jumpID + '"><div id="' + slideID + '"><img src="' + imgSrc + '" data-thumb="' + imgSrc + '" alt=""  style="display:inline;"/></div></a>').appendTo('#slider');

    //$('<div id="'+ slideID +'"><p><b>From:</b> '+from+'</p><p><b>Age:</b> '+age+'</p><p><b>Years running the Peachtree:</b> '+yearsRun+'</p><p><b>What would you tweet right now?</b></p><p>'+tweet+'</p></div>').appendTo('#inside');
    //$('<div id="' + slideID + '"><p><b>From:</b> '+from+'</p><p><b>Age:</b> '+age+'</p><p><b>Years running the Peachtree:</b> '+yearsRun+'</p><p><b>What would you tweet right now?</b></p><p>'+tweet+'</p></div>').appendTo('.nivo-html-caption');
    $('#' +slideID).append('<p><b>From:</b> '+from+'</p><p><b>Age:</b> '+age+'</p><p><b>Years running the Peachtree:</b> '+yearsRun+'</p><p><b>What would you tweet right now?</b></p><p>'+tweet+'</p>');

    $(window).load(function() {
        $('#slider').nivoSlider();
        //$('#slider').data('nivoslider').slideTo(1);
        $('#slider').hide();
    });

    //make image grid click to open lightbox
    $('#'+gridID).click(function(event){
        $('#hiddenLayer').show();
        $('#slider').show();
        //$('#slider').data('nivoslider').slideTo(1);


    }); 

    //close lightbox
    $('#hiddenLayer').click(function(event){
        $('#slider').hide();
        $('#hiddenLayer').hide();
    });

和html：

<ul class="cbp-rfgrid"> 
        <!--This is where the images get rendered -->
        </ul>


        <!--slider info-->
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">

            </div>

            <div class="nivo-html-caption">
                <!--<div id="block"></div>-->
                </div>

        <!--end slider info-->

        </div>

Answer 1

答案可以在这里找到：

http://www.soslignes-ecrivain-public.fr/Nivo-Slider-Linking-to-a-specific-Slide.html

需要添加另一个xml变量，但它可以正常工作。

单击图像加载到特定幻灯片？

1 个答案: