I have a simple jQuery image changer, that when you hover over it will make swap all images with their grey version except the one you are on, that one will stay colour (They are all colour to begin with) and when you hover over another image, the last image gets changed to grey and the new one gets changed to colour.
However on IE, when you hover through the images, because it is changing the src IE will display the coloured version for a split second before doing what it is supposed to.
Here is the code:
$(window).load(function() {
//when mouse over the list item...
$('#portfolio ul li').hover(function(){
$(this).find('img').addClass('active');
$(this).siblings().each(function(Idx){
var imgSrc = ""+$(this).find('img').attr('src');
var imgGS = ""+$(this).find('a').attr('rel');
$(this).find('img').attr('src', imgGS);
$(this).find('a').attr('rel', imgSrc);
//alert (imgSrc + " " + imgGS);
});
//when mouse leave...
}, function(){
$(this).find('img').removeClass('active');
$(this).siblings().each(function(Idx){
var imgGS = $(this).find('img').attr('src');
var imgSrc = $(this).find('a').attr('rel');
$(this).find('a').attr('rel',imgGS);
$(this).find('img').attr('src', imgSrc);
//alert (imgSrc + " " + imgGS);
});
});
//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){
$(this).siblings().each(function(Idx){
var imgSrc = $(this).find('img').attr('src');
var imgGS = $(this).find('a').attr('rel');
$(this).find('img').attr('src', imgSrc);
$(this).find('a').attr('rel',imgGS);
// alert (imgSrc + " " + imgGS);
});
});
});
Any help would be appreciated :)
Thanks.
Try using image sprites for this. This involves putting both grey and colour in the same image and then instead of changing the source you simply change which part of the image gets shown. The solves the problem of your browser having to load images on the fly as they will already be loaded.
You could display the color image as a regular <img> and then the gray version is the css background. On hover, fade it's siblings img's out.
Something like
$('.yourList li').hover(function() {
$(this).siblings().find('img').hide();
},function() {
$(this).siblings().find('img').show();
});
Just make sure you either have content keeping that li from collapsing, or you manually set the dimensions.
Pixastic for catering to standards compliant browsers and css filters for IE should do the trick. dont need multiple images
http://www.pixastic.com/lib/download/
Related
on click -> i m adding a div with absolute position in a DIV which has specific Height and Width (vertical scroll) in which user input its data and on save i use html2canvas to convert html to image.
var element = angular.element("#beforeComment_" + index);
html2canvas(element).then(function (canvas) {
var _Image = canvas.toDataURL("image/png");
var _img = _Image.replace(/^data:image\/(png|jpg);base64,/, "");
});
if div is in visible area it works perfect but as i use window scroll to move position DIV down i get blank image.
but as compared to if i use
html2canvas(window.document.body).then(function (canvas) {
var _Image = canvas.toDataURL("image/png");
var _img = _Image.replace(/^data:image\/(png|jpg);base64,/, "");
});
it works perfect even i scroll or drag drop Div.
it would be better if there is pluker to make things more clear but i got complex html structure and it will add more complexity
can some one help :(
Have you tried
var element = angular.element(document.querySelector('#beforeComment_' + index));
Also, check if '#beforeComment_' + index actually exists.
When I click a certain link I want the background-image to fadeOut, change to another image and then fadeIn.
The code I have:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').css('background-image', 'url('+image+')');
})
I tried this:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000').fadeIn('3000').css('background-image', 'url(' + image + ')');
})
but this didn't work, what am I doing wrong? (I'm new to jQuery)
EDIT:
I solved this with Rory McCrossan answer:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000', function() {
$(this).css('background-image', 'url('+image+')').fadeIn('3000');
});
});
But now this fadesOut to a white background and and then fadesIn to the image, giving a sensation of a flash? Is there a way to load the image before?
You need to chain the fades by calling the fadeIn after the fadeOut has completed. You can do this by using the callback function parameter. Try this:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000', function() {
$(this).css('background-image', 'url('+image+')').fadeIn('3000');
});
});
Wouldn't it be much simpler if you append / remove a div with the image you want and not change anything in the background? Just an example:
<div data-image="some-other-image.jpg" class="appendhere" style="position:relative">some content and an image background here</div>
Now using jQuery, you may put the image in the above data attribute on top, with 0 opacity, fade it in and out:
$('.link').on('click',function(){
var image = $(this).data('image');
var appendcode = '<div class="appended" style="display:none;position:absolute;width:200px;height:200px;overflow:hidden"><img src="' + image + '"></div>';
$('#div-with-the-bgimage').append(appendcode);
$('.appended').css({'opacity': 0, 'display':'block', 'z-index': 999}).fadeIn('3000', function() {
$(this).fadeOut('3000');
});
});
I used some inline styles there to point you need to make the wrapper relative positioned and the appended absolute positioned and with a higher z-index, you can make it much more elegant by including these in your CSS of course.
U can combine animate and opacity or use fadeOut and fadeIn functions.
Check out this link jsfiddle to see a working example using fadeOut and fadeIn.
U can also specify a unique img tag with data-gallery attribute storing multiple url's for images to toggle between all of them. Check this other link jsfiddle to see a working example. Click on the button Toggle to change the image.
Hope it useful!
Project link.
If you go to the "Residences" option from the top navigation, and then click on any item in the left submenu item (Bathroom, Kitchen etc). The main div, in which the content for Residences is arriving, the background image will change.
JS:
$('.resMenu li a').click(function(){
var href = $(this).attr('bckimg');
$('.resMenu li a').removeClass('clicked');
$(this).addClass('clicked');
var num = $(this).attr('rel');
var image = $('#section-2');
image.fadeOut(500, function () {
image.css({
'background':'url('+href+') center top no-repeat',
'background-size':'cover'
});
image.fadeIn(500);
});
});
JS for preloading images:
// Array of images:
var imageArray = [
'<?php bloginfo('template_url');?>/images/resi-1.jpg',
'<?php bloginfo('template_url');?>/images/resi-2.jpg',
'<?php bloginfo('template_url');?>/images/resi-3.jpg'
];
// Loop through and declare an element that will not actually be used.
$.each(imageArray, function (i, val) {
$('#alwaysHide').append('<img src="'+ val +'">')
});
What this does is, that it makes the page white (the fade effect isn't working either), while the transition is happening. I looked at the previously asked questions related to this but they always either had an tag or the css was predefined, which is not possible for me to do here. Any ideas how the white flash can be avoided?
It goes white because that is the background color. The images need to be loaded. This is why it shows the background, because there is no image there before it has loaded.
You will need to preload your images using Javascript if you want to avoid this.
The browser loads the image the first time, but the second time it has been cached which is why it only shows the white the first time you visit that section.
This question seems somewhat related to
How do I check if the mouse is over an element in jQuery?
jQuery check hover status before start trigger
but still not quite. Here's the thing: I'm writing a small gallery and at some point the user clicks on a thumbnail. The large version of the image shows as an inside of a full-screen . So far, so good. When the mouse hovers over that I show three images: close, left, right, intended to navigate through an album; when the mouse leaves the image or the navigation images, the three navigation images fade.
These three navigation images partially overlap with the main image, e.g. the close image is a circle in the upper left corner. And that's the tricky part.
The mouseleave triggers whenever the mouse moves from the main image off the side, or from the main image onto one of the three small overlapping images. The mouseenter triggers for each of the small overlapping images as expected.
However, this creates a funky blinking effect because on mouseleave of the main image I hide() the three small images, which immediately triggers a mouseenter for the main image because of the overlap and the mouse still being on top of the main image.
To avoid that, I tried to determine if, upon mouseleave of the main image, the mouse has moved onto one of the small overlapping images. For that, I used this code:
main_img.mouseleave(function() {
if (!hoverButtons()) {
doHideButtons();
}
});
function hoverButtons() {
return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}
This works great on Safari and Chrome, but not on FF and IE where the images still blink. Further noodling around posts, it seems that ":hover" is the problem here as it is not a proper selector expression but rather a CSS pseudo class?
I tried to work with switches that I flip on/off as I mouseenter/mouseleave the various images, but that doesn't work either because the events seem to trigger in different orders.
How do I go about this? Thanks!
EDIT: I might have to clarify: before the navigation buttons are shown, I set their respective left and top attributes in order to place them in dependence of the main image's position. That means I need to do some work before I can call .show() on a jQuery selector. I tried to add a new function .placeShow() but that didn't quite work with respect to selectors like $(".nav-button:hidden").placeShow().
You can try with this:
$("#main, #small").mouseenter(function() {
$("#small:hidden").show();
}).mouseleave(function(e) {
if(e.target.id != 'main' || e.target.id != 'small') {
$('#small').hide();
}
});
DEMO
Here is what I ended up doing. There are four images I use in my slide show: the main image, and then left, right, close button images.
main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");
The classes here are essentially empty, but help me to select based on above answers. The main image then shows without navigation buttons, and I attach these event handler functions:
$(".slide-show").mouseenter(function() {
$(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
$(".photo-nav").hide();
});
where the placeShow() moves the navigation buttons into their respective places. This function is defined as follows:
$.fn.placeShow = function() {
var pos = main_img.position();
var left = pos.left;
var top = pos.top;
var width = main_img.width();
var height = main_img.height();
close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}
This worked so far on Safari, IE, FF, Chrome (well, the versions I've got here...)
Let me know what you think, if I can trim this code more, or if there are alternative solutions that would be more elegant/fast. The final result of all this is on my website now.
Jens
I have a div with an image inside it. When I hover the image, I create a tooltip div thats absolutely positioned over part of the image (the absolute position is important). It contains the title and alt text.
This is all well and good until you hover the tooltip box. It doesn't bubble down and it thinks I'm no longer hovering over the image, thus making the tooltip box disapear. But then it registers I'm hovering the image again and it goes back and forth between showing the tooltip box and hiding it.
Thus the flickering issue.
There are a bunch of posts on SO about the flickering issue and I've tried so many solutions but none have been working. I've tried Mouseover/mouseout, mouseenter/mouseleave, hover, and even using live() in combination with them. I even switched from creating the tooltip from scratch to having the empty div there so it would be in the DOM when the page loaded in case that was the issue. I really don't know what to do anymore. Here is my code at the moment.
$("img").bind("mouseover", function() {
var pimg = $(this);
var position = pimg.position();
var top = position.top;
var left = position.left;
var title = $(this).attr('title');
var alt = $(this).attr('alt');
$('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});
$("img").bind("mouseout", function() {
$('.toolTip').empty();
});
The problem is a) you need to use mouseenter / mouseleave and b) the tooltip div needs to live inside the element that has the mouseenter / mouseleave listeners.
eg:
<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>