I am looking to have an image load first then the location icons pop over with good animations like the bounce or pop up effect. I currently have static image but want to make it more interesting.i have attached the image here
Maybe something like this?
$(document).ready(function() {
//Hide all location images
$("img.locations").toggle();
$("img.backround-image").on("load", function() {
$("img.locations").fadeIn();
//Show all location images with a fade in
//- or any other animation for all location images
});
});
What am I doing wrong?It does not show the gif.
It not necessarily has to be an element to any image that is within a div
$('#loadbig a').each(function(index,el){
//find this link's child image element
var img = $(this).find('img');
//hide the image and attach the load event handler
$(img).hide().load(function () {
//remove the link's "loading" classname
$(el).removeClass('loading');
//show the loaded image
$(img).fadeIn();
})
});
css:
#loadbig a.loading{
background:url(images/loading.gif) no-repeat center center;
}
An anchor is an inline element which has no height therefore the background image will not show.
better to show the loading gif as an image itself and hide onload
$('#loadbig a').each(function(index,el){
//find this link's child image element
var img = $(this).find('img.bigImage');
var loading = $(this).find('img.loading');
//hide the image and attach the load event handler
$(img).hide().load(function () {
//hide loading gif
$(loading).hide();
//show the loaded image
$(img).fadeIn();
})
});
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);
});
});
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.
all.
I have.
<div id="imagecontainer" class="header-image-container"> </div>
BG image are specified in css for ich page according on parent class.
.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}
And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.
I think this will do you want:
$('#menu').mouseenter(function() {
$('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
$('#imagecontainer').removeAttr('style');
})
You can see it in action here: http://jsfiddle.net/Cdzk8/
If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.
Store the current background image as data before swapping it out, and retrieve it from there when you want to swap it back.
$('#imagecontainer').mouseover(function() {
$(this).data('bgimg') = $(this).css('background-image');
$(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
$(this).css('background-image', $(this).data('bgimg'));
});