Crossfade between dynamically assigned background images without white flash - javascript

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.

Related

How to implement an image gallery in ASP.net webpage without refreshing the page?

I am developing a website by using ASP.NET. I want to implement an image gallery thing like showing in this image. When user click a thumbnail image the full resolution image should load.
So I have a page to save all the information with the images. So when an user upload images I am saving them inside 2 folders ( one folder for the full resolution image and other for the thumbnail images with small resolutions). Also I am saving both paths inside my DB.
So I already loaded bottom panel ( Thumbnail panel ) by using my thumbnail images. I dynamically created imagebuttons for it. There I set imagebutton image URL to my DB URLs. Then I add those imagebuttons to placeholder set in my page. So now its loading. Now problem is how to get my Large preview.
Shall I make an event handler for my Imagebutton and when a user click a image the page will asynchronously refresh and show the image?
Do I need to use Jquery or javascript to do this? Then how?
Is this anything to do with Iframe?
So what is the best way to do this? Am I doing the right thing? I mean loading thumbnaails below and Large scale image top of that or Shall I load high resolution images at first place and do a resize to show them in thumbnail panel?
Thank you very much.
The easiest way is on initial load store large-image-url as an attribute on each Imagebutton and onClick event handler use JS to get that attribute and replace img src of the Large preview.
I created something similar while working for my previous company on this website. You can view this JavaScript file for the code, but just in case the links die or the site gets updated, the code is below:
The Call
widashowSetup('[Pipe Delimited List of Small Images]','[Pipe Delimited List of Large Images]','[Path to Left Arrow]','[Path to Right Arrow]');
JS File
//####################################################
//##### Widashow slideshow image scroller V1.2 #####
//##### Made by Jamie Barker for Wida Group Ltd. #####
//####################################################
//##### SETUP #####
var ThumbnailWidth=111 //SET THIS TO THE WIDTH (+margin/padding) OF THE SMALL IMAGES
var SlideTimer=4000 //THIS IS THE DURATION BETWEEN SLIDE TRANSITIONS, 4000=4 SECONDS
var TransitionTimer=1000 //THIS IS THE TRANSITION DURATION, 1000=1 SECOND
//##### END SETUP #####
var MoveNext
var MovePrev
//Function to decide which way we're moving, and if we're moving now or after a timeout
function CallMove(dir,timer,clear) {
//Clear the current timers so we're starting afresh
clearTimeout(MoveNext);
clearTimeout(MovePrev);
//If we've specified no timer, just move it now. Otherwise set it to move in the specified time above
if (dir=='right') {
if (timer==false) {
widashowMoveNext()
} else {
MoveNext=setTimeout("widashowMoveNext()",SlideTimer);
}
} else if (dir=='left') {
if (timer==false) {
widashowMovePrev()
} else {
MovePrev=setTimeout("widashowMovePrev()",SlideTimer);
}
}
}
//Move the images to the right
function widashowMoveNext() {
//#### Large Images #####
//Set the current and next image as variables and clone the current image at the end
var currentImg=$('#widashow-large img:nth-child(1)')
var nextImg=$('#widashow-large img:nth-child(2)')
currentImg.clone().appendTo('#widashow-large');
//Hide the cloned and put it to the bottom of the z-index
$('#widashow-large img:last-child').css('z-index','0');
$('#widashow-large img:last-child').hide();
//Put the next image second in the z-index and make it appear, then fade out the top image
nextImg.css('z-index','50')
nextImg.show();
currentImg.fadeOut(TransitionTimer);
//#### Small Images #####
var ImageList=$('#widashow-smallimagelist')
var FirstImage=$('#widashow-smallimagelist img:first-child')
//slide the images across by the width each image takes up and move it back when the first image gets put at the end
ImageList.animate({
left: '-='+ThumbnailWidth,
width: '+='+ThumbnailWidth
},TransitionTimer, function() {
ImageList.animate({
left:'+='+ThumbnailWidth,
width:'-='+ThumbnailWidth
},0)
});
FirstImage.fadeOut(TransitionTimer, function(){
$(this).appendTo(ImageList);
$(this).show()
});
//Set the new image showing as z-index 100 and remove the image from the top
setTimeout("$('#widashow-large img:nth-child(2)').css('z-index','100')",TransitionTimer);
setTimeout("$('#widashow-large img:nth-child(1)').remove()",TransitionTimer);
//Call it again so it keeps the slideshow moving
CallMove('right');
}
//Move the images to the left
function widashowMovePrev() {
//#### Large Images #####
//Set the current and next image as variables and clone the current image at the end
var currentImg=$('#widashow-large img:nth-child(1)')
var nextImg=$('#widashow-large img:last-child')
//Move the last image to front, hide it but put it's z-index on par with the current top image
nextImg.prependTo('#widashow-large');
nextImg.hide();
nextImg.css('z-index','100');
//#### Small Images #####
//Hide the last image and put it to the front of the list
var LastImg=$('#widashow-smallimagelist img:last-child')
LastImg.hide();
LastImg.prependTo($('#widashow-smallimagelist'));
//Move the images across and fade in the new active small image and fade in the new top large image
var ImageList=$('#widashow-smallimagelist')
ImageList.animate({
left: '+='+ThumbnailWidth,
width: '+='+ThumbnailWidth
},TransitionTimer, function() {
ImageList.animate({
left:'-='+ThumbnailWidth,
width:'-='+ThumbnailWidth
},1, function(){
LastImg.fadeIn();
currentImg.css('z-index','50');
nextImg.fadeIn(TransitionTimer);
setTimeout("$('#widashow-large img:nth-child(2)').css('z-index','0')",TransitionTimer);
setTimeout("$('#widashow-large img:nth-child(2)').hide()",TransitionTimer);
})
});
//Call it again so it keeps the slideshow moving
CallMove('left');
}
//This function sets up the HTML and calls the function to get it moving initially
function widashowSetup(SmallImages,LargeImages,LeftImg,RightImg) {
//Put the Images into an array so we can loop through them
var SmallImageList=SmallImages.split('|');
var LargeImageList=LargeImages.split('|');
//Put the HTML in for the small images and the navigation buttons
$('#widashow-small').html('<img class="widashow-nav left" src="'+LeftImg+'" alt="" /><div id="widashow-smallimagelist"></div><img class="widashow-nav right" src="'+RightImg+'" alt="" />');
//Loop through and insert the large images
for (var i=0;i<LargeImageList.length;i++) {
$('#widashow-large').append('<img rel="'+[i]+'" src="'+LargeImageList[i]+'" alt="" />');
}
//Loop through and insert the small images
for (var i=0;i<SmallImageList.length;i++) {
$('#widashow-smallimagelist').append('<img rel="'+[i]+'" src="'+SmallImageList[i]+'" alt="" />');
}
//Start it off by moving it right
CallMove('right');
}
//Set up the click events for the navigation
$(document).ready(function(){
$('.widashow-nav.right').on('click', function(event) {
CallMove('right',false);
});
$('.widashow-nav.left').on('click', function(event) {
CallMove('left',false);
});
$('#widashow-smallimagelist img').on('click', function(event) {
//Set the index for the clicked image
var ImgIndex=eval($(this).index()+1);
//Get the number of images
var ImgTotal=$('#widashow-large img').length
var ImageList=$('#widashow-smallimagelist')
var TotalWidth=0
//Loop through the images, moving them along until we hit the clicked image. Also work out the total width we need to move the images across.
for (var i=1;i<ImgIndex;i++) {
$('#widashow-large img:first-child').appendTo('#widashow-large');
$('#widashow-large img:last-child').css('z-index','0');
$('#widashow-large img:last-child').hide();
$('#widashow-large img:first-child').css('z-index','100')
$('#widashow-large img:first-child').show();
TotalWidth=eval(TotalWidth+ThumbnailWidth)
$('#widashow-smallimagelist img:first-child').appendTo($('#widashow-smallimagelist'))
}
//Move the images across the width required
ImageList.animate({
left: '-='+TotalWidth,
width: '+='+TotalWidth
},100, function() {
$('#widashow-smallimagelist').animate({
left:'+='+TotalWidth,
width:'-='+TotalWidth
},1, function(){
})
});
//Make it stop moving
CallMove(false,false);
});
});

