创建滑动下一个/上一个内容VIA Ajax / JSON

时间：2015-05-08 15:26:09

标签： javascript jquery ajax json

这是一个非常深入的问题，所以我会尽可能详细地解释。

我正在创建一个Wordpress游戏信息网站，有一些游戏列表，当点击创建一个内容框时，该元素中的数据从页面JSON数组加载Ajax。

enter image description here 在单击元素时的当前设置中，只更新了内容框数据，上一个和下一个箭头模拟了对当前活动元素的prev / next元素的单击。

加载的JSON数据包括2个有用的字段：

（适用data.previous_url）

（适用data.next）

我想使用这些数据来创建单独的ajax函数，这些函数可以为活动的内容框创建上一个和下一个内容框。然后我会将上一个/下一个箭头滑动到相应的内容框中。

MARKUP / WORDPRESS LOOP 

    <?php  
    $counter = 0;
    if ( have_posts() ) : 

        while ( have_posts() ) : the_post();  $counter++; 
            $gameName = get_field('game_name');
            $gameLogo = str_replace(" ", "", $gameName);
            $gameLink = str_replace(" ", "-", $gameName);
            $gameReels = get_field('reels');
            $gamePaylines = get_field('paylines');
            $gameInfo = get_field('game_info');

    ?>



<div class="four columns gameListing" id="<?php echo $gameName ?>" data-count="<?php echo $counter; ?>" data-id="<?php echo $gameLink ?>">       
    <img class="gameLogo" src="<?php bloginfo('template_directory'); ?>/images/games/logos/<?php echo $gameLogo ?>.png" > 
    <div class="gameInfo">
        <h2 class="gameTitle"> <?php if($gameName): echo $gameName;  endif; ?></h2>
        <div class="gameRating">
            <i class="fa plusone fa-star"></i><i class="fa plusone fa-star"></i><i class="fa plusone fa-star"></i><i class="fa plusone fa-star"></i><i class="fa fa-star"></i> (5.0)
        </div>
    </div>
    <a class="gameCta" rel="" data-post-id="<?echo $post->ID ?>" ><span class="title">Click to Play</span></a>
</div>

    <?php endwhile; endif; ?>



<div class="clear"></div>


<div class="sixteen columns gameBox" id="gameBox" data-id="">

    <div id="gameBoxNav">
        <a class="prev controls"><i class="fa fa-chevron-left"></i></a>      
        <a class="next controls"><i class="fa fa-chevron-right"></i></a>
    </div>

    <div class="gameBoxContent">
        <div class="gameBox-L">
            <h3 class="gameBox-Header-Left heading"><span class='game-name'></span></h3>
                <div class="gameBox-Screenshots">
                    <div class="gameBox-L-Side" id='gameBoxGallery'></div>
                    <div class="gameBox-L-Main" id="gameBox-Screenshot"></div>
                    <div class="clear"></div>
                </div>
        </div>

        <div class="gameBox-R">
            <h3 class="gameBox-Header-Right heading">Play on any of these sites:</h3>
            <div id="close" class="controls">X</div>
            <div class="clear"></div>


            <div id="game_provs"></div>
        </div>
        <div class="clear"></div>

        <div class="gameBox-Details">
            <h3 class="gameBox-Header heading">All about <span class='game-name'></span></h3> 
            <ul class="gameDetailsBar">
                <li class="gameDetails">
                <span class="gameInfo-cellData" id="game-reels"></span>
                <span class="gameInfo-cellTitle">Reels</span>
                </li>
                <li class="gameDetails">
                <span class="gameInfo-cellData" id="game-paylines"></span>
                <span class="gameInfo-cellTitle">Paylines</span>
                </li>
                <li class="gameDetails">
                <span class="gameInfo-cellData" id="game-minBet"></span>
                <span class="gameInfo-cellTitle">Min Bet</span>
                </li>
                <li class="gameDetails">
                <span class="gameInfo-cellData" id="game-maxBet"></span>
                <span class="gameInfo-cellTitle">Max Bet</span>
                </li>
                <li class="gameDetails">
                <span class="gameInfo-cellData" id="game-jackpot"></span>
                <span class="gameInfo-cellTitle">Jackpot</span>
                </li>
                <li class="gameDev">
                <span gameDev-cellTitle>Developed By:</span>
                <span gameDev-cellData><img src="<?php bloginfo('template_directory'); ?>/images/devlogos/netent.png" alt=""></span>
                </li>     
            </ul>
            <div class="clear"></div>      

            <div class="gameInfo-Excerpt" id="game-info"></div>
        </div>
    </div>
</div>

JS 

// -------------- MAIN CLICK FUNCTION --------------
$('.gameListing').click(function () {

    $('.gameListing').removeClass('active');



    $(this).addClass('active');

    var id = $(this).attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    // Pass the url and the clicked element
    call_ajax(url, this);
});


