I am having difficulty finding a tutorial on enlarging an image on mouse hover, then shading the enlarged image dark so I can put some text over it.
This example does almost everything except make the image larger:
http://jsfiddle.net/balupton/FZG3v/
CSS:
.ih { position:relative; }
.ih, .ih-image, .ih-info { display:block;width:330px;height:220px; }
.ih-image, .ih-info { z-index:500;position:absolute;top:0;left:0;right:0;bottom:0; }
.ih-info { z-index:501;background:black;color:white; }
HTML:
<img class="ih-image" src="http://designsnack.com/screenshots/image.php width=330&height=220&cropratio=330:220&image=/screenshots/8264948088.jpg"/>
<div class="ih-info">
Your overlay content
</div>
</div>
JS:
$(function(){
$('.ih').hover(
// Over
function(){
var $ih = $(this);
$ih.find('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
},
// Out
function(){
var $ih = $(this);
$ih.find('.ih-info').stop(true,true).animate({opacity:0}, 400);
}
).find('.ih-info').css('opacity',0);
});
It's my first question, apologies if I am not clear or am missing some information.
Many thanks for any help!
EDIT: Thanks ghost! My end goal is to enlarge the image from the center as ultimately there will be 4 images in a 4X2 configuration.
You can do this many ways using jQuery, one of them is to use animate() method to smoothly change image size: http://jsfiddle.net/FZG3v/44/
Related
I have a image that is created to have 4 images in one See this image
Now, what I am trying to do is get the css to load just the first square at the top. Then when a user hovers over that image it will switch between all four images.
So it will display black on load, then when a user hovers over it, the image changes to red, then blue, then green, then back to black. It then repeats over and over until the mouse is moved off the image area.
I know that I can do this by converting the png to a gif but the image is generated outside of my control so this method is needed.
If anyone can help I will be forever grateful.
Cheers.
You should use CSS sprites and to make the change happend when over use setInterval function to change position ( here the height of each block of your image mesures 300px , so we incerement by +300 ) every defined interval time ,
Below snippet I've used .hover() jquery function to set and clear annimation .
var interval;
$(function(){
$("#image").hover(
function() {
var bottom = 0;
$this = $(this);
interval = setInterval(function() {
bottom >= 900 ? bottom = 0 : bottom+=300;
$this.css({'background-position' : '0px -'+bottom+'px'});
} , 1000)
},
function(){
$this.css({'background-position' : '0 0'})
clearInterval(interval);
}
);
});
#image {
width:150px;
height:150px;
background: url('https://i.stack.imgur.com/h8h14.png') 0 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image" ><div>
I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?
Here's my HTML code:
<div id="wrapper">
//My contain here
</div>
Here's my JavaScript code so far:
//Auto change Background Image over time
$(window).load(function() {
var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
var i = 0;
function changeBackground() {
$('#wrapper').fadeOut(500, function(){
$('#wrapper').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#wrapper').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 3000);
});
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html
AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.
The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.
So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.
Thus having the structure ready which is the following:
<div id='wrapper_top'>
<div id='content'>YOUR CONTENT</div>
<div id='wrapper_bottom'></div>
</div>
Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!
Here is the implementation: http://jsbin.com/wisofeqetu/1/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:700px;height:391px;">
</div>
</body>
</html>
If it doesn't have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:
<div id="wrapper">
<img src="firstImage" class="imageClass"></img>
<img src="secoundImage" class="imageClass"></img>
<img src="thirdImage" class="imageClass"></img>
</div>
then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:
#wrapper{
position: relative;
}
.imageClass{
position: absolute;
top: 0;
left: 0;
display: none;
}
display: none; will hide every image.
Now some JQuery. To appear first image when window load write this:
$(window).load(function() {
$('.imageClass').eq(0).show();
});
by the .eq() "command" you can specify which one element with class '.imageClass' you want to use exactly. Starts with 0. After that just do something like that:
function changeBackground() {
var current = 0;
//tells which image is currently shown
if(current<$('.imageClass').length){
//loop that will show first image again after it will show the last one
$('.imageClass').eq(current).fadeOut(500);
current++;
$('.imageClass').eq(current).fadeIn(500);
} else {
$('.imageClass').eq(current).fadeOut(500);
current=0;
$('.imageClass').eq(current).fadeIn(500);
}
}
changeBackground();
setInterval(changeBackground, 3000);
});
That should work, hope you will like it.
You may also use jQuery plugin backstretch.
So on click of these polaroid like images, I replace them with <div class="poof"></div> using jQuery's .replaceWith(). The reason I do this is to display a poof animated gif animation that I style to that class with js.
However, on click of the .polaroid, the polaroid images, the .poof div replaces that html every time, but its background never shows.
Try it for yourself, here:
Click an image, it is replaced by the .poof div, but the poof animation doesn't show.
I would greatly appreciate it someone could help me figure out why this is and how to get the animation to show each time.
Here is my javascript:
$(function(){
var time=1;
$('.polaroid').click(function(){
$(this).replaceWith('<div class="poof"></div>');
$('.poof').css('height', $(this).height()).css('width', $(this).width()).css('background', 'transparent url(poof.gif?t='+time+') center no-repeat');
time++;
});
});
Here is .poof's CSS:
.poof{
height:32px;
width:32px;
}
You are getting the height and width of an object that was remove / replaced in the DOM
Change to this:
var heights = 32;
var widths = 32;
$('.polaroid').click(function(){
heights = $(this).height();
widths = $(this).width();
$('.poof').css('height', heights).css('width', widths).css('background', 'transparent url(http://i.imgur.com/FsVe2LC.gif?t='+time+') center no-repeat');
time++;
setTimeout(function(){
$('.poof').remove();
}, 1500);
});
On my page there is ajax action, which loads div, that contain image on left and text on right.
The problem: first of all text loads, and on the left (it aligned left), then image loads, text shifts on right, and that looks really not smooth.
I tried something like :
$('div#to_load').ready(function() {
$('div#to_load').fadeIn();
});
but that doesn't help.
What can I do?
Update
I think you have to try this trick found here :
$("<img />", { src:"thelinkofyourimage"}).appendTo("div#to_load").fadeOut(0).fadeIn(1000);
Have a look to this fiddle : http://jsfiddle.net/qYHCn/.
You could track when all the images have loaded like so
var element = $('div#to_load');
var images = element.find('img');
var count = images.length;
for( var i = 0; i < count; i++) {
$(images[i]).load(function(){
count--;
if( count === 0 ){
element.fadeIn();
}
});
}
You could smoothly animate it in with jQuery (handy anyway when you are doing your ajax requests with jQuery):
jQuery
$("body").prepend('<img src="http://placehold.it/150x150" alt="img">');
$("img").animate({
opacity: 1,
left: 0
}, 700);
CSS
img {
float: left;
margin-right: 0.8em ;
left: -300px;
position: relative;
}
Fiddle.
Try to load image and text separately, not at once.
And for the shifting problem put image inside another div and define the size when it loads. Then text can't come to image space since we already giving space for image div.
sample code
$('#ImageID')
.load(
function(){
//Do stuff once the image specified above is loaded
$('#textId').html('your text');
}
);
If you don't want content to shift, you must declare the size the image will take up so that the required space is already accounted for when the browser does it's render.
Make sure you declare the size of the image, or the size of the container before you load
<div id="to_load">
<img src="...." height="400" width="400" />
</div>
or
<div id="to_load" style="height:400px;width:400px;overflow:hidden">
..dynamic content
</div>
Declaring image size either on the img element or in your stylesheet is a best practice recommendation anyways
Reflows & Repaint
Maybe you'd like something like this
#to_load {
width: 523px;
height: 192px;
}
#to_load img {
display: none;
}
setTimeout(function() {
$("<img />", { src:"http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png"})
.on('load', function(){
$(this).appendTo("#to_load").fadeIn(500);
});
},1000);
http://jsfiddle.net/AWntU/
I am trying get this background to fade in on click. I found one tutorial that was helpful, and I ended up created the code so it has two images, and they fade in and out on click to bring up the picture.
Here's the work: http://www.mccraymusic.com/bgchangetest.html
Only a couple of issues though:
How do I make this work without the images getting selected at random? I'd like it to just switch from the plain black image to the image with the drum set. (And cross-fade to if possible, but not necessary)
How do I center the image on the page, so the image of the drums are centered?
I'm guessing this is what you're after:
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image);
$(this).fadeIn(1000);
});
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
});
DEMONSTRATION
Also added :
display: block;
margin-left: auto;
margin-right: auto;
to your #bg element to center the image.
Alright, assuming you use JQuery
You have #backgroundid and #imageid
Begin by setting
$('#backgroundid').css('opacity',1);
$('#imageid').css('opacity',0); // setting opacity (transparency) to 0, invisible
Now you have #buttonid.
Set up a jquery event so that when it's clicked, you fade out the background, and fade in the image using JQuery's animate.
$('#buttonid').click(function() {
$('#backgroundid').animate(function() {
opacity : 0 // fade it to 0 opacity, invisible
}, 1000); // animation will take 1000ms, 1second
$('#imageid').animate(function() {
opacity : 1 // fade it to full opacity, solid
}, 1000);
});
Now about that image centering.
You can either let css manage it with
body { /* Body or #imageid parent */
text-align : center;
}
#imageid {
margin: 0px auto;
}
Or you can stick to a JQuery solution, using absolute/fixed positioning.
First, use some css to fix the position of your image
#imageid {
position: absolute; // or fixed, if you want
}
Now use JQuery to reposition it
function positionImage() {
var imagewidth = $('#imageid').width();
var imageheight = $('#imageid').height();
$('#imageid').css('left', ($(window).width() - imagewidth) / 2);
$('#imageid').css('top', ($(window).height() - imageheight) / 2);
}
$(document).ready(positionImage); // bind the ready event to reposition
$(window).resize(positionImage); // on window resize, reposition image too
if you keep a div element with height and width as 100% and bgcolor as black. And then change the opacity of the div as desired to get the fade in/out effect, that should generate the same effect. I guess..
You are better off using any available jQuery plugin as they would have optimized and fixed bugs for multiple browsers.
Try lightBoxMe plugin
http://buckwilson.me/lightboxme/
This is the simplest plugin available!