I am newbie programmer and I don't know how I can show .jpg image after my website load. I want to set it on whole page (100% height and width) and allow it to hide after user click.
Via HTML
<img style="width:100%;height:100%" id="image" src="...">
or CSS
#image
{
width: 100%;
height:100%;
}
Then in your javascript
// add event listener to the image
var el = document.getElementById("image");
el.addEventListener("click", hide_img, false);
function hide_img(){
this.style.display="none";
}
<script>//this is javascript...
window.onload=()=>{
//when the page loaded create new image
img=document.createElement("img");
//set the image data
img.src="img.jpg";
img.style.height="100%";
img.style.width="100%";
//onclick remove image
img.onclick=()=>{
img.parentNode.removeChild(img);
};
//add image to page
document.body.appendChild(img);
}
</script>
So I have this video background when you first load the page up and then there's a button you click that overlays what's visible and puts a div that's the pages height, when you hide the div afterwards the video that I had is gone and a white background is present instead, why's that? thanks for help.
$( document ).ready(function() {
var yellowclicks = 0;
$('.x').hide();
$('.yellow-text-bg').hide();
$('.round-button-circle-x').hide();
$('.round-button-circle').click(function(){
$('.round-button').css('margin-top','5%');
$('#logo').fadeOut(80);
$('.hiderow').hide();
$('.round-button-circle').hide();
$('.yellow-text-bg').delay(80).fadeIn(500);
$('.round-button-circle-x').delay(80).fadeIn(500);
yellowclicks =+1;
$('.intro').hide();
});
$('.arrow').click(function(){
$('.yellow-text-bg').fadeOut(400);
$('#logo').delay(500).fadeIn(500);
$('.round-button-circle').delay(500).fadeIn(500).css('margin-top','10%');
});
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();
});
});
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'));
});