0

以下を使用して、ウェブサイトにフォトギャラリーを作成しました。

    /*Begin Photo Gallery Code*/
    var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg'];

    function loadImage(src) {           
        $('#pic').fadeOut('slow', function() {
        $(this).html('<img src="' + src + '" />').fadeIn('slow');       

        });
    }

    function goNext() {
        var next = $('#gallery>img.current').next();            
        if(next.length == 0)
            next = $('#gallery>img:first');

        $('#gallery>img').removeClass('current');           
        next.addClass('current');
        loadImage(next.attr('src'));
    }

    $(function() {
        for(var i = 0; i < images.length; i++) {
            $('#gallery').append('<img src="images/gallery/' + images[i] + '" />');             

        }


        $('#gallery>img').click(function() {
            $('#gallery>img').removeClass('current');

            loadImage($(this).attr('src'));
            $(this).addClass('current');
        });

        loadImage('images/gallery/' + images[0]);
        $('#gallery>img:first').addClass('current');

        setInterval(goNext, 4000);
    });

4 つの画像のセットから一度に 1 つの画像を読み込みます。また、4 つの html ファイルがあり、それぞれが写真の 1 つに関連しています。JavaScript/JQuery/AJAX を使用して、関連する html ファイルのコンテンツを表示されている画像と共にロードしたいと考えています。どうすればこれを行うことができるか考えている人はいますか?

ajax ファイル (4 つの html ファイル) を JavaScript 配列などに入れる必要がありますか?

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];

前もって感謝します。

4

1 に答える 1

1

HTMLファイルが表示中に何らかの形で変更されることになっている場合を除き、サーバー側のコードを介してdivリクエストとともに hidden に出力するか（これが正しい方法です）、AJAXを使用してそれらを変数に保存するか、隠しファイルを作成する必要がありますdiv秒。

まず、次のような 2 つの配列が必要です。

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];//File Names
var divPages=['div1','div2','div3','div4'];//Div ids in order

AJAX 部分については、次のようなものを使用する必要があります。

var getHtml = function(filename,divid){
    $.post('html/'+filename, function(data) {
    //The first argument is your file location
    //Second one is the callback, data is the string retrieved                               
        $('#'+divid).html(data);
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

それでいいはずです...さらに説明が必要な場合は教えてください。

編集：

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];
var divId="yourdivid";
var textArray=new Array();
var currentImg=0;

var getHtml = function(filename){
    $.post('html/'+filename, function(data) {                             
       textArray.push(data);//Save data inside the array textArray
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

次に、 goNext() メソッド:

function goNext() {
    var next = $('#gallery>img.current').next();            
    if(next.length == 0){
        next = $('#gallery>img:first');
        currentImg=0;
    }else{
        currentImg++;
    }

    $('#gallery>img').removeClass('current');           
    next.addClass('current');
    loadImage(next.attr('src'));

     $('#'+divId).html(textArray[currentImg]);//Adds text to div based on current picture
}

それはうまくいくはずです！

于 2013-06-19T14:30:25.197 に答える