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.
Related
I'm calling a function on Click event to add a CSS class to an item in the list of elements with same class name.
Here's what I'm trying to achieve
On the click of the button, I want to add the class .active to a particular logo image. Let's say at index 0 or 1
Please help me fix the issue.
document.ready(function() {
function setActive() {
$(".logo-slider .logos .logo")[0].addClass("active");
}
})
.active {
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="setActive()">Mark Active </button>
<div class="logo-slider">
<div class="logos row">
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
</div>
</div>
You can use nth-child() css property to select specific element. Check snippet below..
function setActive() {
$(".logo-slider .logos .col:nth-child(2) .logo").addClass("active");
}
.active {
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="setActive()">Mark Active </button>
<div class="logo-slider">
<div class="logos row">
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
<div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
</div>
</div>
Thanks for your help. Your comments were helpful. I found an alternate solution.
Here's how I did it.
$(".logo-slider .logos .logo")[0].classList.add("active");
Got this idea after reading some of your comments.
Thanks.
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
I know it might be a little bit dumm but i am really struggling with simple things like the following problem. Here is an example of the code that i have. The problem will be explained after the code. So here it is:
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
What i would like to do, is to keep every first item (image_item) of every div with the class "image" and remove the rest. Any idea how to achieve that? So far i got this but it removes everything accept the first one on the first div.
$('.first_only .immo_image').not(':first').remove();
I also tried to iterate through each element with the following code:
$('. image').each(function () {
$('.image_item').not(':first').remove();
});
But it does the same with the other example. It removes everything except the first image on the first div.
Any ideas?
Best regards
You can use $(this).find(".image_item:not(:first)").remove(); to remove all except the first image.
$(".image").each(function() {
$(this).find(".image_item:not(:first)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
For your particular document tree, this should work:
$('.image').each(function () {
$(this).find('.image-item').slice(1).remove();
});
For each .image, find all .image-item inside it and remove all but the first one (in document order).
There's no need to explicitly loop through the .image elements. You can use a single selector incorporating the :nth-child selector (negated with :not) to remove() all the elements you require. Something like this:
$('.image .image_item:not(:nth-child(1))').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 1-1
</div>
<div class="image_item">
<img src="someSource"> 1-2
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 2-1
</div>
<div class="image_item">
<img src="someSource"> 2-2
</div>
<div class="image_item">
<img src="someSource"> 2-3
</div>
</div>
</div>
</div>
This code is a part of the website which i am making and this section keeps overlapping images. How do I correct this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Image of the same:
Because you set image to be always 180x180 if the width will be lower than 540 (+some margins) they will overlap. You can disable it by setting overflow: hidden; on each column. But in your case this should not appear as you are using md columns.
So I think your problem is that you have too much columns. There should be next row each time you exceed row column limit in bootstrap default is 12.
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Make sure your css of the images is position: static;
If you want them in-line with one and other, add: display: inline-block; or if you want it just downwards: display: block;
Refer to positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});
I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)