Change slider image in Click

in my page i have a thumnails list of images and a background image, basically what im attempting to do is when one of the thumbnails images are clicked the background image changes. But for i cant figure out why its not change the image.
When the thumbnail image is clicked the background image gets faded but it doesnt replace the image for the new one. Above i leave my code:
thumb-img id the Thumbnails id
and #banner is the wrapper of the background imagem.
Example: http://jsfiddle.net/q6h50ejq/6/
$('#thumb-img').click(function(){
$this = $(this);
$image = $this.attr('full');
$("#banner").hide().html('<img class="item_image" src="img/newImage.jpg">').fadeIn(300);
});
});
Here is the completed results with commented explanation.
JSFiddle
The trick is not to replace the html, but replace the src.
//use a class rather than an ID to bind the click event
$('.thumb-img').click(function () {
//gets the source of the thumbnail
var source = $(this).attr('src');
$("#banner").fadeOut(function () {
//fades banner out and upon completion changes source image and fades in.
$(this).attr("src", source);
$(this).fadeIn();
});
});

Add Transparent Image on top of other Images with JavaScript

I need to add a Transparent image on top of all images on a page. The goal is if a user were to do a simple right click and save of an image, they would save the transparent image.
I do realize this is not a guaranteed method and that none exist to prevent image theft but simply a measure that a client wants added to prevent your average non tech person from saving images.
Using JavaScript I would like to find all images or all images within a certain Div.
Apply a new image overlay on top of these images that will have the same width and height of the image they are covering
I am not sure how to do this with JavaScript and was hoping someone would have a quick fix or example. I was unable to find anything so far on Google or SO. Appreciate any help
I have this JS which gets all images on a page so far...
// Get all images on a Page
function checkimages() {
var images = document.images;
for (var i=0; i<images.length; i++){
var img =images[i].src;
// Add new transparent image on top of this image
alert(img);
}
}
I would advise you to work with jQuery (or similar library) to keep things easier. I would even write a small jquery extension to make it easy to recycle the code, and apply it on any div (or other wrapper), wich child images you want to be overlayed.
My code would look something like this:
// jquery plugin to create overlays
// src is the url of the overlay image
// apply to any container that contains images to be overlayed
$.fn.overlayImages = function(src) {
// loop trough the images
$(this).find('img').each(function() {
// cache some variables
var $img = $(this);
var $parent = $img.parent();
// make the parent relative, if not yet absolute or fixed, for easy positioning
if ($parent.css('position') !== 'fixed' && $parent.css('position') !== 'absolute') {
$parent.css('position', 'relative');
}
// get the position of the image
var position = $img.position();
// clone the image
var $overlay = $img.clone();
// set the styling, based on the img, for exact positioning
$overlay.css({
top: position.top,
left: position.left,
position: 'absolute',
width: $img.width(),
height: $img.height()
});
// change the src attribute for the overlay
$overlay.attr('src', src);
// insert the overlay to the DOM
$overlay.insertAfter($img);
});
}
// when the DOM is loaded (not just ready, the images need to be there to copy their position and size)
$(window).load(function() {
// apply the overlay plugin to the wrapper of the images
$('#replace-images').overlayImages("http://www.riptideinnovations.com/images/watermark.png");
});
I added the step by step explanation inside the code as comments, but do feel free to ask if you want any further explanation.
I set up a small fiddle to demonstrate: http://jsfiddle.net/pP96f/6/
I don't know if this would help, but you could make your images all div's with backgrounds like this:
<div style="background-image: url('<your_image>');"></div>

