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
});
});
Related
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);
});
});
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();
});
});
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>
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.
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'));
});