0

私はWebデザインに慣れていません。これは私が望んでいたものです(ある程度までは機能します):この小さな画像の配列を( #image-holder に)表示し、各画像をクリックすると、別のタグ(#で)で開きますbigimg) フルサイズで。また、配列内のすべての画像（フルサイズ）のスライダー（#bigimg）を作成することもできました。ボタンをクリックして前後に移動できます。私ができないことは、クリックされた画像の特定のsrcを「取得」することです.その）img]。これまでの私のコードは次のとおりです。

    var images=new Array();
    var i;
    $(document).ready(function(){
        $.getJSON("image_slider.php", function(json) {
                for(i=0; i<json.length; i++)
                {
                    images[i]="images/"+json[i];

                   $('<img>').attr('src',images[i]).css({"width":"60px", "padding":"5px"}).appendTo('#image-holder');
                }
                var theimgs= document.getElementById("image-holder").getElementsByTagName("img") ;
                for (i in theimgs)
                {
                    theimgs[i].onclick=function (){     
                            getimg (this) ;}    
                }  
                }); 
        }); 
    function getimg (z){
        var n=document.getElementById("bigimg") ;
        n.src= z.src ; }

    var x=0 ;
    function getall_next (){
        x++; 
        var n=document.getElementById("bigimg") ;
        n.src=images[x] ;
        if (x==images.length)
        {
            x=0 ;
            n.src=images[0] ;
        } }
    function getall_prev (){
        var n=document.getElementById("bigimg") ;
        if (x==0)
        {
            x=images.length ;
            n.src=images[images.length] ;
            x-- ;   
        }
        else
            x-- ;
        n.src=images[x] ; }
4

2 に答える 2

0

Okies、多くの調査と試行錯誤の後、最終的に解決策を見つけました:P ここに私のコードが完全に機能し、さらに非常に便利なリンクが役立ちましたhttp://thecodeplayer.com/walkthrough/jquery-css3-lightbox-tutorial . 私はそれを調整しなければなりませんでした-私はphpを使ってフォルダから画像を取得します-だからここにあります：

    var images=new Array();
    var i;
    $(document).ready(function(){
        $.getJSON("MY_img_array.php", function(json){
            for(i=0; i<json.length; i++)
            {
                images[i]="images/"+json[i];
                $('<img>').attr('src',images[i]).css({"width":"60px", "padding":"5px"}).appendTo('#imgarray');
            }       
            $("#imgarray img").click(function() {
                    $("#imgarray img.active").removeClass("active");
                    $(this).addClass("active");
                    var large_img = new Image();
                    large_img.src = this.src;
                    $('div#bigimg').html(large_img);
                });

            $("#prevbtn").click(function(){ navigate(-1) });
            $("#nextbtn").click(function(){ navigate(1) });
            function navigate(direction) {
                if(direction == -1) // left
                    $("#imgarray img.active").prev().trigger("click");
                else if(direction == 1) //right
                    $("#imgarray img.active").next().trigger("click");
                }
        });
    });
于 2013-07-04T22:53:27.577 に答える
0

使用するjquery場合は、より少ないコードでこれらすべてを実行できますが、プレーンな JavaScript を使用しているため

var image_src = document.getElementById("bigimg").src;

ここでの応答に基づいて、いくつかの擬似コードがあります。

//when you set the bigimg 
   last_image = bigimg.src;
   bigimg.src = newimg;
   current_image = newimg;

 //then before setting new img you 
 //you can access those variables you set above
于 2013-06-30T02:05:47.673 に答える