Change a div background with jQuery

I need to change my background div with some other images.
I want that first, myDiv load the first background image on css style, and then within 2/3 seconds of delay add a fade effect change the background image.
If it's possible, I need to do this with jQuery.
You cannot do fade or any other transitions directly on the background image. You can however add another div with second image as its background and fadeOut() the original one.
Does this do what you you want?
http://jqueryfordesigners.com/image-loading/
EDIT: A bit more Googling - this sounds like what you are trying to do...
http://www.magneticwebworks.com/jquery-rotating-page-background/
Edit: another go - THis? http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1
this is not fade effect but you can delay and change background image like this.
function changebackground(){
$('#divID').css("background-image", "url(/myimage.jpg)");
}
setTimeout(function() { changebackground();}, 3000);
this might be good workaround
http://jquery.malsup.com/cycle/
after you position on top divs with cycle it can be your background - cycle.js give's you lot of options.
if you want only rotate image's in bacground you must first preload that image and second you must put it in other div so that both divs can animate.
There is no support for this, even if you add all the functionality of jQuery UI.
You could append a temporary image, absolutely positioned inside the div for which u want to change background. Let the image fade in, and once it's fully opaque, swap background image for the div. This will be problematic if you have a repeated background, however.
var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
var img = $('<img />', {
src: im2,
}).css({
position: 'absolute',
top: 0,
left: 0
}).hide();
$(this).append(img);
img.fadeIn('slow', function() {
$(this).parent().css('background-image', 'url("'+im2+'")');
$(this).remove();
});
});
Of course, you should move the CSS I included in my script to a .css file, and use a class instead, for more readable code.

How can I work around reloading these images?

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/

Categories

Resources