HTML setup
I have a setup like in the picture. I want users to hover over each red box and when the mouse is over each box, I want the background (which is now grey) to change in to a background picture. Different pics with different box. In my css I have:
#service {
background: grey;}
I wrote this jQuery code:
$service = $('#service');
$('.service-list').on('mouseover', 'div', function() {
$service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
});
but it's not working. I also want the background pics to preload because they are around 650kb so its smooth and instantaneous. I was going to make a div called preload and then do
<img src="path/image-01.png" width="1" height="1" alt="Image 01" />
and then do preload display none.. Idk if that will work. please help
edit----
just to be clear,
I want to change the background of the services div background, not each of the red box background
You can achieve this by jquery hover function.
$service = $('#service');
$('.greay-box').hover(function() {
$service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
}, function(){
$service.css('background-image', '');
});
Here is a example fiddle. Hope this helps you.
Hey I HOpe You Are Looking Something like this try to alter the image . using Jquery
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.xyz').hover(sourceSwap, sourceSwap);
});
.my {
width:100px;
height:100px;
overflow:hidden;
border: 2px solid red;
float:left;
padding:2px;
margin:2px;
}
.my img {
min-width:100%;
max-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="row">
<div class="my">
<img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
<img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
<img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
<img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
</div>
</body>
</html>
Can Check The fiddle Also. . .
UPDATED FIDDLE DEMO LINK
Related
i would like to know how i can make red "X" appear each time an Image appears. The red "X" is for deleting the image that the user chooses their will be a red X on each image. right now the X is just sitting on top of the container and it only shows one time if i click on the X all the images disappear and i don't whant that i want to delete individual images. how can i make this possible? Here is what i have.
<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div>
<script>
$(".container5").on("dblclick", ".imgKLIK5", function () {
var self = $(this);
$(self).remove();
$('#file1').val("");
});
var $btn = $("#imgdisplay");
$btn.click(function () {
$("#fotos img:last-child").remove()
$btn.hide();
});
</script>
Assuming you have wrapped your div.bananas inside a parent div with class wrapper you can use .closest('.wrapper') instead of .parent().find().
$('.bananas').click(function(e) {
$(this).closest(".wrapper").remove();
});
img {
width: 200px;
height: 200px;
}
.wrapper {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="fotos" class="bananas">X
<img class="modal-content" src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" id="imgdisplay" />
</div>
</div>
<div class="wrapper">
<div id="fotos1" class="bananas">X
<img class="modal-content" src="http://i.telegraph.co.uk/multimedia/archive/03598/lightning-10_3598416k.jpg" id="imgdisplay1" />
</div>
</div>
I have an image that when hover, a div with an overlay will fade in and out.
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image<p></div>
</div>
<img src="assets/img/card_one.jpg" alt="" />
</div>
However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.
The code only run on individual image only?
$(function() {
$('#img-one').hover(function() {
$('#overlay-one').stop(true,true).fadeIn();
}, function() {
$('#overlay-one').stop(true,true).fadeOut();
});
});
Use general class in all the image containers div's and overlay div's, like :
<div id="img-one" class='img-container'>
<div id="overlay-one" class='overlay'>
...
</div>
</div>
Then adjust you JS code to invoke just related overlay :
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
Hope this helps.
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
.img-container{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 3<p></div>
</div>
</div>
You'll better use classes. Then do something like this:
$('.main-container').find('.div-class-name').forEach(function(el) {
<bind a handler for each consequent element here>
});
You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.
It is recommended to use classes because that is what classes are for and id's are not.
If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay
$(function() {
$('div[id^=img]').hover(function() {
$('div[id^=overlay]',this).stop(true,true).fadeIn();
}, function() {
$('div[id^=overlay]',this).stop(true,true).fadeOut();
});
});
div[id^=img]{
position: relative;
height:100px;
width:100px;
border:1px solid black;
margin:2px;
}
div[id^=img] > div[id^=overlay]{
position:absolute;
background:rgba(0,0,0,.2);
top:0;
left:0;
right:0;
bottom:0;
display:none;
width:100px;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
<div id="img-two">
<div id="overlay-two">
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
You can try with the jQuery Easy Overlay Plugin
http://eivissapp.github.io/jquery-easy-overlay/
In the code, you should assign a class to the images, and call this statement (that will work for each image):
jQuery("img.yourclass").hover(function(){
jQuery(this).easyOverlay("start");
}, function(){
jQuery(this).easyOverlay("stop");
});
If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):
jQuery.fn.easyOverlay.options = { spin: false }
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
I am new to bootstrap and would like to enlarge all images with class img-rounded on hoverring
I implemented it like this:
<div class="container">
<div class="row">
<div class="span4">
<div class="well">
<img src="MyImage.png" class="img-rounded">
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('.img-rounded').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
content: function () {
return
'<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
+$(this)[0].src + '" />';
}
});
});
</script>
Unfortunately the bounding box around the enlarged image is not enlarged. How to fix this?
This is caused by the popovers default max-width: 276px. Simply add
<style type="text/css">
.popover {
max-width: 1000px;
}
</style>
(or any other value, auto does not work here) and the popover will fit the image.
You could do this easily just using css.
#img1{
height:200px;
}
#img1:hover{
height:400px;
}
Also you can apply a number of additional effects as needed with far less code.
You can also manage the parent div accordingly to match this css rule. Not ALL things require JS.
I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?
You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}
Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>
Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});
In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.