Erstellen Sie JQuery Light Box mit Folie

Question

Hallo Ich arbeite an Create Einfache JQuery LightBox mit Folie, also was brauche ich, wenn ich auf ein Bild klicken, möchte ich dieses Bild img hinzugefügt werden, dass es in Div mit Klasse ist .lightbox, Und wenn Sie auf .next der Code wird das nächste Bild des aktuellen Bildes und bei Klick auf vorherigen der Code wird das vorherige Bild des aktuellen Bildes Get:

Zweitens: ich möchte Fade-Effekt zwischen Slidern hinzufügen.
Hinweis: Ich würde gerne mehr und mehr über JavaScript und JQuery verstehen also bitte nicht jedes Plugin vorschlagen.

$(document).ready(function() { 
 
    $(".image img").click(function (e) { 
 
     e.preventDefault(); 
 
     $(".lightbox img").attr("src", $(this).attr("src")); 
 
    }); 
 
    $(".lightbox .next").click(function (e) { 
 
     e.preventDefault(); 
 
    }); 
 
})

.image{ 
 
    width:200px; 
 
    float:left; 
 
} 
 
.image img{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 
.clearfix{ 
 
    clear:both; 
 
} 
 
.lightbox{ 
 
    width:300px; 
 
    height:300px; 
 
    position:relative; 
 
    margin:50px auto; 
 
    border:2px solid #0094ff; 
 
    text-align:center; 
 
    line-height:300px; 
 
    font-size:40px; 
 
} 
 
.lightbox img{ 
 
    width:100%; 
 
    height:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
.lightbox div { 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    width:50px; 
 
    background-color:rgba(0, 234, 119, 0.80); 
 
    cursor:pointer; 
 
} 
 
.lightbox .left{ 
 
    right:0; 
 
    left:0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" /> 
 
</div> 
 
<div class="clearfix"></div> 
 
<div class="lightbox"> 
 
    <img src=""/> 
 
    <div class="next"> 
 
     <i class="fa fa-chevron-right"></i> 
 
    </div> 
 
    <div class="left"> 
 
    <i class="fa fa-chevron-left"></i> 
 
</div> 
 

 
</div>

Hinweis: Bitte Laufcodeschnipsel im Vollbild-

Answer 1

Werfen Sie einen Blick auf diese.

Ich habe nur ein paar Zeilen zu Ihrer js

UPDATE: vorherigen Schaltfläche hinzugefügt und Wirkung verblasst.

UPDATE 2: working fiddle mit einigen Ideen, die Ihnen helfen können, Ihre Diashow zu entwickeln.

$(document).ready(function() { 
 

 
     var first_img = $(".image img:first"); 
 

 
     var last_img = $(".image img:last"); 
 

 
     $(".lightbox img").attr("src", first_img.attr('src')); 
 

 
     $(".image img").click(function (e) { 
 

 
      $(".lightbox img").attr("src", $(this).attr("src")); 
 
     }); 
 

 

 
     $(".lightbox .next").click(function (e) { 
 

 
      var img = $('.image img[src="' + $(this).parent().find('img').attr('src') + '"]').parent().next('div').find('img'); 
 

 
      if (img.length === 0) { img = first_img; } 
 

 
      $(".lightbox img").attr("src", img.attr('src')).stop(true,true).hide().fadeIn(200); 
 

 

 
     }); 
 

 
     $(".lightbox .prev").click(function (e) { 
 

 
      var img = $('.image img[src="' + $(this).parent().find('img').attr('src') + '"]').parent().prev('div').find('img'); 
 

 
      if (img.length === 0) { img = last_img; } 
 

 
      $(".lightbox img").attr("src", img.attr('src')).stop(true, true).hide().fadeIn(200); 
 

 

 
     }); 
 

 
    });

.image{ 
 
    width:200px; 
 
    float:left; 
 
} 
 
.image img{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 
.clearfix{ 
 
    clear:both; 
 
} 
 
.lightbox{ 
 
    width:300px; 
 
    height:300px; 
 
    position:relative; 
 
    margin:50px auto; 
 
    border:2px solid #0094ff; 
 
    text-align:center; 
 
    line-height:300px; 
 
    font-size:40px; 
 
    background-color: rgba(0, 234, 119, 0.80); 
 
} 
 
.lightbox img{ 
 
    width:100%; 
 
    height:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
.lightbox .next{ 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    width:50px; 
 
    background-color:rgba(0, 234, 119, 0.80); 
 
    cursor:pointer; 
 
} 
 
.lightbox .prev{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    bottom:0; 
 
    width:50px; 
 
    background-color:rgba(0, 234, 119, 0.80); 
 
    cursor:pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" /> 
 
</div> 
 
<div class="clearfix"></div> 
 
<div class="lightbox"> 
 
    <img src=""/> 
 
    <div class="next"> 
 
     <i class="fa fa-chevron-right"></i> 
 
    </div> 
 
    <div class="prev"> 
 
     <i class="fa fa-chevron-left"></i> 
 
    </div> 
 
</div>

Answer 2

das Versuchen, eine Reihe von Bildern, während Sie auf sie machen und sie dann auf .next Klick zeigen.

$(document).ready(function() { 
 
    var images = []; 
 
    var j; 
 
    $(".image img").click(function (e) { 
 
     e.preventDefault(); 
 
     j = $(this).attr("src"); 
 
     $(".lightbox img").attr("src", j); 
 
     images.push(j); 
 
    }); 
 
    var i = 0; 
 
    $(".lightbox .next").click(function (e) { 
 
     $(".lightbox img").attr("src", images[i]); 
 
     i++ 
 
    }); 
 
})

.image{ 
 
    width:200px; 
 
    float:left; 
 
} 
 
.image img{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 
.clearfix{ 
 
    clear:both; 
 
} 
 
.lightbox{ 
 
    width:300px; 
 
    height:300px; 
 
    position:relative; 
 
    margin:50px auto; 
 
    border:2px solid #0094ff; 
 
    text-align:center; 
 
    line-height:300px; 
 
    font-size:40px; 
 
} 
 
.lightbox img{ 
 
    width:100%; 
 
    height:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
.lightbox .next{ 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    width:50px; 
 
    background-color:rgba(0, 234, 119, 0.80); 
 
    cursor:pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" /> 
 
</div> 
 
<div class="image"> 
 
    <img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" /> 
 
</div> 
 
<div class="clearfix"></div> 
 
<div class="lightbox"> 
 
    <img src=""/> 
 
    <div class="next"> 
 
     <i class="fa fa-chevron-right"></i> 
 
    </div> 
 
</div>