हेल्लो दोस्तों आज हम Image Grid View को HTML CSS एवं Java Code से बनायेंगे इसको आप अपने वेबसाइट या ब्लॉग में कही पर भी Use कर सकते है जैसे की हम अपने ब्लॉग के First Page (Home Page) पर किसी ऐसे पेज का लिंक देना चाहते है जिसके बारे में हम कुछ लिख कर Image को Add कर दे जिससे हमारे Blog के Reader को बहुत आसानी से दिख जाये एवं उस पर click करके उस Page पर आसानी से पहुच जाये इस तरह करने से हमारा ब्लॉग भी थोडा अच्छा दिखने लगेगा यदि आप चाहे तो इस कोड को आप अपने ब्लॉग/वेबसाइट में Use कर सकते है
Image Grid View with Button Demo
जो हमारा Image Grid View है उसका डेमो हम आपको नीचे दिखा रहे है की कैसे ग्रिड इमेज दिखेगा
यह भी पढ़े
- Range Slider with min and max values HTML CSS and Java Script Code
- Blogger Round Image HTML CSS Code
- Best Design Blogger Footer Menu HTML CSS Code
Image Grid View CSS Code
हम आपको कुछ CSS Code नीचे दे रहे है जिसे आप अपने अनुसार कस्टमाइज कर सकते है
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.grid {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
ऊपर दिए गए CSS Code में आप Image Grid View के फॉण्ट, बॉडी एवं Row का कस्टमाइज कर सकते है
Column Customization CSS Code
अब जो हमारा अगला कोड है वो कालम के लिए है
.column {
-ms-flex: 50%;
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
ऊपर दिए गए CSS Code से आप Image Grid View column को कस्टमाइज कर सकते है जैसे-Padding, Column Size एवं Image Padding इत्यादि
Button Customization CSS Code
नीचे दिए गए CSS Code से आप बटन को कस्टमाइज कर सकते है
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #ffc107;
cursor: pointer;
font-size: 18px;
}
.btn:hover {
background-color: #fd7e14;
}
.btn.active {
background-color: #ffc1079e;
color: white;
}
ऊपर दिए गए CSS Code से आप Image Grid View के बटन का Style, Button Hover तथा Active Button को कस्टमाइज कर सकते है
Image Grid View HTML Code
अब हम आपको कुछ HTML Code दे रहे है
<div class="grid" id="grid">
<h1>Image Grid View</h1>
<p>Image Grid View को बदलने के लिए बटन पर click करे </p>
<button class="btn" onclick="one()">1 Image</button>
<button class="btn active" onclick="two()">2 Image</button>
<button class="btn" onclick="four()">4 Image</button>
</div>
उपरोक्त दिए गए HTML Code में आप अपने अनुसार कोई text लिख सकते है तथा बटन के नाम को कस्टमाइज कर सकते है
<div class="row">
<div class="column">
<img src="#" style="width:100%">
</div>
<div class="column">
<img src="#" style="width:100%">
</div>
<div class="column">
<img src="#" style="width:100%">
</div>
<div class="column">
<img src="#" style="width:100%">
</div>
</div>
उपरोक्त HTML Code में आप # की जगह अपने Image का url Paste करे
Image Grid View Java Code
Get the elements with class="column"
var elements = document.getElementsByClassName("column");
Declare a loop variable
var i;
// Full-width images
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "100%";
elements[i].style.flex = "100%";
}
}
Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%";
elements[i].style.flex = "50%";
}
}
Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "25%";
elements[i].style.flex = "25%";
}
}
Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
इस तरह से Image Grid View तैयार हो चूका है उपरोक्त दिए गए कोड में आप अपने अनुसार कस्टमाइज कर सकते है यदि आप चाहे HTML CSS एवं Java Code को नीचे दिए गए Copy Button पर Click करके सभी Code को कॉपी कर सकते है