I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?
Here are simple jquery codes;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
and html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Your img doen't contain class .thumbnail it is opposite like this,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
And also check your <img> tag.
You were not calling the right selector.
$('a.thumbnail').click(function () {
$('#productImage').attr('src',$(this).children('img').attr('src').replace('60/60','400/200'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='https://via.placeholder.com/400/200?text=nothing'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Try attaching the click event to a.thumbnail elements and than do a jQuery.find('img') to get the thumbnail image's src attribute:
$('a.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('60/60','400/200');
$('#productImage').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src="http://via.placeholder.com/400/200?text=otherimage0">
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=UrunResimi1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
$(document).ready(function(){
$('.thumbnail img').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
});
});
Your jquery selector is incorrect. It should be in this format and make sure you have document.ready function to make it work properly in all the browsers online or offline.
Plnkr Link
Related
Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!
In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
In a dom which has many of the blocks like the one below, I'd like to get name of pid element (i.d 123) when link is clicked:
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
Here is my jQuery:
$(document).ready(function () {
$(".link").click(function () {
let pid = $(this).parent(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
}
});
But I get pid is: undefined
How can I fix this?
You have to use .closest() and not .parent(), because .parent() only goes 1 step up. .closest() will continue until it reach the top or finds the element.
$(document).ready(function() {
$(".link").click(function() {
let pid = $(this).closest(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
What I want to do is that when someone enter the image that forces a :hover state to the .right class below the image itself.
Any help would be greatly appreciated.
$(document).on('mouseover','img',function(){$(".right").hover();return false;});
.image{float:left;display:inline-block;width:20vw;margin:20px}
img{width:100%;cursor:pointer}
.right:after{content:"buy"}
.right:hover:after{content:"£2.50"}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=image>
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class=right></div>
</div>
<div class=image>
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class=right></div>
</div>
$(document).on('mouseover','img',function(event){
$(".right").removeClass("hover");
$(this).parent().find(".right").toggleClass("hover");
return true;
});
.image{float:left;display:inline-block;width:20vw;margin:20px}
img{width:100%;cursor:pointer}
.right:after{content:"buy"}
.right:hover:after{content:"£2.50"}
.hover:after{content:"£2.50"}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class="right"></div>
</div>
<div class="image">
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class="right"></div>
</div>
Try this . Define your mouse over effect in a class using CSS then toggle that class using jquery.
i want to find closest h2 tag to hovered image following is my html code
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7"><a href="#">
<div class="img">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div></a>
</div>
<h2>Arenas</h2>
</div>
this is what i am trying to do in jquery
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('h2').hide();
})
})
Please help me how can i do it .
closest() only looks up the ancestor tree. You need a more complex traverse since the <h2> is not an ancestor
Something like:
$('.img').hover( function(){
$(this).closest('.ih-item').siblings('h2').hide();
});
You can use the .parents() method to get the correct ancestor and find for h2 tag:
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
PLease go through below code, It will help you. Amending #mathiasfc's code so once you hover on image taxt will hide and on hover out you can get it back.
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
},function(){
$(this).parents().eq(2).find('h2').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
you were missing quotes on h2 :
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('.col-md-3').find('h2').hide();
})
})
this should work
You have to think in your tree first, mainly because you are manipulating your DOM tree. My approach in this situation is go to the first-child node and find your h2 tag, after that make your treatment.
$(document).ready(function () {
$('.img').hover( function(){
$(this).parent().parent().parent().find('h2').hide();
})
})
https://jsfiddle.net/9b9s87oo/1/
I want to display rows of employee images and, on hover, have a further description box pop up next to the image containing the person's name/biography.
I know hide/show div on hover can be used to achieve this effect, but I'm unsure as to how it will effect the row/col layout.
Any help would be appreciated.
HTML:
<div class="row">
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
</div>
I believe what you're looking for is a Popover which should lay on top of the existing grid and not interfere with the placement of your images.
You can trigger it to fire on hover by setting a data attribute on each popover like this:
data-trigger="hover"
or by passing it into the initializer like this:
.popover({ trigger: "hover" })
Demo in Stack Snippets:
$('[data-toggle="popover"]').popover({
placement: "auto",
trigger: "hover"
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/wq83mXh.jpg" data-toggle="popover"
title="Mark Otto" data-content="3,972 commits / 496,347 ++ / 484,436 --" >
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/RLuBL13.png" data-toggle="popover"
title="Chris Rebert"data-content="1,114 commits / 33,796 ++ / 46,366 --">
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/UP58UYq.jpg" data-toggle="popover"
title="fat" data-content="805 commits / 143,748 ++ / 100,852 --">
</div>
</div>
</div>