All geek questions in one place

Create a Bright JQuery Box with a Slide

Hello . I am working on creating a simple jQuery LightBox with a slide. So, what do I need when I click on any image, I want this image to be added to the img Tag, that it is inside the Div with the class. lightbox, and when you click on .next. Code receive the next image of the current image and by pressing the previous code receives the previous image of the current image:

Second . I would like to add a Fade effect between the sliders.
Note: I would like to learn more and more about JavaScript and jQuery. Therefore, do not offer the plugin.

$(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>
Run codeHide result


Note. . Run the code snippet in full screen

+4
2

.

js

UPDATE: ​​ .

2: , -.

$(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>
Hide result
+2

, , , .next .

$(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>
Hide result
+2

Source: https://habr.com/ru/post/1669659/

More articles:


All Articles