How To Left Shift Images OnClick Of Button Using JQuery

Posted By Bajarangi soft , Posted On 22-10-2020

In JQuery we can shift image towards left side inside div .So today we discuss how to do it in this article

How To Left Shift Images OnClick Of Button Using JQuery

Step 1: Create Index.php file and implement below html code :

 <button class="btn btn-success leftshift">left shift</button>
<div id="gallery" class="image_gallery" style="display: flex">
    <div class="responsive" id="img">
        <div class="gallery" id="move">
            <a target="_blank" href="../images/img1.jpg">
                <img class="img-thumbnail" src="../images/img1.jpg" alt="Cinque Terre">
            </a>
            <div class="desc">image0</div>
        </div>
    </div>
    <div class="responsive" id="img">
        <div class="galleries">
            <a target="_blank" href="../images/img6.jpg">
                <img class="img-thumbnail" src="../images/img6.jpg" alt="Cinque Terre">
            </a>
            <div class="desc">image1</div>
        </div>
    </div>
    <div class="responsive" id="img">
        <div class="galleries">
            <a target="_blank" href="../images/download.jpg">
                <img class="img-thumbnail" src="../images/download.jpg" alt="Forest">
            </a>
            <div class="desc">image2</div>
        </div>
    </div>
    <div class="responsive" id="img">
        <div class="galleries">
            <a target="_blank" href="../images/img3.jpg">
                <img class="img-thumbnail" src="../images/img4.jpg" alt="Northern Lights">
            </a>
            <div class="desc">image3</div>
        </div>
    </div>
    <div class="responsive" id="img">
        <div class="galleries">
            <a target="_blank" href="../images/img4.jpg">
                <img class="img-thumbnail" src="../images/img5.jpg" alt="Mountains" id="moveimage">
            </a>
            <div class="desc">image4</div>
        </div>
    </div>
</div>

Step 2: Implement below jquery to do left shift for image :

<script>
    $(document).ready(function () {

        setInterval('refreshPage()', 5000);

        // hide all imgae
        $(".hide_image").click(function () {
            $("#gallery").hide(2000);
        });


        // show all image
        $(".show").click(function () {
            $("#gallery").show(2000);
            // location.reload(true);
            // to reload when all events happens
        });

        // even images
        $(".even").click(function () {
            $(".responsive:odd").fadeOut(1000);
            $(".responsive:even").fadeIn(3000);
        });


        // odd images
        $(".odd").click(function () {
            $(".responsive:odd").fadeIn(1000);
            $(".responsive:even").fadeOut(3000);
        });


        // rightshift
        $(".rightshift").click(function () {
            $('.image_gallery').append($('.container .responsive:first'))
        });


        // leftshift
        $(".leftshift").click(function () {

            $('.image_gallery').prepend($('.container .responsive:last'))
        });
    });
</script>

Complete Code For Left Shift Images OnClick Of Button Using JQuery

<!DOCTYPE html>
<html>
<head>
    <title>How To Left Shift Images OnClick Of Button Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Left Shift Images OnClick Of Button Using JQuery</h1>
    </div>
    <br>
    <div class="col-md-12">
        <div class="well">
             <button class="btn btn-success leftshift">left shift</button>
            <div id="gallery" class="image_gallery" style="display: flex">
                <div class="responsive" id="img">
                    <div class="gallery" id="move">
                        <a target="_blank" href="../images/img1.jpg">
                            <img class="img-thumbnail" src="../images/img1.jpg" alt="Cinque Terre">
                        </a>
                        <div class="desc">image0</div>
                    </div>
                </div>
                <div class="responsive" id="img">
                    <div class="galleries">
                        <a target="_blank" href="../images/img6.jpg">
                            <img class="img-thumbnail" src="../images/img6.jpg" alt="Cinque Terre">
                        </a>
                        <div class="desc">image1</div>
                    </div>
                </div>
                <div class="responsive" id="img">
                    <div class="galleries">
                        <a target="_blank" href="../images/download.jpg">
                            <img class="img-thumbnail" src="../images/download.jpg" alt="Forest">
                        </a>
                        <div class="desc">image2</div>
                    </div>
                </div>
                <div class="responsive" id="img">
                    <div class="galleries">
                        <a target="_blank" href="../images/img3.jpg">
                            <img class="img-thumbnail" src="../images/img4.jpg" alt="Northern Lights">
                        </a>
                        <div class="desc">image3</div>
                    </div>
                </div>
                <div class="responsive" id="img">
                    <div class="galleries">
                        <a target="_blank" href="../images/img4.jpg">
                            <img class="img-thumbnail" src="../images/img5.jpg" alt="Mountains" id="moveimage">
                        </a>
                        <div class="desc">image4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
</div>
</body>
<script>
    $(document).ready(function () {

        setInterval('refreshPage()', 5000);

        // leftshift
        $(".leftshift").click(function () {

            $('.image_gallery').prepend($('.container .responsive:last'))
        });
    });
</script>
</html>

Related Post

How To Create Register Form Using Html ,Bootstarp And Css
How Can I Copy Text Onclick Of Button Using Jquery
How To Display Input Field OnClick Of Radio Button In JQuery
How To View Input Field OnClick Of Check Box In JQuery
How To Right Shift Images OnClick Of Button Using JQuery
How To Left Shift Images OnClick Of Button Using JQuery
How To Change CSS Variables Onclick Of Button Using JS
How To Create Typing Effect Onclick Of Button In JavaScript
How To Onclick Button Open Drawer Using Flutter Android
Onclick Floating Button Show Alert Dialog Box Using Flutter
Onclick Of Div Select Radio Button Dynamically In Jquery