I try to create a reward card, basically I have a div with 10 images with same id and what I want to achieve is that every time user click a button, images in the div will replace by a new images.
so far with the code below, I only achieve first image replaced than it stops and nothing else happen
<div class="container">
<h1>Reward Program</h1>
<div class="section" id="card">
<div class="row">
<div class="col-lg-4 col-sm-3" id="tut">
<img src="images/mail.png" id="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
</div>
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
var counter = 0,
checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
showCheck = function () {
document.getElementById("stamp").src = checked[counter];
counter++;
if (counter >= checked.length) {
counter = 0;
}
};
You can only have one element ID on a website (each ID has to be unique, otherwise you will get an error), so it's best to change those IDs to classes.
You don't need a loop after all, as you're not changing all the images with a single click of the button, but rather, one at a time, so just keep clicking the button.
You can remove the alt tag on the images and the imges[counter].alt = checked[counter] in the code. I just put it there so you can see what's happening. Run the code snippet to see it working:
var counter = 0;
var checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
function showCheck() {
var imges = document.querySelectorAll(".stamp")
imges[counter].src = checked[counter]
imges[counter].alt = checked[counter]
counter++
if (counter >= checked.length) {
counter = 0;
}
};
<div class="row">
<div class="col-lg-4 col-sm-3" id="tut">
<img src="images/mail.png" alt="mail" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
document.getElementById("tut").src = checked[counter];
First of all it looks like you are setting src attribute of the <div>.
If you want to replace the image you are supposed the set the src attribute of the <img> inside the <div>.
Also the id attribute in supposed to be unique for each html element.
If you want several elements to be referred to by a single attribute value use class attribute instead.
I have slightly tweaked your code. This should solve your problem.
<div class="container">
<h1>Reward Program</h1>
<div class="section" id="card">
<div class="row">
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
</div>
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
var counter = 0,
var checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
function showCheck() {
document.getElementsByClassName("stamp").forEach(img=>{
img.src=checked[counter++];
});
if (counter >= checked.length) {
counter = 0;
}
}
This problem is you are replacing src of only one element. You need to use a loop to replace src of all the elements.
Below is the working snippet of the function:
showCheck = function () {
$("img[id*='stamp']").each(function(){
this.src=checked[counter];
});
counter++;
if(counter >= checked.length) {
counter = 0;
}
};
Related
I am having problems with a javascript code, as there is an innerHTML and it is giving me a different width than the one I have in my css and bootstrap rules.
This is my javascript code:
let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')
// let requestURL = 'https://economia.awesomeapi.com.br/json/all/USD-BRL';
// let request = new XMLHttpRequest();
// request.open('GET', requestURL);
// request.send();
// request.onload = function() {
// let cotacaoDolar = JSON.parse(request.response);
// let divisaoReais = parseFloat(cotacaoDolar['USD']['ask']);
// }
// codigo acima funciona, entender Promise e then para criar let real
let dolar = {
Spotify: 0.00437,
Deezer: 0.0064,
Amazon: 0.00402,
Apple: 0.00783,
Ytmusic: 0.008,
Tidal: 0.01284,
Yt: 0.00087,
};
let divisaoReais = 5.37;
let real = { // fonte: geniusbrasil na pasta
Spotify: dolar.Spotify*divisaoReais,
Deezer: dolar.Deezer*divisaoReais,
Amazon: dolar.Amazon*divisaoReais,
Apple: dolar.Apple*divisaoReais,
Ytmusic: dolar.Ytmusic*divisaoReais,
Tidal: dolar.Tidal*divisaoReais,
Yt: dolar.Yt*divisaoReais,
};
// let real = {
// Spotify: 0.00193,
// Deezer: 0.00195,
// Amazon: 0.00754,
// Apple: 0.00546,
// Ytmusic: 0.006, // falta verificar esse valor
// Tidal: 0.00604,
// Yt: 0.00045,
// };
function calc() {
if (numeroStreams.value > 0) {
res.innerHTML = `<div class="row no-gutters" id="stores-container">
<div class="col">
<div class="row voffset-md">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-spotify voffset-clear-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/spotify_logo.png" class="img-fluid img-protected logo-cal-style mg-sm float-sm-none" alt="spotify_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Spotify
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Spotify).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-deezer voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/deezer-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="deezer_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Deezer
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Deezer).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platform-amazon voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/amazon_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="amazon_music_logo">
</div>
</div>
<div class="align-self-center stores-cal-info col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
Amazon Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Amazon).toFixed(2)}</p>
</div>
</div>
</div>
</div>
<div class="row voffset">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-apple voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/apple_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
Apple Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Apple).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-ytmusic voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/youtube_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-6">
<h2 class="mg-clear cal-store-style">
Youtube Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Ytmusic).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-tidal voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/tidal_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tidal_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Tidal
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Tidal).toFixed(2)}</p>
</div>
</div>
</div>
</div>
<div class="row voffset">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-soundcloud voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/soundcloud-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="soundcloud_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
SoundCloud
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Soundcloud).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-tiktok voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/tiktok_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tiktok_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
TikTok
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.TikTok).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-youtube voffset-sm">
<div class="col-lg-6 align-self-center col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/youtube_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_logo">
</div>
</div>
<div class="col-lg-6 align-self-center col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Youtube
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Yt).toFixed(2)}</p>
</div>
</div>
</div>
</div>
</div>
</div>`
} else {
window.alert('Estimated streams number cannot be blank.')
}
}
And the end result should look like this:
But instead this is what is happening
I am leaving you the page where I have implemented this application,
https://fwdmusic.com/royalties-calculator/
I would be very grateful for your help.
Thanks a lot in advance.
It's not about your JS generated HTML. It's about your class you set above .form-group.
Change yellow marked HTML class from col-lg-4 offset-lg-4 col-md-4 offset-md-4 to col-md-12.
Update: Found a better solution. I saw you're using class row no-gutter 2 times in a row. Delete the first one class row no-gutter as shown in image and you will be good. Also, don't implement my previous solution as this breaks your form width to full-width.
<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
I am trying to build an image gallery with arrows so you can press the next arrow and display next image (like all basic sliders). Since I just learned some basics of bootstrap I decided to use bootstrap for this project, however, I had to put every image in a separate col class (please notify me if this is not a good way). Since every image is in nested in another col class when I use this.nextElementSibling in the event listener I get null as a return. Is there any way that I can target the next image please?
You can use jQuery for this since you already using it for bootstrap
$(this).parent().siblings().find("img")
You can use Javascript as well as follow
this.parentElement.nextElementSibling.children[0];
Where children[0] means first child element
You can use document.querySelectorAll and access your nodes via index.
Small example
const items = document.querySelectorAll('.row .col-12'); // all .col-12 notes inside .row
let currentIndex = 0; // current item index
// refresh icons and set border color
const refreshItems = () => {
items.forEach((item, index) => {
item.style.border = `1px solid ${index === currentIndex ? '#f00' : '#0f0'}`;
});
}
// init
refreshItems();
// simple call by index
// items[5].style.border = '1px solid #0f0';
// Add click event to .prev button and increase current index 1
document.querySelector('.next').addEventListener('click', () => {
currentIndex += 1;
refreshItems();
});
// Add event to .prev button and decrease current index by 1
document.querySelector('.prev').addEventListener('click', () => {
currentIndex -= 1;
refreshItems();
})
<button class="next">next</button>
<button class="prev">prev</button>
<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
</div>
</div>
Lastly, add transforms, transitions, overflows, and index checks, and your slider is ready.
I have an HTML code, And I want to limit the article to 10 and auto load when the scroll is reached the last article, also show loading spinner. It looks like need jquery or javascript to make it works.
I hope that I could make it auto load when reaching 10 articles with loading spinner.
Here is my HTML code :
<div class="container">
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">2</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Ada Lowongan Kerja Terbaru di Kemenkes, Mau?</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">3</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Perhatikan Penampilan Ketika Wawancara Kerja, Ini Tipsnya</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">4</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Berdasarkan Zodiak, Ini Wanita yang Jadi Pasangan Terbaik</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">5</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Generasi Ini Paling Rentan Bertengkar Soal Uang dengan Pasangan</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">6</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Gaya Andalan Syahrini Setelah Berhasil Berbobot 47 Kilogram</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">7</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Parfum Bertahan Seharian? Tidak Sulit dengan 8 Cara Ini</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">8</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Siaran Tanpa Makeup, Newscaster Ini Tuai Pujian</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">9</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Jakarta Buka Kompetisi Balet Internasional Asian Grand Prix</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">10</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Drone Ikut Berlenggak Lenggok di Panggung Runway Dolce & Gabanna</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
</div>
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!
I have a question for toggle, I wrote a function which when I hover some image then that image was change and click then div will display and other image click:hover acting is same close display before selected
this is html code
<div class="bs-example" data-example-id="simple-thumbnails">
<div class="row">
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_ezer"
src="/img/intro_ezer_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_coloris"
src="/img/intro_coloris_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_galaxia"
src="/img/intro_galaxia_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 intro_ezer_detail intro">
<img class="intro_margot_main"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_coloris_detail intro">
<img class="intro_nanobuble"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_galaxia_detail intro">
<img class="intro_teatoxy"
src="/img/intro_ezer.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img
class="intro_margot" src="/img/intro_margot_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img
class="intro_nanobuble"
src="/img/intro_nanobuble_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img class="intro_teatoxy"
src="/img/intro_teatoxy_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row detail">
<div class="col-xs-12 col-md-3 intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_nanobuble_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_teatoxy_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
</div>
</div>
javascript
var className = "";
var toggleImg = "";
$('div').find('img').hover(function() {
className = $(this).attr('class');
this.src = '/img/' + className + '_hover.png';
}, function() {
this.src = '/img/' + className + '_main.png';
}).click(function(e) {
toggleImg = className + "_detail";
e.preventDefault(); $('.intro').hide()
$("."+className+"_detail").show();
})
How can I do?
You should use .each
Check the example below.
HTML :
<div>
<img alt="chrome" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">
</div>
<div>
<img alt="firefox" src="https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg">
</div>
JS :
$('div img').each(function() {
$(this).click(function() {
alert($(this).attr('alt'));
});
});