August 3, 2019

Before and After Image Comparison Using jQuery

If you searching for before and after image comparison then here you are in the right place. In this article, we show you how to compare two different images. Using baSlider here we going to do the image compare, the slider that can be manipulated and the user can be dragged to show fewer of the before image and more of the after image. Prominently, we are not speaking only about timelines (before and after), but for comparison among your product and others individually of if they’re similar or not.

For the web designers, one of the best way to display on the quantity of change a method or approach has on an original image. There are many JS libraries you can use for comparison purposes. Here now we going to compare a few sample images with below preview option.

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Before and After Image Comparison Using jQuery - softAOX</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.baSlider.css">
    <style>
        .container {
            margin: 10px auto;
            max-width: 800px;
            text-align: center;
        }
        
        .comman_class,
        .frame {
            height: 450px;
            border-radius: 5px;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Before and After Image Comparison Using jQuery</h1>
        <div class='comman_class slide1'>

            <h2>Compare 1</h2>

            <div class='frame'>

                <div baSlider-handler><img src="img/drag_icon.svg" alt=""></div>

                <div class='before'>

                    <img src='img/car1.jpg' baSlider-image>

                </div>
                <div class='after'>
                    <div>

                        <img src='img/car2.jpg' baSlider-image>

                    </div>
                </div>

            </div>
        </div>

        <div class='comman_class slide2'>

            <h2>Compare 2</h2>

            <div class='frame'>

                <div baSlider-handler><img src="img/drag_icon.svg" alt=""></div>

                <div class='before'>

                    <img src='img/a_place1.jpg' baSlider-image>

                </div>
                <div class='after'>
                    <div>

                        <img src='img/a_place2.jpg' baSlider-image>

                    </div>
                </div>

            </div>
        </div>

        <div class='comman_class slide3'>

            <h2>Compare 3</h2>

            <div class='frame'>

                <div baSlider-handler><img src="img/drag_icon.svg" alt=""></div>

                <div class='before'>

                    <img src='img/b_place2.jpg' baSlider-image>

                </div>
                <div class='after'>
                    <div>

                        <img src='img/b_place1.jpg' baSlider-image>

                    </div>
                </div>

            </div>
        </div>

        <div class='comman_class slide4'>

            <h2>Compare 4</h2>

            <div class='frame'>

                <div baSlider-handler><img src="img/drag_icon.svg" alt=""></div>

                <div class='before'>

                    <img src='img/c_place2.jpg' baSlider-image>

                </div>
                <div class='after'>
                    <div>

                        <img src='img/c_place1.jpg' baSlider-image>

                    </div>
                </div>

            </div>
        </div>

        <div class='comman_class slide5'>

            <h2>Compare 5</h2>

            <div class='frame'>

                <div baSlider-handler><img src="img/drag_icon.svg" alt=""></div>

                <div class='before'>

                    <img src='img/d_place2.jpg' baSlider-image>

                </div>
                <div class='after'>
                    <div>

                        <img src='img/d_place1.jpg' baSlider-image>

                    </div>
                </div>

            </div>
        </div>

    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.baSlider.js"></script>
    <script>
        $('.slide1').baSlider();
        $('.slide2').baSlider();
        $('.slide3').baSlider();
        $('.slide4').baSlider();
        $('.slide5').baSlider();
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<!doctype html>

<html>

<head>

<title>Before and After Image Comparison Using jQuery - softAOX</title>

<style>

.container {

margin: 10px auto;

max-width: 800px;

text-align: center;

}

.comman_class,

.frame {

height: 450px;

border-radius: 5px;

margin-bottom: 30px;

}

</style>

</head>

<body>

<h1>Before and After Image Comparison Using jQuery</h1>

<h2>Compare 1</h2>

</div>

<div>

</div>

<h2>Compare 2</h2>

</div>

<div>

</div>

<h2>Compare 3</h2>

</div>

<div>

</div>

<h2>Compare 4</h2>

</div>

<div>

</div>

<h2>Compare 5</h2>

</div>

<div>

</div>

$('.slide1').baSlider();

$('.slide2').baSlider();

$('.slide3').baSlider();

$('.slide4').baSlider();

$('.slide5').baSlider();

</script>

</body>

</html>

style.css

.comman_class {
    width: 100%;
}
.comman_class,
.comman_class > .frame {
    overflow-y: hidden;
    overflow-x: hidden;
}
.comman_class > .frame {
    position: relative;
}
.comman_class > .frame > .after {
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    position: relative;
    z-index: 2;
}
.comman_class.horizontal > .frame > .after {
    border-right: 2px dashed #fff;
}
.comman_class.vertical > .frame > .after {
    border-bottom: 2px dashed #fff;
}
.comman_class > .frame > .before {
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
    z-index: 1;
}
.comman_class > .frame > .after img,
.comman_class > .frame > .before img {
}
.comman_class [baSlider-handler] {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
	border: 2px solid #fff;
    background: #FFF;
    position: absolute;
    z-index: 3;
}
.comman_class [baSlider-handler] > img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.comman_class {

width: 100%;

}

.comman_class,

.comman_class > .frame {

overflow-y: hidden;

overflow-x: hidden;

}

.comman_class > .frame {

position: relative;

}

.comman_class > .frame > .after {

overflow: hidden;

left: 0;

top: 0;

width: 100%;

position: relative;

z-index: 2;

}

.comman_class.horizontal > .frame > .after {

border-right: 2px dashed #fff;

}

.comman_class.vertical > .frame > .after {

border-bottom: 2px dashed #fff;

}

.comman_class > .frame > .before {

left: 0;

top: 0;

width: 100%;

position: absolute;

z-index: 1;

}

.comman_class > .frame > .after img,

.comman_class > .frame > .before img {

}

.comman_class [baSlider-handler] {

width: 40px;

height: 40px;

cursor: pointer;

border-radius: 50%;

border: 2px solid #fff;

background: #FFF;

position: absolute;

z-index: 3;

}

.comman_class [baSlider-handler] > img {

width: 25px;

height: 25px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

Preview & Download

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Before and After Image Comparison Using jQuery

Share:

index.html

style.css

Preview & Download

Mraj

Don't miss on latest updates