// -------------- GET PREV / NEXT ITEMS --------------
$('.prev').click(function () {

    var $current = $('.gameListing.active');
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber - 1);

    if (nextPost != 0) {
        $current.removeClass('active')
        $("[data-count='" + nextPost + "']").trigger("click");
    }
});

$('.next').click(function () {
    var $current = $('.gameListing.active');
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber + 1);


    var postCount = $('.gameListing').length; 

        if (nextPost != postCount + 1) {
                $current.removeClass('active')
                $("[data-count='" + nextPost + "']").trigger("click");
        }

});





// -------------- AJAX CALL FUNCTION  --------------
function call_ajax(url, elem) {

    $.ajax({
        url: url,
        method: "GET",
        data: {json: 1},
        dataType: "JSON"
    })


    // -------------- FUNCTIONS FOR AFTER AJAX DONE --------------
    .done(function (data) {

        // Append the box
        appendBox(elem);

        // LOAD GAMEBOX JSON DATA

        $("#game-name").html(data.post.title);
        $("#game-reels").html(data.post.custom_fields.reels);
        $("#game-paylines").html(data.post.custom_fields.paylines);
        $("#game-minBet").html(data.post.custom_fields.min_bet);
        $("#game-maxBet").html(data.post.custom_fields.max_bet);
        $("#game-jackpot").html(data.post.custom_fields.jackpot);
        $("#game-info").html(data.post.custom_fields.game_info);




             // -------------------------- YOU CAN SEE HERE THE NEXT / PREV DATA LOADED VIA THE ABOVE AJAX CALL
            var nextURL = (data.previous_url) + "?json=1";
            var prevURL = (data.next_url) + "?json=1";







        // -------------------------- LOAD GAME PROVIDERS VIA NEW AJAX LOAD
        var provSource = new String(data.post.custom_fields.game_name);
        provSource = provSource.replace(/ /g, "-");
        $("#game_provs").load("http://localhost:8888/projects/superfreerespo/" + provSource + "/ .gameBox-Ops");


        // -------------------------- LOAD GAME THUMBNALS 
        var gameThumbSrc = new String(data.post.custom_fields.game_name);
        gameThumbSrc = gameThumbSrc.replace(/ /g, '');
        $('#gameBoxGallery').html('');
        for (i = 0; i <= 2; i++) {
    image = '<img src="' + templateDir +'/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">'
            $('#gameBoxGallery').append(image);
        };
        // -------------------------- ZOOM FIRST THUMBNAIL
        $('#gameBox-Screenshot').html('');
        image = '<img src="'+ templateDir +'/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">'
        $('#gameBox-Screenshot').append(image);

    });


    // -------------------------- CREATE GAMEBOX
function appendBox(elem) {
    var $chosen = $(elem),
        $gameBox = $('#gameBox'),
        top = $chosen.offset().top,
        $blocks = $chosen.nextAll('.gameListing');

    // -------------------------- TOGGLE GAMEBOX OPEN
    if($chosen.attr('data-id') === $gameBox.attr('data-id')) {
        $gameBox.stop().slideUp(500, function () {
            $(this).css('display', 'none');
        });
        $gameBox.attr('data-id', '');
    } 

    // -------------------------- TOGGLE GAMEBOX CLOSE
    else {
        $gameBox.slideDown(500, function () {
    $(this).css('display', 'inline-block');
        });
        $gameBox.attr('data-id', $chosen.attr('data-id'));
    }



    function placeAfter($block) {
        $block.after($gameBox);
    }
    if ($blocks.length == 0) {
        placeAfter($chosen);
        return false;
    }

    $blocks.each(function (i, j) {
        if ($(this).offset().top != top) {
            placeAfter($(this).prev('.gameListing'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });


}


    $('html, body').animate({
        scrollTop: $('.active').offset().top - 40
    }, 600);


}

1 个答案:

答案 0 :(得分：0)

所以经过一番思考后我决定使用一个更简单的选项，而不是创建多个幻灯片游戏盒，我只是将一个游戏盒设置为在数据加载后再次滑出视图。

$('.prev').click(function () {

    var $current = $('.gameListing.active');
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber - 1);
    var postCount = $('.gameListing').length; 

    if (nextPost != 0) {
        $("[data-count='" + nextPost + "']").trigger("click");



//THIS IS THE FIX
    var settings = [
      [{"left": "-950px"}, {duration: 450,complete: function() {$(this).css("left", window.innerWidth + $(this).width())}}],
      [{"left": "0px"}, {duration: 450}]];

    $(".gameBox").queue("_fx", $.map(settings, function(options, i) {
      return function(next) {
        return $(this).animate.apply($(this), options).promise().then(next)
      }
    })).dequeue("_fx");
    }

    else {
        $("[data-count='" + postCount + "']").trigger("click");
    }
});
相关问题
最新问题